/* ==========================================================================
   GHE OS - design tokens
   Every colour below is either from the brand spec or was computed and
   validated (OKLCH lightness band, chroma floor, CVD ΔE, WCAG contrast)
   against the real chart surface #161616. See docs/DESIGN-TOKENS.md.
   ========================================================================== */

:root {
  /* ---- brand surfaces (from spec) ------------------------------------- */
  --bg:              #090909;   /* app background */
  --surface:         #161616;   /* cards - the chart surface */
  --surface-2:       #111111;   /* secondary / sunken panels */
  --surface-3:       #1c1c1c;   /* raised: menus, popovers, hover rows */
  --surface-4:       #232323;   /* highest: modal, tooltip */
  --border:          rgba(255, 255, 255, .06);   /* from spec */
  --border-strong:   rgba(255, 255, 255, .12);
  --border-faint:    rgba(255, 255, 255, .035);

  /* ---- brand accent ---------------------------------------------------
     #49D425 measures 9.24:1 on --surface and 10.17:1 on --bg.
     Near-black on it is 10.05:1, so accent buttons take dark labels.
     Its OKLCH L is 0.765 - OUTSIDE the dark series band (0.48 - 0.67) - so it
     is UI chrome only and is never used as a chart series colour.          */
  --primary:         #49D425;
  --primary-hover:   #57e332;
  --primary-press:   #3EB01E;
  --primary-ink:     #0b1908;   /* label on a primary fill - 10.05:1 */
  --primary-soft:    rgba(73, 212, 37, .12);
  --primary-softer:  rgba(73, 212, 37, .06);
  --primary-ring:    rgba(73, 212, 37, .38);

  /* ---- ink (measured against --surface) ------------------------------- */
  --text:            #EDEDEB;   /* 15.44:1 */
  --text-2:          #C9C9C4;   /* 10.89:1 */
  --text-muted:      #8B8B86;   /*  5.29:1 */
  --text-faint:      #6F6F6A;   /*  3.58:1 - large/decorative only */
  --text-on-accent:  var(--primary-ink);

  /* ---- status (fixed scale, never themed, always icon + label) --------
     Contrast on --surface: 5.39 / 9.86 / 6.86 / 3.77 - all clear 3:1.      */
  --good:            #0ca30c;
  --warning:         #fab219;
  --serious:         #ec835a;
  --critical:        #d03b3b;
  --good-soft:       rgba(12, 163, 12, .14);
  --warning-soft:    rgba(250, 178, 25, .14);
  --serious-soft:    rgba(236, 131, 90, .14);
  --critical-soft:   rgba(208, 59, 59, .14);
  --info:            #3987e5;
  --info-soft:       rgba(57, 135, 229, .14);

  /* ---- categorical chart series - FIXED ORDER, never cycled -----------
     Validated on --surface #161616, dark mode, adjacent pairlist:
       lightness band PASS · chroma floor PASS · contrast PASS (all ≥3:1)
       CVD ΔE 8.4 PASS (target ≥8) · normal-vision ΔE 19.3 PASS (floor ≥15)
     A 9th series is never generated - fold it into "Other" or facet.       */
  --series-1:        #3EB01E;   /* green  (brand family, band-corrected) */
  --series-2:        #3987e5;   /* blue */
  --series-3:        #d95926;   /* orange */
  --series-4:        #199e70;   /* aqua */
  --series-5:        #c98500;   /* yellow */
  --series-6:        #d55181;   /* magenta */
  --series-7:        #9085e9;   /* violet */
  --series-8:        #e66767;   /* red */

  /* All-pairs forms (scatter, bubble, map, small multiples) cap at THREE
     series - no ordering of the eight clears the all-pairs floors.
     These three measure CVD ΔE 11.0 / normal ΔE 26.5.                      */
  --scatter-1:       #3EB01E;
  --scatter-2:       #3987e5;
  --scatter-3:       #d55181;

  /* ---- sequential / ordinal ramp - one hue (brand green, 140.4°) -------
     Monotone L, min ΔL 0.069 (≥0.06), hue spread 7.3° (≤40°),
     dark end 2.46:1 (≥2:1 floor). Use light→dark for magnitude.            */
  --ramp-100:        #c3f9c3;
  --ramp-200:        #9ce799;
  --ramp-300:        #72d578;
  --ramp-400:        #54c051;
  --ramp-500:        #4ba824;
  --ramp-600:        #3f9015;
  --ramp-700:        #157b27;
  --ramp-800:        #1e6315;

  /* ---- diverging: blue ↔ red with a NEUTRAL GRAY midpoint ------------- */
  --div-neg-2:       #1c5cab;
  --div-neg-1:       #3987e5;
  --div-mid:         #2c2c2a;
  --div-pos-1:       #e66767;
  --div-pos-2:       #d03b3b;

  /* ---- chart chrome ---------------------------------------------------- */
  --grid:            #2c2c2a;
  --axis:            #383835;
  --tick:            #8B8B86;

  /* ---- spacing - strict 8px grid (half-steps for dense UI only) -------- */
  --s0:  0;
  --s05: 4px;
  --s1:  8px;
  --s2:  16px;
  --s3:  24px;
  --s4:  32px;
  --s5:  40px;
  --s6:  48px;
  --s7:  64px;
  --s8:  80px;
  --s9:  96px;
  --s10: 128px;

  /* ---- radii ----------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ---- soft shadows (layered, low-alpha for a near-black ground) ------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.30);
  --shadow-3: 0 4px 8px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.44);
  --shadow-4: 0 8px 16px rgba(0,0,0,.44), 0 32px 72px rgba(0,0,0,.56);
  --glow-primary: 0 0 0 1px var(--primary-ring), 0 8px 28px rgba(73,212,37,.18);

  /* ---- glassmorphism --------------------------------------------------- */
  --glass-bg:     rgba(22, 22, 22, .72);
  --glass-bg-2:   rgba(14, 14, 14, .78);
  --glass-blur:   blur(20px) saturate(140%);
  --glass-border: rgba(255, 255, 255, .08);

  /* ---- motion - 250ms per spec ---------------------------------------- */
  --dur:      250ms;
  --dur-fast: 140ms;
  --dur-slow: 400ms;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- layout metrics -------------------------------------------------- */
  --sidebar-w:          252px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:           60px;
  --context-w:          336px;
  --content-max:        1720px;

  /* ---- z-index scale --------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-topbar:   200;
  --z-dropdown: 300;
  --z-drawer:   400;
  --z-modal:    500;
  --z-palette:  600;
  --z-toast:    700;

  /* ---- typography ------------------------------------------------------ */
  --font: "Inter", "Inter var", "Segoe UI Variable Text", "Segoe UI",
          system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-base:14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 23px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --fs-hero:44px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --track-tight: -0.015em;
  --track-wide:   0.06em;
}

/* Inter if the user drops the woff2 files into assets/fonts/, otherwise the
   fallback stack above (Segoe UI Variable Text on Windows 11 is very close).
   local() first so an OS-installed Inter is used without any download.      */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), local("Inter var"), local("Inter Variable"),
       url("../assets/fonts/Inter-Variable.woff2") format("woff2");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-fast: 1ms;
    --dur-slow: 1ms;
  }
}