/* ============================================================================
ADAPTD — central design-token layer
Single source of truth for the palette, shadows and radii used across every
page (ADAPTD shell, Hub, all trackers, Calendar, Distribution, Tissue,
Terminology, Report Builder). Loaded via in each page's , so
the :root vars are available to inline styles both standalone and embedded.
Values are the canonical/most-common variant for each semantic slot. Where a
page previously used a slightly different literal for the same purpose it is
pointed at the shared token here (normalization) — those cases are called out
in the delivery notes. Purely one-off / decorative literals keep their own
named token so the swap stays pixel-identical.
============================================================================ */
:root {
/* ---- Backgrounds (deepest → lighter) ---- */
--adx-bg: #080a0f; /* body / deepest */
--adx-bg-0: #0b0f17; /* app base panels */
--adx-bg-1: #0e131b; /* raised base */
--adx-surface: #11161f; /* panel surface */
--adx-surface-2: #161c27; /* card / tile surface */
--adx-surface-3: #1a2230; /* inset / nested surface */
--adx-elevated: #12141c; /* dropdown / popover surface */
--adx-inset: #0c0e14; /* deep inset (version rows, wells) */
/* ---- Borders / hairlines (faint → strong) ---- */
--adx-hairline: #1c2330; /* default divider / border */
--adx-border-mute: #222b39;
--adx-border: #263041;
--adx-border-2: #2a3344;
--adx-border-strong: #34415a;
/* ---- Text hierarchy (bright → faint) ---- */
--adx-text-bright: #e7ecf3; /* headings / primary */
--adx-text-hi: #c3cad6; /* hover / high-mid label */
--adx-text: #cfd6e0; /* body */
--adx-text-2: #aeb7c4; /* secondary body */
--adx-text-muted: #9aa5b6; /* muted blue-grey label */
--adx-text-mid: #8893a4; /* labels (most common) */
--adx-text-dim: #6b7686; /* dim labels / captions */
--adx-text-dimmer: #5b6575; /* mono eyebrow labels */
--adx-text-faint: #4d5766; /* disabled-ish */
--adx-text-faintest: #3a4250; /* disabled nav arrows */
/* ---- Accent: purple ---- */
--adx-purple: #a78bfa;
--adx-purple-bright: #c98bff;
--adx-purple-soft: #d8cdec;
--adx-purple-tint: #f1eefe; /* text on purple fill */
/* ---- Accent: amber ---- */
--adx-amber: #f5a524; /* primary accent */
--adx-amber-bright: #ffc35c; /* gradient hi / hover */
--adx-amber-hi: #f5c542;
--adx-amber-warm: #e7b35a;
--adx-amber-dim: #d0a45c;
--adx-amber-ink: #1a1206; /* text/icon on amber fill */
/* ---- Status ---- */
--adx-green: #34d39a; /* success / synced */
--adx-green-bright: #7fe3b6;
--adx-green-soft: #6bdba0;
--adx-green-ink: #06140d; /* text on green fill */
--adx-warn: #ff8d4d; /* warning orange */
--adx-error: #ff5d5d;
--adx-error-soft: #ff8d8d;
/* ---- App shell background gradient ---- */
--adx-shell-grad-a: #3f146fe1;
--adx-shell-grad-b: #421081;
/* ---- Chart series / axes ---- */
--adx-chart-trace: #3b4453; /* plotted session-mean line */
--adx-chart-baseline: #7e93b8; /* dashed baseline */
--adx-chart-chronic: #c98a4f; /* chronic reference */
--adx-chart-ref: #5b9dff; /* acute / reference blue */
--adx-chart-ref-soft: #9cc4ff;
--adx-chart-grid: #1c2330; /* gridlines (= hairline) */
--adx-chart-axis: #5b6575; /* axis labels (= text-dimmer) */
/* ---- Shadows ---- */
--adx-shadow-popover: 0 16px 40px -12px rgba(0,0,0,.6);
--adx-shadow-panel: 0 24px 60px -20px rgba(0,0,0,.6);
--adx-shadow-card: 0 12px 24px -16px rgba(0,0,0,.5);
/* ---- Radii ---- */
--adx-r-sm: 6px;
--adx-r: 8px;
--adx-r-md: 9px;
--adx-r-lg: 12px;
--adx-r-xl: 16px;
/* ---- Print / light-mode scale (Calendar export, print sheets) ---- */
--adx-white: #fff;
--adx-print-bg: #fff;
--adx-print-ink: #111;
--adx-print-g1: #333;
--adx-print-g2: #555;
--adx-print-g3: #ccc;
--adx-print-g4: #ddd;
/* ---- Print export (chart snapshots on white paper): ink text, light gridlines,
ink-friendly series that stay distinguishable on white ---- */
--adx-print-axis: #333; /* axis tick text */
--adx-print-grid: #d8dde2; /* gridlines / lane borders */
--adx-print-grid-strong: #9aa3ad; /* zero / baseline gridline */
--adx-print-accent: #8a5a1a; /* warm header (training lane) */
--adx-print-halo: #fff; /* point / label halo on white */
--adx-print-series-1: #c67f10; /* amber → ink */
--adx-print-series-2: #2f8f6a; /* green → ink */
--adx-print-series-3: #3a6fb0; /* blue → ink */
--adx-print-series-4: #b8564d; /* clay → ink */
--adx-print-series-5: #8a5cc0; /* violet → ink */
/* ---- extended palette: chart series, category, slate scale, light/print, dark tints ---- */
--adx-bg-b: #111826;
--adx-surface-a: #12171f;
--adx-surface-b: #141a24;
--adx-surface-c: #141b26;
--adx-surface-d: #171e29;
--adx-surface-e: #181a1f;
--adx-surface-f: #232b38;
--adx-surface-g: #232c3a;
--adx-surface-h: #22242a;
--adx-surface-i: #33353c;
--adx-surface-j: #151b26;
--adx-surface-k: #131a24;
--adx-bg-a: #10151d;
--adx-bg-c: #0d0812;
--adx-bg-d: #0d1219;
--adx-bg-e: #0b0f16;
--adx-border-a: #262f40;
--adx-border-b: #333c48;
--adx-border-c: #3a4353;
--adx-border-d: #3a4454;
--adx-border-e: #3a4657;
--adx-border-f: #3a4658;
--adx-border-g: #3b4657;
--adx-border-h: #212c3d;
--adx-border-i: #222c3b;
--adx-grid-soft: #39424f;
--adx-slate: #46505f;
--adx-slate-2: #46536b;
--adx-slate-3: #5a6472;
--adx-slate-4: #5b6472;
--adx-slate-blue: #5b7495;
--adx-slate-5: #6f7c92;
--adx-slate-6: #7b8496;
--adx-slate-7: #7c8797;
--adx-slate-8: #7c8798;
--adx-slate-9: #7e8896;
--adx-slate-10: #7a8494;
--adx-slate-11: #7a8aa3;
--adx-slate-12: #8a8f99;
--adx-slate-13: #6b6f78;
--adx-slate-14: #4a5361;
--adx-slate-15: #4d5666;
--adx-slate-16: #4a4d55;
--adx-slate-lt: #8ea1bd;
--adx-slate-lt-2: #8ea3bd;
--adx-slate-lt-3: #9fb0c8;
--adx-slate-lt-4: #9fb0c7;
--adx-slate-lt-5: #a6aab2;
--adx-slate-lt-6: #a8b1bd;
--adx-slate-lt-7: #a8b1bf;
--adx-slate-lt-8: #aab3c0;
--adx-slate-lt-9: #b6bfcc;
--adx-slate-lt-10: #c6cdd8;
--adx-navy: #1e2a4a;
--adx-navy-deep: #06131f;
--adx-text-light: #dbe1ea;
--adx-text-light-2: #cdd8ea;
--adx-text-light-3: #e9edf4;
--adx-text-light-4: #f7f4fb;
--adx-blue: #6f93c9;
--adx-blue-2: #7fa8e6;
--adx-sky: #38bdf8;
--adx-sky-2: #7dd3fc;
--adx-green-2: #6fce9f;
--adx-green-3: #7fc9a8;
--adx-green-4: #5fae95;
--adx-green-5: #5cc0a8;
--adx-green-6: #5ec8b0;
--adx-green-7: #7bd88f;
--adx-green-deep: #2c5a47;
--adx-green-deep-2: #063123;
--adx-green-deep-3: #1f6f4f;
--adx-green-deep-4: #1f7a4d;
--adx-green-deep-5: #06231a;
--adx-green-deep-6: #24463a;
--adx-teal-deep: #0f766e;
--adx-teal: #2fb6a8;
--adx-teal-bright: #2dd4bf;
--adx-aqua: #7fd8d8;
--adx-cyan: #5fa9b0;
--adx-violet: #9a86c4;
--adx-violet-2: #b98add;
--adx-lilac: #c9a8ff;
--adx-lilac-2: #c9b8f7;
--adx-lilac-3: #c9b8e8;
--adx-orchid: #d67ab8;
--adx-pink: #e879a8;
--adx-pink-2: #ff9ecf;
--adx-rose: #cf6f8a;
--adx-lime: #b9d24a;
--adx-lime-2: #a3e635;
--adx-sand: #f0d264;
--adx-gold: #e8b339;
--adx-gold-2: #c9a15f;
--adx-cream: #f5d9a8;
--adx-cream-2: #f4efe3;
--adx-cream-3: #fbf1de;
--adx-cream-4: #f2efe9;
--adx-cream-5: #e6e2d8;
--adx-cream-6: #f0d6a8;
--adx-white-2: #fbfaf7;
--adx-amber-lt: #ffd27f;
--adx-amber-skin: #ffb27a;
--adx-amber-skin-2: #e6a072;
--adx-clay: #e8935c;
--adx-clay-2: #d99a7f;
--adx-clay-3: #cf7d76;
--adx-tan: #c9ad7a;
--adx-tan-2: #a3895f;
--adx-tan-3: #e3c07f;
--adx-olive: #b0a45f;
--adx-orange: #fb923c;
--adx-orange-2: #ff8a3d;
--adx-orange-3: #f58c4c;
--adx-coral: #ff8d6b;
--adx-rust: #b25b23;
--adx-amber-deep: #b3791b;
--adx-amber-deep-2: #33290f;
--adx-amber-deep-3: #12100a;
--adx-amber-deep-4: #4a3a1a;
--adx-red-2: #ff6b5d;
--adx-red-3: #ff6b6b;
--adx-red-light-3: #ff8f8f;
--adx-red-light: #ffb4b4;
--adx-red-light-2: #ffb0b0;
--adx-red-deep: #3a0d0d;
--adx-red-deep-2: #3a1f22;
--adx-red-deep-3: #4a2b2b;
--adx-red-deep-4: #3a2230;
--adx-mauve: #8a5a5a;
--adx-mauve-2: #a06868;
--adx-tier-ink-1: #3a1c08;
--adx-tier-ink-2: #2e2206;
--adx-tier-ink-3: #23300a;
--adx-shell-grad-alt: #431873e1;
--adx-shell-grad-alt-b: #28211a;
/* ---- Status: monitor (mild decline) — its own token so it can stay a
warning-amber independently of the amber accent role ---- */
--adx-status-monitor: #f5a524;
/* ---- Channel triplets (R,G,B) for translucent overlays / tints / shadows.
Used as rgba(var(--adx-X-rgb), ) so each theme flips the base
colour while the per-use alpha stays inline. These replace the ~400
hard-coded rgba() literals that used to be scattered across the pages
(white hover overlays, black shadows, accent tints, chart glows). ---- */
--adx-overlay-rgb: 255,255,255; /* additive hover / hairline highlight */
--adx-shadow-rgb: 0,0,0; /* drop shadows / scrims on surfaces */
--adx-scrim-rgb: 4,5,8; /* modal backdrop dim */
--adx-amber-rgb: 245,165,36; /* primary accent tint */
--adx-amber-hi-rgb: 245,197,66;
--adx-amber-deep-rgb: 179,121,27;
--adx-purple-rgb: 167,139,250; /* secondary accent tint */
--adx-chronic-rgb: 201,138,79;
--adx-green-rgb: 52,211,154;
--adx-green7-rgb: 123,216,143;
--adx-green5-rgb: 94,200,176;
--adx-teal-rgb: 47,182,168;
--adx-error-rgb: 255,93,93;
--adx-warn-rgb: 255,141,77;
--adx-orange-rgb: 251,146,60;
--adx-ref-rgb: 91,157,255;
--adx-sky-rgb: 56,189,248;
--adx-sky2-rgb: 125,211,252;
--adx-navy-rgb: 30,42,74;
--adx-slate-blue-rgb: 126,147,184;
--adx-slate-blue2-rgb: 91,116,149;
--adx-slate-mid-rgb: 136,147,164;
--adx-muted-rgb: 150,160,175;
--adx-dim-rgb: 107,118,134;
--adx-faint-rgb: 74,84,100;
--adx-lime-rgb: 163,230,53;
--adx-gold-rgb: 232,179,57;
--adx-pink-rgb: 232,121,168;
--adx-orchid-rgb: 214,122,184;
--adx-pink2-rgb: 255,158,207;
--adx-aqua-rgb: 127,216,216;
--adx-sand-rgb: 240,210,100;
--adx-lilac-rgb: 201,168,255;
--adx-slot-accent-rgb: 201,100,66; /* image-slot editor accent */
--adx-band-rgb: 126,147,184; /* noise-band envelope fill/label (slate-blue) */
}
/* ============================================================================
THEME: Elite Sport UAE — light professional
----------------------------------------------------------------------------
Paper-white / light-grey surfaces; charcoal #393C40 ink hierarchy; brand
red #FF0000 and green #088F08 as the accent pair (they take over the amber
and purple ROLES respectively). Chart series darkened to stay legible on
white; light-appropriate shadows and shell gradient. All body/label text is
kept at AA contrast on its background. Print tokens (--adx-print-*) are NOT
overridden here — exports always use the dedicated brand print palette
white; all other tokens are overridden below so nothing falls through to a
dark value.
DELIBERATELY SHARED with :root (not overridden here, on purpose):
• radii --adx-r-sm / -r / -r-md / -r-lg / -r-xl (not colours)
• white --adx-white (#fff) (white in every theme)
• print --adx-print-bg / -ink / -g1..g4 / -axis / -grid /
-grid-strong / -accent / -halo / -series-1..5 (one brand print
palette; exports stay theme-independent)
Every other :root colour token IS overridden below.
============================================================================ */
[data-theme="esuae"] {
/* Backgrounds */
--adx-bg: #eceef1;
--adx-bg-0: #f2f4f6;
--adx-bg-1: #f8f9fb;
--adx-surface: #ffffff;
--adx-surface-2: #fafbfc;
--adx-surface-3: #f1f3f5;
--adx-elevated: #ffffff;
--adx-inset: #eef1f3;
/* Borders / hairlines */
--adx-hairline: #e4e7ea;
--adx-border-mute: #dde1e5;
--adx-border: #d4d9de;
--adx-border-2: #cdd3d9;
--adx-border-strong: #b7bfc7;
/* Text hierarchy — charcoal-derived, all AA on white/light-grey */
--adx-text-bright: #1c1e21;
--adx-text-hi: #2a2e33;
--adx-text: #31363d;
--adx-text-2: #40454c;
--adx-text-muted: #4a515b;
--adx-text-mid: #4f5762;
--adx-text-dim: #545c67;
--adx-text-dimmer: #565e6a;
--adx-text-faint: #6b727c;
--adx-text-faintest: #9aa1aa;
/* Accent: purple ROLE → brand green #088F08 */
--adx-purple: #0a7d0a;
--adx-purple-bright: #0b800b;
--adx-purple-soft: #2a7d2a;
--adx-purple-tint: #ffffff;
/* Accent: amber ROLE → brand red #FF0000 (text role darkened to #e00000 for AA) */
--adx-amber: #e00000;
--adx-amber-bright: #ff2020;
--adx-amber-hi: #e02020;
--adx-amber-warm: #d23a2a;
--adx-amber-dim: #c0362a;
--adx-amber-ink: #ffffff;
/* Status */
--adx-green: #0a7d0a;
--adx-green-bright: #0d820d;
--adx-green-soft: #1a861a;
--adx-green-ink: #ffffff;
--adx-warn: #9c5c0e;
--adx-error: #cc0000;
--adx-error-soft: #cc3030;
--adx-status-monitor:#c8791b;
/* App shell background gradient (subtle light) */
--adx-shell-grad-a: #f5f6f8;
--adx-shell-grad-b: #eceef1;
/* Chart series / axes — legible on white */
--adx-chart-trace: #737985;
--adx-chart-baseline: #565e6a;
--adx-chart-chronic: #b05a12;
--adx-chart-ref: #2f6fb0;
--adx-chart-ref-soft: #3a6699;
--adx-chart-grid: #e4e7ea;
--adx-chart-axis: #565d68;
/* Shadows — light-appropriate (charcoal, low alpha) */
--adx-shadow-popover: 0 16px 40px -12px rgba(57,60,64,.18);
--adx-shadow-panel: 0 24px 60px -20px rgba(57,60,64,.20);
--adx-shadow-card: 0 12px 24px -16px rgba(57,60,64,.14);
/* Extended: backgrounds */
--adx-bg-b: #eef1f3;
--adx-bg-a: #f2f4f6;
--adx-bg-c: #f0f2f4;
--adx-bg-d: #eef1f3;
--adx-bg-e: #f2f4f6;
/* Extended: surfaces → white / near-white */
--adx-surface-a: #ffffff;
--adx-surface-b: #fafbfc;
--adx-surface-c: #f7f9fa;
--adx-surface-d: #f4f6f8;
--adx-surface-e: #f4f6f8;
--adx-surface-f: #eef1f3;
--adx-surface-g: #eef1f3;
--adx-surface-h: #f2f4f6;
--adx-surface-i: #e8ebee;
--adx-surface-j: #f7f9fa;
--adx-surface-k: #f7f9fa;
/* Extended: borders → light greys */
--adx-border-a: #d4d9de;
--adx-border-b: #c8ced4;
--adx-border-c: #c2c9d0;
--adx-border-d: #c2c9d0;
--adx-border-e: #c2c9d0;
--adx-border-f: #c2c9d0;
--adx-border-g: #c2c9d0;
--adx-border-h: #dde1e5;
--adx-border-i: #dde1e5;
--adx-grid-soft: #dfe3e7;
/* Extended: slate scale → neutral mid-greys (AA where used as text) */
--adx-slate: #545c67;
--adx-slate-2: #545c67;
--adx-slate-3: #545c67;
--adx-slate-4: #545c67;
--adx-slate-blue: #4f5762;
--adx-slate-5: #545c67;
--adx-slate-6: #545c67;
--adx-slate-7: #545c67;
--adx-slate-8: #545c67;
--adx-slate-9: #545c67;
--adx-slate-10: #545c67;
--adx-slate-11: #545c67;
--adx-slate-12: #545c67;
--adx-slate-13: #4f5762;
--adx-slate-14: #545c67;
--adx-slate-15: #545c67;
--adx-slate-16: #545c67;
--adx-slate-lt: #5a6472;
--adx-slate-lt-2: #5a6472;
--adx-slate-lt-3: #545c67;
--adx-slate-lt-4: #545c67;
--adx-slate-lt-5: #545c67;
--adx-slate-lt-6: #545c67;
--adx-slate-lt-7: #545c67;
--adx-slate-lt-8: #545c67;
--adx-slate-lt-9: #545c67;
--adx-slate-lt-10: #545c67;
/* Extended: navy → light fills */
--adx-navy: #dbe2ec;
--adx-navy-deep: #eef2f6;
/* Extended: bright-text-on-dark → dark-text-on-light */
--adx-text-light: #33373c;
--adx-text-light-2: #363b45;
--adx-text-light-3: #2a2e34;
--adx-text-light-4: #23262b;
/* Extended: blues / skies */
--adx-blue: #3f6aa8;
--adx-blue-2: #3f6aa8;
--adx-sky: #1a76ad;
--adx-sky-2: #2f7ba8;
/* Extended: greens / teals — darkened for white */
--adx-green-2: #1f8a52;
--adx-green-3: #1f8a5a;
--adx-green-4: #1f8050;
--adx-green-5: #14806c;
--adx-green-6: #14856f;
--adx-green-7: #2a8f45;
--adx-green-deep: #cfe6da;
--adx-green-deep-2: #0d6b34;
--adx-green-deep-3: #1f7a4d;
--adx-green-deep-4: #1f7a4d;
--adx-green-deep-5: #0d6b34;
--adx-green-deep-6: #d2e8dc;
--adx-teal-deep: #0f766e;
--adx-teal: #10746c;
--adx-teal-bright: #12a89a;
--adx-aqua: #1f9a9a;
--adx-cyan: #2f8a90;
/* Extended: violet / lilac / orchid / pink series — darkened */
--adx-violet: #6a4fa0;
--adx-violet-2: #7a52b0;
--adx-lilac: #7d5fc0;
--adx-lilac-2: #6f5aa8;
--adx-lilac-3: #6f5aa8;
--adx-orchid: #a8408a;
--adx-pink: #b53d78;
--adx-pink-2: #c04d8a;
--adx-rose: #b0526a;
/* Extended: lime / gold / sand — darkened warm */
--adx-lime: #6f9010;
--adx-lime-2: #5f8a10;
--adx-sand: #a8801a;
--adx-gold: #a87e10;
--adx-gold-2: #8a6f1a;
/* Extended: creams → warm off-whites (light fills) */
--adx-cream: #e8dcc4;
--adx-cream-2: #33373c;
--adx-cream-3: #f2e8d6;
--adx-cream-4: #f0ede7;
--adx-cream-5: #e6e2d8;
--adx-cream-6: #33373c;
--adx-white-2: #ffffff;
/* Extended: warm accents / skins → darkened for white */
--adx-amber-lt: #c98a2a;
--adx-amber-skin: #9c5a30;
--adx-amber-skin-2: #b57050;
--adx-clay: #c06a2a;
--adx-clay-2: #b56a45;
--adx-clay-3: #b04a42;
--adx-tan: #9a7a3a;
--adx-tan-2: #7a6030;
--adx-tan-3: #a8802a;
--adx-olive: #7a7020;
--adx-orange: #d2600a;
--adx-orange-2: #b85408;
--adx-orange-3: #c05a1a;
--adx-coral: #d2542a;
--adx-rust: #9a4a15;
--adx-amber-deep: #9a6a10;
--adx-amber-deep-2: #f0e6d2;
--adx-amber-deep-3: #f2ede2;
--adx-amber-deep-4: #6b4a10;
/* Extended: reds */
--adx-red-2: #d23a2a;
--adx-red-3: #cc0000;
--adx-red-light-3: #c23a3a;
--adx-red-light: #c23434;
--adx-red-light-2: #c23434;
--adx-red-deep: #8a1a1a;
--adx-red-deep-2: #f6e2e2;
--adx-red-deep-3: #f2dede;
--adx-red-deep-4: #f2e0ea;
--adx-mauve: #9a5a5a;
--adx-mauve-2: #a06868;
/* Extended: dark ink on tier tints — stays dark ink (tiers become light) */
--adx-tier-ink-1: #3a1c08;
--adx-tier-ink-2: #2e2206;
--adx-tier-ink-3: #23300a;
--adx-shell-grad-alt: #f5f6f8;
--adx-shell-grad-alt-b: #eef1f3;
/* Channel triplets — flipped for light theme */
--adx-overlay-rgb: 57,60,64; /* darkening hover / hairline on light */
--adx-shadow-rgb: 57,60,64; /* softer charcoal shadow */
--adx-scrim-rgb: 40,43,48; /* modal backdrop dim */
--adx-amber-rgb: 224,0,0;
--adx-amber-hi-rgb: 255,59,59;
--adx-amber-deep-rgb: 154,106,16;
--adx-purple-rgb: 8,143,8;
--adx-chronic-rgb: 176,90,18;
--adx-green-rgb: 8,143,8;
--adx-green7-rgb: 42,143,69;
--adx-green5-rgb: 20,128,108;
--adx-teal-rgb: 21,143,132;
--adx-error-rgb: 204,0,0;
--adx-warn-rgb: 181,106,16;
--adx-orange-rgb: 210,96,10;
--adx-ref-rgb: 47,111,176;
--adx-sky-rgb: 31,130,190;
--adx-sky2-rgb: 63,151,200;
--adx-navy-rgb: 219,226,236;
--adx-slate-blue-rgb: 100,112,127;
--adx-slate-blue2-rgb: 100,112,127;
--adx-slate-mid-rgb: 108,116,127;
--adx-muted-rgb: 120,128,138;
--adx-dim-rgb: 106,112,122;
--adx-faint-rgb: 128,136,146;
--adx-lime-rgb: 111,144,16;
--adx-gold-rgb: 168,126,16;
--adx-pink-rgb: 181,61,120;
--adx-orchid-rgb: 168,64,138;
--adx-pink2-rgb: 192,77,138;
--adx-aqua-rgb: 31,154,154;
--adx-sand-rgb: 168,128,26;
--adx-lilac-rgb: 125,95,192;
--adx-slot-accent-rgb: 201,100,66;
--adx-band-rgb: 79,95,122;
}
/* Elite Sport UAE (light): native form controls (date pickers, dropdown arrows,
spinners) must render their built-in chrome for a LIGHT surface. Several
inputs carry an inline color-scheme:dark, so !important is required to win. */
[data-theme="esuae"] input,
[data-theme="esuae"] select,
[data-theme="esuae"] textarea { color-scheme: light !important; }
/* Bottom clearance — keeps the last cards on every page (readiness / mass-context
rows, session logs, etc.) from being trapped under a floating bottom-right
control (the editor's Edit chrome, or a device UI). Body scrolls on every page;
the strip below the content matches the page background in both themes, so it
reads as breathing room, not a seam. */
body { padding-bottom: 88px !important; }
/* ============================================================================
SHARED TYPOGRAPHY SYSTEM — theme-agnostic utility classes (colour comes from
the per-theme text tokens, so one definition lands correctly in dark + esuae).
Properties use !important so a class wins over a page's inline `font:` shorthand
without needing to strip the inline markup (font-family stays Archivo / IBM
Plex Mono either from the class or the surviving inline declaration).
- .adx-h1 page title
- .adx-h2 card / section title (steps up ~17% size + 700→800 weight)
- .adx-eyebrow small mono uppercase label — strong ink, wide tracking
.adx-eyebrow--accent brand-accent variant (keeps the amber/red pop)
- .adx-subtitle description / supporting copy — deliberately quieter
============================================================================ */
h1, .adx-h1 { font-weight: 800 !important; letter-spacing: -.02em !important; color: var(--adx-text-bright) !important; }
.adx-h2 {
font-family: 'Archivo', sans-serif;
font-size: 18px !important; font-weight: 800 !important;
letter-spacing: -.01em !important; line-height: 1.25 !important;
color: var(--adx-text-bright) !important;
}
.adx-eyebrow {
font-family: 'IBM Plex Mono', monospace !important;
font-weight: 700 !important; font-size: 10px !important;
letter-spacing: .16em !important; text-transform: uppercase !important;
color: var(--adx-text-hi) !important;
}
.adx-eyebrow--accent { color: var(--adx-amber) !important; }
.adx-subtitle {
font-family: 'Archivo', sans-serif;
font-weight: 500 !important; line-height: 1.55 !important;
color: var(--adx-text-mid) !important;
}
/* ============================================================================
ESUAE NAV BAR — the nav is a DARK charcoal surface in the light theme. Nav
elements get light-on-charcoal values by locally remapping the page text
tokens on the bar container, so they can never inherit the page's dark ink.
Dedicated --adx-nav-* tokens name the intent; popovers that open off the bar
are light cards and reset the tokens back to the esuae page palette.
Dark theme is untouched (all rules scoped to [data-theme="esuae"]).
============================================================================ */
[data-theme="esuae"] {
--adx-nav-bg: #2b2e33;
--adx-nav-rule: #ff0000;
--adx-nav-text: #d7dade;
--adx-nav-text-hover: #ffffff;
--adx-nav-active-bg: #ffffff;
--adx-nav-active-text: #2b2e33;
--adx-nav-wordmark: #ffffff;
--adx-nav-accent: #ff0000;
--adx-nav-sync-dot: #7fe3b6;
}
[data-theme="esuae"] .adx-shellnav,
[data-theme="esuae"] .adx-navstrip {
--adx-text-mid:#d7dade; --adx-text-2:#d7dade; --adx-text:#e6e8ea;
--adx-text-bright:#ffffff; --adx-text-hi:#ffffff;
--adx-text-dim:#d7dade; --adx-text-dimmer:#d7dade; --adx-text-faint:#d7dade;
--adx-purple:#ffffff; --adx-purple-tint:#2b2e33; --adx-purple-rgb:255,255,255;
--adx-amber:#ff0000; --adx-amber-rgb:255,0,0;
--adx-green:#7fe3b6; --adx-green-rgb:127,227,182;
--adx-surface-3:#ffffff; --adx-border-strong:transparent;
--adx-overlay-rgb:255,255,255;
--adx-hairline:rgba(255,255,255,.16);
--adx-elevated:#ffffff;
}
[data-theme="esuae"] .adx-shellnav {
background:#2b2e33 !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
border-bottom:2px solid var(--adx-nav-rule) !important;
box-shadow:0 2px 12px -2px rgba(0,0,0,.28) !important;
}
[data-theme="esuae"] .adx-navstrip {
background:#2b2e33 !important;
border:1px solid rgba(255,255,255,.12) !important;
box-shadow:0 2px 12px -4px rgba(0,0,0,.32) !important;
}
/* active tab / suite / strip pills → solid white, charcoal ink, heavier */
[data-theme="esuae"] .adx-shellnav .adx-tab-active,
[data-theme="esuae"] .adx-shellnav .adx-navsuite-active,
[data-theme="esuae"] .adx-navstrip .adx-nav-item-active {
background:#ffffff !important; background-image:none !important;
color:#2b2e33 !important; font-weight:800 !important;
border-color:transparent !important; box-shadow:none !important;
}
/* org logo chip — full-colour logo on its own white rounded chip */
[data-theme="esuae"] .adx-nav-logochip {
background:#ffffff !important; border-radius:9px !important;
padding:4px 7px !important; display:flex !important; align-items:center !important;
box-shadow:0 2px 6px -1px rgba(0,0,0,.35) !important;
border:none !important; margin-left:2px !important;
}
[data-theme="esuae"] .adx-nav-logochip img { filter:none !important; border:none !important; padding:0 !important; margin:0 !important; display:block !important; }
/* popovers reset to the esuae light-card palette */
[data-theme="esuae"] .adx-navpop {
--adx-text-mid:#4f5762; --adx-text-2:#40454c; --adx-text:#31363d;
--adx-text-bright:#1c1e21; --adx-text-hi:#2a2e33;
--adx-text-dim:#545c67; --adx-text-dimmer:#565e6a; --adx-text-faint:#6b727c;
--adx-purple:#088f08; --adx-purple-tint:#ffffff; --adx-purple-rgb:8,143,8;
--adx-amber:#e00000; --adx-amber-rgb:224,0,0;
--adx-green:#0a7d0a; --adx-green-rgb:10,125,10;
--adx-surface-3:#f1f3f5; --adx-border-strong:#b7bfc7;
--adx-overlay-rgb:57,60,64; --adx-hairline:#e4e7ea; --adx-elevated:#ffffff;
}