/* =========================================================================
   DESIGN TOKENS — the single brand swap point.
   Colours below are the validated default data-viz palette rendered on a
   dark surface. Every categorical/status value has been run through the
   palette validator against surface #1a1a19:
     3-slot categorical  all-pairs  worst CVD dE 9.4 / normal dE 20.9  PASS
     status palette      all four clear 3:1 on the dark surface
   If EVERSANA brand hues are substituted, re-run the validator before
   shipping — the slot ORDER is the colourblind-safety mechanism, not decor.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- surfaces & ink ---------------------------------------------------- */
  --page:            #0d0d0d;
  --surface-1:       #1a1a19;   /* card / chart surface */
  --surface-2:       #232322;   /* raised inside a card */
  --surface-3:       #2c2c2a;   /* hover / track */
  --text-primary:    #ffffff;
  --text-secondary:  #c3c2b7;
  --text-muted:      #898781;
  --gridline:        #2c2c2a;
  --baseline:        #383835;
  --hairline:        rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* --- categorical slots (dark steps) ------------------------------------
     Use in fixed order. Never cycle, never generate a 9th.               */
  --series-1: #3987e5;  /* blue    */
  --series-2: #d95926;  /* orange  */
  --series-3: #199e70;  /* aqua    */
  --series-4: #c98500;  /* yellow  */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #9085e9;  /* violet  */
  --series-8: #e66767;  /* red     */

  /* de-emphasis: the "context" grey for emphasis charts */
  --series-mute: #4a4a47;

  /* --- sequential ramp (single hue, blue) --------------------------------
     On a dark surface magnitude runs dark -> light.                       */
  --seq-100: #cde2fb;
  --seq-200: #9ec5f4;
  --seq-300: #6da7ec;
  --seq-400: #3987e5;
  --seq-500: #256abf;
  --seq-600: #184f95;
  --seq-700: #0d366b;

  /* --- status (reserved — never used as a series colour) ------------------
     Always shipped with an icon + label, never colour alone.              */
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
  --status-good-wash:     rgba(12, 163, 12, 0.14);
  --status-warning-wash:  rgba(250, 178, 25, 0.14);
  --status-serious-wash:  rgba(236, 131, 90, 0.14);
  --status-critical-wash: rgba(208, 59, 59, 0.14);

  /* --- accent (UI, not data) --------------------------------------------- */
  --accent:       #3987e5;
  --accent-hover: #5598e7;
  --accent-wash:  rgba(57, 135, 229, 0.12);
  --accent-ring:  rgba(57, 135, 229, 0.40);

  /* --- type -------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --fs-hero:   clamp(2.6rem, 6.2vw, 5.1rem);
  --fs-h2:     clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:     clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lede:   clamp(1.02rem, 1.35vw, 1.24rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.78rem;
  --fs-figure: clamp(3.2rem, 7vw, 5rem);   /* hero figure — >=48px */

  /* --- space & shape ----------------------------------------------------- */
  --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-9: 96px; --sp-10: 140px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55);

  --maxw: 1180px;
  --maxw-text: 68ch;

  /* --- motion ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 640ms;
}

/* Honour the OS reduced-motion setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}