/* ============================================================================
   BEACON — theme tokens (light default + designed dark)
   Executive safety & wellbeing. Every color a chart needs is a CSS custom
   property here, read via APP.palette(). Light is the primary design target;
   dark is DESIGNED (near-black navy, desaturated+brightened data colors).

   PALETTE IDENTITY (distinct from other dashboards):
     LEADING indicators  -> CYAN / BLUE  (predictive, healthy signals)
     LAGGING indicators  -> CORAL        (at-risk, outcomes already happened)
     deep INK navy ground · diverging cyan<->coral · sequential cyan · 5-step severity
   ============================================================================ */

/* ---- Type imports (Inter + IBM Plex Mono for tabular figures) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Type system ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* type scale (exec-glance: a touch larger than ops-dense) */
  --fs-micro: 10.5px;
  --fs-xs:    11.5px;
  --fs-sm:    12.5px;
  --fs-base:  13.5px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   38px;
  --fs-kpi:   31px;

  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  --radius:    11px;
  --radius-sm: 7px;
  --radius-lg: 15px;

  /* z-scale (semantic) */
  --z-base: 1; --z-sticky: 100; --z-chip: 150; --z-dropdown: 300;
  --z-tooltip: 940; --z-modal: 990; --z-side: 700;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;

  /* shell metrics */
  --header-h: 68px;
  --rail-gutter: 96px;
}

/* ===========================================================================
   LIGHT THEME  (default + primary design target)
   =========================================================================== */
:root, [data-theme='light'] {
  color-scheme: light;

  /* surfaces & ink */
  --c-bg:        #F5F8FB;
  --c-bg-tint:   #ECF3F8;   /* faint section banding */
  --c-surface:   #FFFFFF;
  --c-surface-2: #F2F7FB;   /* nested wells, table header */
  --c-ink:       #0B1B2B;   /* deep ink navy — primary text */
  --c-ink-soft:  #2A415A;   /* secondary text */
  --c-muted:     #5A7286;   /* tertiary / captions */
  --c-faint:     #8DA3B6;   /* axis ticks, de-emphasis */
  --c-hairline:  #E1E8F0;   /* borders, gridlines */
  --c-hairline-2:#EDF2F7;   /* lighter gridlines */

  /* brand (cyan -> blue gradient) */
  --c-brand:     #0EA5E9;   /* primary cyan */
  --c-brand-2:   #2563EB;   /* deep blue */
  --c-brand-soft:#D6EEFB;   /* brand tint fill */

  /* LEADING signal roles (cyan/blue family — predictive, healthy) */
  --c-lead:      #0EA5E9;   /* leading primary (cyan) */
  --c-lead-2:    #2563EB;   /* leading deep (blue) */
  --c-lead-3:    #0E7490;   /* leading dark teal-cyan */
  --c-lead-soft: #D6EEFB;
  --c-lead-soft2:#E3EBFE;

  /* LAGGING signal roles (coral family — outcomes, at-risk) */
  --c-lag:       #F2685C;   /* coral primary */
  --c-lag-2:     #D8453B;   /* deep coral/red */
  --c-lag-soft:  #FBDDD9;

  /* wellbeing / training accents (kept within 6-hue budget) */
  --c-well:      #14B8A6;   /* teal — wellbeing */
  --c-well-soft: #CFF1EC;
  --c-train:     #2563EB;   /* blue — training (leading family) */

  /* semantic status (good is NOT always green; safety: good=blue/teal, bad=coral) */
  --c-good:      #0EA5E9;   /* improving = cyan (leading) */
  --c-good-soft: #D6EEFB;
  --c-warn:      #F59E0B;   /* attention amber */
  --c-warn-soft: #FCEBC8;
  --c-bad:       #F2685C;   /* deteriorating = coral */
  --c-bad-soft:  #FBDDD9;
  --c-positive:  #0E9F6E;   /* true-green only where a literal "on target" tick is wanted */
  --c-negative:  #F2685C;

  /* categorical palette (<=6 hues, colorblind-aware: cyan/blue/teal/coral/amber/violet) */
  --c-cat-0: #0EA5E9;   /* cyan */
  --c-cat-1: #2563EB;   /* blue */
  --c-cat-2: #14B8A6;   /* teal */
  --c-cat-3: #F2685C;   /* coral */
  --c-cat-4: #F59E0B;   /* amber */
  --c-cat-5: #8B5CF6;   /* violet */

  /* sequential CYAN ramp (heatmaps: low -> high intensity, single hue) */
  --c-seq-0: #EBF5FB;
  --c-seq-1: #C7E7F6;
  --c-seq-2: #93D2EF;
  --c-seq-3: #56B5E4;
  --c-seq-4: #1F95D1;
  --c-seq-5: #0B6FA8;

  /* diverging CYAN <-> CORAL ramp (vs target: lagging/bad <- neutral -> leading/good) */
  --c-div-neg2: #D8453B;   /* worst (coral-red) */
  --c-div-neg1: #F2948A;
  --c-div-mid:  #EEF1F4;   /* neutral midpoint */
  --c-div-pos1: #74C4E8;
  --c-div-pos2: #0B6FA8;   /* best (deep cyan) */

  /* severity steps (5-step: low->high risk; safety convention) */
  --c-sev0: #0EA5E9;   /* none / very low */
  --c-sev1: #14B8A6;   /* low */
  --c-sev2: #F59E0B;   /* medium */
  --c-sev3: #F2685C;   /* high */
  --c-sev4: #B91C1C;   /* critical */

  /* chart furniture */
  --c-grid:      #EAF0F6;
  --c-axis:      #BCCBD9;
  --c-axis-text: #5A7286;
  --c-target:    #5A7286;   /* target / reference lines */
  --c-context:   #C6D4E0;   /* de-emphasized "context" marks (gray workhorse) */

  /* map basemap (quiet) */
  --c-map-land:  #E6EDF3;
  --c-map-land-2:#DBE4ED;
  --c-map-water: #F1F6FA;
  --c-map-stroke:#CCD8E3;

  /* ui chrome */
  --c-chip-bg:   #E6F3FB;
  --c-chip-ink:  #0B6FA8;
  --c-chip-border:#C4E3F4;
  --c-control-bg:#FFFFFF;
  --c-control-border:#D2DEE9;
  --c-control-ink:#1B3047;
  --c-focus:     #0EA5E9;
  --c-shadow:    0 1px 2px rgba(11,27,43,.05), 0 4px 14px rgba(11,27,43,.06);
  --c-shadow-lg: 0 6px 30px rgba(11,27,43,.13);
  --c-tooltip-bg:#0B1B2B;
  --c-tooltip-ink:#EEF5FA;
}

/* ===========================================================================
   DARK THEME  (designed — near-black navy, desaturated/brightened palette)
   =========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --c-bg:        #060F18;   /* near-black navy */
  --c-bg-tint:   #0A1622;
  --c-surface:   #0D1B29;
  --c-surface-2: #122436;
  --c-ink:       #E8F0F7;
  --c-ink-soft:  #B6C8D6;
  --c-muted:     #819AAC;
  --c-faint:     #5C7488;
  --c-hairline:  #1D3243;
  --c-hairline-2:#15293A;

  --c-brand:     #38BDF8;
  --c-brand-2:   #6098F5;
  --c-brand-soft:#0E2C42;

  --c-lead:      #38BDF8;
  --c-lead-2:    #6098F5;
  --c-lead-3:    #4FC4D6;
  --c-lead-soft: #0E2C42;
  --c-lead-soft2:#14233F;

  --c-lag:       #F77F73;
  --c-lag-2:     #E8584C;
  --c-lag-soft:  #381916;

  --c-well:      #2DD4BF;
  --c-well-soft: #0C312E;
  --c-train:     #6098F5;

  --c-good:      #38BDF8;
  --c-good-soft: #0E2C42;
  --c-warn:      #F8B548;
  --c-warn-soft: #3A2C0C;
  --c-bad:       #F77F73;
  --c-bad-soft:  #381916;
  --c-positive:  #34D399;
  --c-negative:  #F77F73;

  --c-cat-0: #38BDF8;
  --c-cat-1: #6098F5;
  --c-cat-2: #2DD4BF;
  --c-cat-3: #F77F73;
  --c-cat-4: #F8B548;
  --c-cat-5: #A78BFA;

  --c-seq-0: #0E2233;
  --c-seq-1: #143B53;
  --c-seq-2: #1E5878;
  --c-seq-3: #2E7DA3;
  --c-seq-4: #4BA6CF;
  --c-seq-5: #76C9EC;

  --c-div-neg2: #F26A5E;
  --c-div-neg1: #A14a43;
  --c-div-mid:  #233646;
  --c-div-pos1: #3E89AE;
  --c-div-pos2: #76C9EC;

  --c-sev0: #38BDF8;
  --c-sev1: #2DD4BF;
  --c-sev2: #F8B548;
  --c-sev3: #F77F73;
  --c-sev4: #EF5350;

  --c-grid:      #163042;
  --c-axis:      #2B4459;
  --c-axis-text: #819AAC;
  --c-target:    #819AAC;
  --c-context:   #2C465A;

  --c-map-land:  #122636;
  --c-map-land-2:#183047;
  --c-map-water: #0A1622;
  --c-map-stroke:#21405A;

  --c-chip-bg:   #0E2C42;
  --c-chip-ink:  #8FD3F2;
  --c-chip-border:#1B4660;
  --c-control-bg:#122436;
  --c-control-border:#223D54;
  --c-control-ink:#D3E2EE;
  --c-focus:     #38BDF8;
  --c-shadow:    0 1px 2px rgba(0,0,0,.42), 0 4px 16px rgba(0,0,0,.42);
  --c-shadow-lg: 0 8px 36px rgba(0,0,0,.58);
  --c-tooltip-bg:#020A12;
  --c-tooltip-ink:#E8F0F7;
}

/* ---- global number rendering: tabular figures everywhere ---- */
.tnum, .kpi-value, table td, table th, .axis text, .chart-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv01' 1;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }