/* MaxBooster design system — semantic token layer, dual theme (dark default).
   Brand accent = blue ONLY. Green/amber/red are status semantics, never decoration.
   All colors flow through tokens; physical box properties use logical equivalents (RTL-ready). */

/* ── Self-hosted fonts (no Google CDN — zero third-party requests, works where fonts.gstatic is blocked).
   Each family is a single variable woff2 covering its weight range; Cairo is split latin/arabic by
   unicode-range so the (larger) arabic file only loads for Arabic text. font-display:swap everywhere. */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/space-grotesk.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/manrope.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/jetbrains-mono.woff2') format('woff2'); }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family:'Cairo'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC; }

/* Metric-matched fallback faces — local system fonts scaled to the web-font metrics so the swap
   (font-display:swap) causes minimal layout shift. Sit between the web font and the generic fallback. */
@font-face { font-family:'Space Grotesk Fallback'; src:local('Segoe UI'),local('Arial'); ascent-override:95%; descent-override:24%; line-gap-override:0%; size-adjust:101%; }
@font-face { font-family:'Manrope Fallback'; src:local('Segoe UI'),local('Arial'); ascent-override:98.9%; descent-override:27.5%; line-gap-override:0%; size-adjust:100.6%; }

:root {
  /* Brand primitives — identical in both themes */
  --brand-blue: #087EFC;
  --brand-navy: #023E8A;

  /* Type / spacing / radii / motion — theme-independent */
  /* Latin first; "Cairo" is the Arabic fallback — the browser picks it per-glyph for Arabic script, so Latin
     stays Manrope/Space Grotesk and Arabic renders in Cairo (works in mixed Latin/Arabic text, both directions). */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", "Cairo", system-ui, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", "Cairo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cairo", ui-monospace, monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-1h:6px; --sp-2h:10px; --sp-3h:14px; /* intentional half-steps (between adjacent sp-N) — named, not new values */
  --r-0:4px; --r-1:8px; --r-2:12px; --r-3:18px; --r-pill:999px;

  /* Type scale — one ladder; hero metric role = --text-3xl. */
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px;
  --text-md:15px; --text-lg:17px; --text-xl:20px;
  --text-2xl:24px; --text-3xl:30px; --text-4xl:36px;
  --tracking-label: .12em;   /* one tracking for every uppercase eyebrow label */

  --ring: 0 0 0 3px var(--focus-ring);

  /* Elevation ladder — theme --shadow-color resolves at the use site */
  --elev-1: 0 1px 2px var(--shadow-color);
  --elev-2: 0 8px 24px -12px var(--shadow-color);
  --elev-3: 0 24px 60px -24px var(--shadow-color);

  /* Motion */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* z-index ladder (sticky chrome < popovers < modal < nav backdrop < drawer < toast) */
  --z-sticky: 10; --z-dropdown: 30; --z-modal: 60; --z-backdrop: 65; --z-drawer: 70; --z-toast: 80;
}

/* RTL — Cairo leads display/body. Body/nav sizes match LTR; only large display sizes are trimmed
   by 1–2px to compensate for Cairo's slightly taller cap-height at headline scale. */
[dir="rtl"] {
  --font-display: "Cairo", system-ui, sans-serif;
  --font-body:    "Cairo", system-ui, sans-serif;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   19px;
  --text-2xl:  23px;
  --text-3xl:  28px;
}

/* ── Dark theme (default) ─────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;   /* native controls (date/time text + calendar popup) render dark */
  /* ── Afterburn cockpit palette (dark) — EXACT artifact values (blue-flame world) ── */
  --bg-app: #04070F;         /* artifact --bg */
  --bg-surface: #0A101F;     /* artifact --panel */
  --bg-surface-2: #101A30;   /* artifact --panel-2 */
  --bg-surface-3: #18243E;   /* hover/nesting step above panel-2 */
  --border-subtle: rgba(111,193,255,0.11);   /* artifact --line */
  --border-strong: rgba(111,193,255,0.22);   /* artifact --line-strong */
  --text-primary: #EAF2FF;   /* artifact --text */
  --text-secondary: #93A7C9; /* artifact --dim */
  --text-tertiary: #6E80A6;  /* artifact --faint, nudged for AA on the near-black bg */
  --accent: #087EFC;         /* artifact --blue */
  --accent-hover: #6FC1FF;   /* artifact --blue-hi */
  --accent-solid: #0A6FE0;   /* darker fill for white-text surfaces — white-on-this = 4.82:1 (AA) */
  --accent-ink: #6FC1FF;     /* accent-coloured TEXT on a wash — artifact --blue-hi */
  --text-on-accent: #FFFFFF;
  --status-live: #30D97F;    /* artifact --live */
  --status-warn: #F0B03C;    /* artifact --warn */
  --status-failed: #F2594E;  /* artifact --fail */
  --status-idle: #5F7096;    /* artifact --faint */
  --focus-ring: rgba(8,126,252,0.6);   /* artifact --blue-glow */
  --logo-arrow: #087EFC;
  --logo-rocket: #FFFFFF;
  --logo-wordmark-strong: #FFFFFF;
  --avatar-ring: rgba(255,255,255,0.12); /* inset highlight on the user avatar — identical in both themes */

  /* derived translucents (theme-tuned) */
  --accent-wash: rgba(8,126,252,0.14);
  --accent-wash-strong: rgba(8,126,252,0.20);
  --accent-border: rgba(8,126,252,0.40);
  --status-live-wash: rgba(47,190,122,0.12);
  --status-live-border: rgba(47,190,122,0.40);
  --status-warn-wash: rgba(224,160,42,0.10);
  --status-warn-border: rgba(224,160,42,0.45);
  --status-failed-wash: rgba(229,86,75,0.12);
  --status-failed-border: rgba(229,86,75,0.45);
  --status-warn-strong: #FF8A3D;
  --status-failed-strong: #B3122B;

  --shadow-color: rgba(0,6,24,0.9);   /* artifact --shadow depth */
  --overlay: rgba(2,6,16,0.7);        /* artifact --overlay */
  --app-glow-hero: rgba(8,126,252,0.10); /* the pool behind the page head — the canvas reads lit, not painted */
  --app-glow-1: rgba(8,126,252,0.12);
  --app-glow-2: rgba(8,126,252,0.06);

  /* Colorization — gradient backgrounds + vivid fills (artifact cockpit) */
  --sidebar-bg: linear-gradient(180deg, #060B18 0%, #04070F 44%);   /* artifact --side-grad */
  --avatar-gradient: linear-gradient(145deg, #087EFC, #023E8A);
  --metric-gradient: linear-gradient(135deg, #87CCFF 0%, #087EFC 30%, #6FC1FF 65%, #023E8A 100%);
  --nav-active-bg: linear-gradient(90deg, rgba(8,126,252,0.20), rgba(2,62,138,0.08), transparent 80%);
  --nav-active-border: #087EFC;

  /* Bootstrap bridge for any un-restyled pages */
  --bs-body-bg: var(--bg-app); --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-strong); --bs-primary: var(--accent);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover);
  --bs-emphasis-color: var(--text-primary);
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  /* ── Afterburn cockpit palette (light) — EXACT artifact values ── */
  --bg-app: #EDF3FB;         /* artifact light --bg */
  --bg-surface: #FFFFFF;     /* artifact light --panel */
  --bg-surface-2: #E4EDF9;   /* artifact light --panel-2 */
  --bg-surface-3: #D9E4F4;   /* third nesting step — hover fills */
  --border-subtle: rgba(2,62,138,0.12);   /* artifact light --line */
  --border-strong: rgba(2,62,138,0.24);   /* artifact light --line-strong */
  --text-primary: #0C1F3E;   /* artifact light --text */
  --text-secondary: #40598A; /* artifact light --dim */
  --text-tertiary: #5C7099;  /* artifact light --faint */
  --accent: #087EFC;
  --accent-hover: #0A6FE0;   /* artifact light --blue-hi */
  --accent-solid: #0A6FE0;   /* darker fill for white-text surfaces — white-on-this = 4.82:1 (AA) */
  --accent-ink: #0A5BC4;     /* accent-coloured TEXT on a wash (cobalt chips/notes) — AA on light wash */
  --text-on-accent: #FFFFFF;
  /* status colours are darker in light mode so chip/note TEXT on the tint clears AA (4.5:1);
     fills (dots, bars, big numbers) only gain legibility on white. */
  --status-live: #0E8A4C;    /* artifact light --live */
  --status-warn: #955F00;    /* artifact light --warn */
  --status-failed: #C22B24;  /* artifact light --fail */
  --status-idle: #5C7099;
  --focus-ring: rgba(8,126,252,0.35);
  --logo-arrow: #023E8A;
  --logo-rocket: #087EFC;
  --logo-wordmark-strong: #023E8A;
  --avatar-ring: rgba(255,255,255,0.12); /* inset highlight on the user avatar — identical in both themes */

  --accent-wash: rgba(8,126,252,0.10);
  --accent-wash-strong: rgba(8,126,252,0.16);
  --accent-border: rgba(8,126,252,0.35);
  --status-live-wash: rgba(46,158,107,0.12);
  --status-live-border: rgba(46,158,107,0.38);
  --status-warn-wash: rgba(181,121,15,0.10);
  --status-warn-border: rgba(181,121,15,0.38);
  --status-failed-wash: rgba(214,69,69,0.10);
  --status-failed-border: rgba(214,69,69,0.38);
  --status-warn-strong: #E0712A;
  --status-failed-strong: #A01020;

  --shadow-color: rgba(15,40,90,0.22);   /* artifact light --shadow */
  --overlay: rgba(14,34,66,0.42);         /* artifact light --overlay */
  --app-glow-hero: rgba(8,126,252,0.05); /* light mirror of the hero pool — a soft cool wash, not a spotlight */
  --app-glow-1: rgba(8,126,252,0.06);
  --app-glow-2: rgba(8,126,252,0.03);

  /* Colorization — light-theme equivalents (artifact cockpit) */
  --sidebar-bg: linear-gradient(180deg, #DFEAFA 0%, #EDF3FB 44%);   /* artifact light --side-grad */
  --avatar-gradient: linear-gradient(145deg, #087EFC, #023E8A);
  --metric-gradient: linear-gradient(135deg, #0A6FE0 0%, #023E8A 30%, #087EFC 65%, #0A6FE0 100%);
  --nav-active-bg: linear-gradient(to right, rgba(8,126,252,0.16), rgba(2,62,138,0.06), transparent 80%);
  --nav-active-border: #0A6FE0;
}