/* autolike — design tokens (Addendum C1). Dark "operator console" theme, the only theme.
 * No external fonts, no CDN. Everything downstream (components.css, page scripts) reads these.
 *
 * WCAG contrast ratios (computed with the sRGB relative-luminance formula, WCAG 2.x):
 *   pair                          bg #0a0d12  surface #0f141b  surface-2 #141b24  surface-3 #1a222d
 *   --text       #d9e2ec          14.86       14.12            13.23              12.24        AAA
 *   --text-muted #8a9bb0           6.85        6.51             6.10               5.64        AA (normal text)
 *   --text-faint #5b6b7f           3.57        3.39             3.18               2.94        AA LARGE TEXT / non-text only (>= 3:1 on bg..surface-2)
 *                                   -> never used for body-size text; only for ornaments, ≥ 20px numerals, dividers.
 *   --acc        #3dff9a          14.80       14.05            13.18              12.18        AAA
 *   --acc-2      #38d6ff          11.33       10.76            10.09               9.33        AAA
 *   --warn       #ffb020          10.64       10.11             9.47               8.76        AAA
 *   --danger     #ff4d6d           6.05        5.75             5.39               4.99        AA
 *   --violet     #a78bfa           7.15        6.79             6.37               5.89        AA
 *   Filled buttons use dark text (--bg) on the accent:  on --acc 14.80 · on --acc-2 11.33 · on --warn 10.64 · on --danger 6.05  (all AA)
 *   Tinted badges (12 % accent over surface): acc 10.73 · acc-2 8.56 · warn 8.12 · danger 5.06 · violet 5.73 · muted 5.50 (all AA)
 *   --text on --border-strong (#2b3a4b, e.g. kbd caps) 8.86 AAA.  Borders are non-text (1.3–1.6:1, decorative only).
 */

:root {
  /* ---- colour: surfaces ---------------------------------------------------- */
  --bg: #0a0d12;
  --surface: #0f141b;
  --surface-2: #141b24;
  --surface-3: #1a222d;
  --border: #1f2a37;
  --border-strong: #2b3a4b;

  /* ---- colour: text -------------------------------------------------------- */
  --text: #d9e2ec;
  --text-muted: #8a9bb0;
  --text-faint: #5b6b7f;

  /* ---- colour: accents ----------------------------------------------------- */
  --acc: #3dff9a;      /* neon green: primary action, success, "online" */
  --acc-2: #38d6ff;    /* cyan: links, info, focus ring */
  --warn: #ffb020;
  --danger: #ff4d6d;
  --violet: #a78bfa;   /* running / pulse */

  /* RGB triplets for rgb(var(--x-rgb) / alpha) tints */
  --acc-rgb: 61 255 154;
  --acc-2-rgb: 56 214 255;
  --warn-rgb: 255 176 32;
  --danger-rgb: 255 77 109;
  --violet-rgb: 167 139 250;
  --muted-rgb: 138 155 176;

  /* Text that sits on a filled accent (buttons, filled badges) */
  --on-acc: var(--bg);

  /* ---- glow / shadow ------------------------------------------------------- */
  --glow-acc: 0 0 0 1px rgb(61 255 154 / .35), 0 0 24px rgb(61 255 154 / .12);
  --glow-acc-2: 0 0 0 1px rgb(56 214 255 / .35), 0 0 24px rgb(56 214 255 / .12);
  --glow-danger: 0 0 0 1px rgb(255 77 109 / .35), 0 0 24px rgb(255 77 109 / .12);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-md: 0 6px 20px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .4);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .4);

  /* ---- glow / gradient / glass (Addendum H — the "command center" layer) ----
   * Glows go on containers, rings and large numerals only — never on body-size text (contrast stays AA:
   * a text-shadow does not change the measured foreground/background pair). */
  --glow-acc-soft: 0 0 32px rgb(61 255 154 / .10);
  --glow-acc-2-soft: 0 0 32px rgb(56 214 255 / .10);
  --glow-violet: 0 0 0 1px rgb(167 139 250 / .35), 0 0 24px rgb(167 139 250 / .14);
  --glow-text-acc: 0 0 14px rgb(61 255 154 / .35);         /* display numerals ≥ 28px only */
  --glow-text-acc-2: 0 0 14px rgb(56 214 255 / .35);
  --glow-text-violet: 0 0 14px rgb(167 139 250 / .4);
  --glow-text-danger: 0 0 14px rgb(255 77 109 / .35);
  --grad-acc: linear-gradient(135deg, #3dff9a 0%, #38d6ff 100%);                  /* green → cyan */
  --grad-acc-h: linear-gradient(90deg, #3dff9a 0%, #38d6ff 100%);
  --grad-border: linear-gradient(135deg, rgb(61 255 154 / .55) 0%, rgb(56 214 255 / .35) 55%, rgb(167 139 250 / .25) 100%);
  --grad-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  --grad-violet: linear-gradient(135deg, #a78bfa 0%, #38d6ff 100%);
  --glass-bg: rgb(15 20 27 / .72);
  --glass-bg-strong: rgb(15 20 27 / .86);
  --glass-border: rgb(255 255 255 / .06);
  --glass-blur: 14px;
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / .05);
  --glass-shadow: 0 18px 44px rgb(0 0 0 / .42), 0 1px 2px rgb(0 0 0 / .4);
  --fx-line: rgb(61 255 154 / .07);       /* canvas grid lines 6–8 % */
  --fx-line-2: rgb(56 214 255 / .06);

  /* ---- typography ---------------------------------------------------------- */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", Consolas, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
  /* display scale (H1.3): page heroes + stat numerals; clamps so 1280-wide laptops keep 4 tiles per row */
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-display: clamp(28px, 2.6vw, 40px);
  --fs-display-lg: clamp(40px, 3.6vw, 56px);
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --tracking-caps: .08em;
  --tracking-eyebrow: .18em;

  /* ---- spacing / radius ---------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* ---- motion -------------------------------------------------------------- */
  --dur: 160ms;
  --dur-slow: 320ms;
  --dur-page: 220ms;     /* H1.5 page transition */
  --dur-count: 400ms;    /* H1.6 UI.countUp */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- layout -------------------------------------------------------------- */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --content-max: 1280px;
  --z-fx: 0;            /* #fx-bg canvas sits below everything (.app / .login-page are z 1) */
  --z-sticky: 10;
  --z-sidebar: 30;
  --z-dropdown: 40;
  --z-toast: 60;
  --z-modal: 70;

  /* ---- texture ------------------------------------------------------------- */
  --grid-line: rgb(217 226 236 / .035);
  --grid-size: 32px;
  --scanline: rgb(217 226 236 / .04);

  color-scheme: dark;
}

/* Reduced motion: all transitions/animations off (C1). ui.js mirrors the media query onto `html.is-reduced`
 * (H3/H4) so fx.js and page scripts can read one flag; both selectors carry the same rules. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
    --dur-count: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
html.is-reduced {
  --dur: 0ms;
  --dur-slow: 0ms;
  --dur-page: 0ms;
  --dur-count: 0ms;
}
html.is-reduced *, html.is-reduced *::before, html.is-reduced *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}