/* ==========================================================================
   Design tokens — the single source of colour and type for the console.
   Referenced by role, never by hue. Nothing in the app hard-codes a colour.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- chrome: institutional teal-slate, clinical surfaces ---------------- */
  --surface-page:   #f4f6f7;
  --surface-1:      #ffffff;
  --surface-2:      #eef2f3;
  --brand-deep:     #0e3b45;
  --brand:          #0f6e73;
  --brand-soft:     #d7e8e9;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --rule:           #e1e0d9;
  --axis:           #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);

  --on-brand:       #ffffff;
  --surface-sunken: #e7ebec;

  /* -- status: fixed and reserved. Never reused as a series colour. ------
     On this light surface `warning` and `serious` fall below 3:1 by design;
     every status ships colour + icon + text label, so colour never carries
     the meaning alone. */
  --status-good:    #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical:#d03b3b;

  --status-good-soft:     #e6f5e6;
  --status-warning-soft:  #fdf3dd;
  --status-serious-soft:  #fceee7;
  --status-critical-soft: #f8e4e4;

  /* -- categorical series (charts only). Fixed order, never cycled.
     Validated for colour-vision-deficiency separation and lightness banding
     against a white surface. Do not reorder or substitute. Slots 3, 4 and 5
     sit below 3:1 on white — direct-label wherever they appear. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  /* -- sequential ramp, single hue, light to dark, for magnitude --------- */
  --seq-1: #86b6ef;
  --seq-2: #6da7ec;
  --seq-3: #5598e7;
  --seq-4: #3987e5;
  --seq-5: #2a78d6;
  --seq-6: #256abf;
  --seq-7: #1c5cab;
  --seq-8: #184f95;

  /* -- type ------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-body: 13px;
  --text-small: 12px;
  --text-micro: 11px;
  --text-kpi: 26px;
  --row-height: 34px;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --page-pad: 22px;

  /* -- motion -------------------------------------------------------------
     One duration, one curve, used everywhere something changes state. Fast
     enough not to feel laggy on a dense table, slow enough to read as eased
     rather than instant. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 130ms;
  --dur-slow: 180ms;

  /* -- elevation ------------------------------------------------------------
     A whisper on resting cards, a real lift on anything that floats above the
     page (menus, the bell panel, an open disclosure). Redeclared per theme
     below — a shadow tuned for a white surface reads as a smudge on a dark
     one. */
  --shadow-card:  0 1px 2px rgba(11, 11, 11, 0.05), 0 1px 1px rgba(11, 11, 11, 0.03);
  --shadow-hover: 0 4px 10px rgba(11, 11, 11, 0.08), 0 1px 3px rgba(11, 11, 11, 0.06);
  --shadow-pop:   0 12px 28px rgba(11, 11, 11, 0.14), 0 3px 8px rgba(11, 11, 11, 0.08);
  --focus-ring:   0 0 0 3px rgba(15, 110, 115, 0.30);
}

/* Dark is a selected set, not an automatic inversion. Declared twice so the
   toggle wins in both directions and the system default still works. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page:   #0d0d0d;
    --surface-1:      #14201f;
    --surface-2:      #1b2a29;
    --surface-sunken: #101a19;
    --brand-deep:     #0a2b32;
    --brand:          #2f9aa0;
    --brand-soft:     #17383a;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #8d8c84;
    --rule:           #2a3736;
    --axis:           #46524f;
    --border:         rgba(255, 255, 255, 0.14);
    --on-brand:       #04191c;

    --status-good:    #35c035;
    --status-warning: #ffc44d;
    --status-serious: #f59b76;
    --status-critical:#e75f5f;

    --status-good-soft:     #123018;
    --status-warning-soft:  #33280c;
    --status-serious-soft:  #3a2318;
    --status-critical-soft: #3a1a1a;

    --series-1: #6aa6e8;
    --series-2: #f2895c;
    --series-3: #3cc794;
    --series-4: #f5bb3d;
    --series-5: #f09cbc;
    --series-6: #35a835;
    --series-7: #8074cf;
    --series-8: #ec7070;

    --seq-1: #1c3f66;
    --seq-2: #234f81;
    --seq-3: #2b609c;
    --seq-4: #3572b8;
    --seq-5: #4485cd;
    --seq-6: #5f9adb;
    --seq-7: #7fafe5;
    --seq-8: #a3c6ee;

    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-pop:   0 16px 36px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.36);
    --focus-ring:   0 0 0 3px rgba(47, 154, 160, 0.38);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page:   #0d0d0d;
  --surface-1:      #14201f;
  --surface-2:      #1b2a29;
  --surface-sunken: #101a19;
  --brand-deep:     #0a2b32;
  --brand:          #2f9aa0;
  --brand-soft:     #17383a;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #8d8c84;
  --rule:           #2a3736;
  --axis:           #46524f;
  --border:         rgba(255, 255, 255, 0.14);
  --on-brand:       #04191c;

  --status-good:    #35c035;
  --status-warning: #ffc44d;
  --status-serious: #f59b76;
  --status-critical:#e75f5f;

  --status-good-soft:     #123018;
  --status-warning-soft:  #33280c;
  --status-serious-soft:  #3a2318;
  --status-critical-soft: #3a1a1a;

  --series-1: #6aa6e8;
  --series-2: #f2895c;
  --series-3: #3cc794;
  --series-4: #f5bb3d;
  --series-5: #f09cbc;
  --series-6: #35a835;
  --series-7: #8074cf;
  --series-8: #ec7070;

  --seq-1: #1c3f66;
  --seq-2: #234f81;
  --seq-3: #2b609c;
  --seq-4: #3572b8;
  --seq-5: #4485cd;
  --seq-6: #5f9adb;
  --seq-7: #7fafe5;
  --seq-8: #a3c6ee;

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-pop:   0 16px 36px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.36);
  --focus-ring:   0 0 0 3px rgba(47, 154, 160, 0.38);
}