/* ========================================================================
   variables.css — design tokens
   Single source of truth for colour, type, spacing, radius, motion.
   ======================================================================== */

:root {
  /* ======================================================================
     THEME: dark (default). Light overrides live in [data-theme="light"].
     Only theme-dependent tokens are themed; type/space/radius/motion are
     shared below and never duplicated.
     Palette: white/grey/black ramp + purple accent. Green = status chrome
     only; red (--danger) = incidents/alerts only.
     ====================================================================== */
  color-scheme: dark;

  /* ---- Surfaces (cool near-black) ---- */
  --bg: #0E0F1A;
  --bg-elevated: #131524;
  --surface: #161722;
  --surface-2: #1C1E2B;
  --surface-3: #242636;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Brand / status ---- */
  --primary: #A78BFA;
  --primary-600: #8B6FE8;
  --primary-soft: rgba(167, 139, 250, 0.14);
  --success: #5CCB7F;
  --success-soft: rgba(92, 203, 127, 0.14);
  --warning: #FF595E;
  --warning-soft: rgba(255, 89, 94, 0.14);
  --danger: #FF595E;
  --danger-soft: rgba(255, 89, 94, 0.16);

  /* ---- Badge text (foreground on the matching *-soft tint) ----
     Tuned to clear WCAG AA 4.5:1 for small mono labels on every surface the
     tint can composite over (bg, surface, surface-2, surface-3). Dark theme
     lightens the weaker reds/purple; light theme darkens them
     (see [data-theme="light"]). */
  --badge-primary: #B9A3FF;
  --badge-success: var(--success);
  --badge-warning: #FF8084;
  --badge-danger: #FF8084;

  /* ---- Text ---- */
  --text: #E5E7EB;
  --text-muted: #9CA3AF;
  --text-dim: #8A93A6;

  /* ---- Theme-dependent shell tokens (promoted from hardcoded literals) ---- */
  --shell-bg: rgba(14, 15, 26, 0.72);     /* sticky topbar / navbar backdrop */
  --shell-bg-solid: rgba(14, 15, 26, 0.96); /* mobile menu */
  --hover: rgba(255, 255, 255, 0.05);     /* row/link hover */
  --raised: rgba(255, 255, 255, 0.07);    /* card raised/hover */
  --bg-gradient-top: #0A0B14;             /* body gradient top stop */
  --scrollbar-hover: #2E3145;
  --overlay: rgba(0, 0, 0, 0.6);          /* scrim + drawer backdrop */
  --on-accent: #0E0F1A;                   /* ink on the purple accent */

  /* ---- Typography ---- */
  --font-heading: "Geist", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.6rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 3.4vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2rem);
  --fs-h3: 1.2rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.5rem;   /*  8 */
  --sp-2: 1rem;     /* 16 */
  --sp-3: 1.5rem;   /* 24 */
  --sp-4: 2rem;     /* 32 */
  --sp-5: 2.5rem;   /* 40 */
  --sp-6: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-10: 5rem;    /* 80 */
  --sp-12: 6rem;    /* 96 */

  /* ---- Radius ---- */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --nav-h: 64px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ========================================================================
   THEME: light — overrides only the theme-dependent tokens.
   White/grey/black ramp; purple darkened for contrast on white; green/red
   darkened for status legibility. Borders flip to black-alpha; hover/raise
   darken instead of lighten; shadows soften.
   ======================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-elevated: #F7F7F9;
  --surface: #FFFFFF;
  --surface-2: #F2F2F5;
  --surface-3: #E8E8EC;
  --border: rgba(17, 17, 20, 0.10);
  --border-strong: rgba(17, 17, 20, 0.18);

  /* Brand / status */
  --primary: #7C3AED;
  --primary-600: #6D28D9;
  --primary-soft: rgba(124, 58, 237, 0.10);
  --success: #15935A;
  --success-soft: rgba(21, 147, 90, 0.10);
  --warning: #DC2626;
  --warning-soft: rgba(220, 38, 38, 0.10);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.10);

  /* Badge text — darkened so small mono labels clear 4.5:1 on the *-soft tint */
  --badge-primary: #6D28D9;
  --badge-success: #0C6B40;
  --badge-warning: #B01B1B;
  --badge-danger: #B01B1B;

  /* Text */
  --text: #16161C;
  --text-muted: #52525B;
  --text-dim: #62626B;

  /* Shell tokens */
  --shell-bg: rgba(255, 255, 255, 0.72);
  --shell-bg-solid: rgba(255, 255, 255, 0.96);
  --hover: rgba(17, 17, 20, 0.04);
  --raised: rgba(17, 17, 20, 0.05);
  --bg-gradient-top: #FAFAFB;
  --scrollbar-hover: #C8C8CF;
  --overlay: rgba(0, 0, 0, 0.45);
  --on-accent: #FFFFFF;

  /* Elevation — softer, greyer on light */
  --shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 20, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 17, 20, 0.14);
}