/* ============================================================================
   MERIDIAN — theme tokens (light default + designed dark)
   Every color a chart needs is a CSS custom property here, read via APP.palette().
   Light is the primary design target; dark is designed (not inverted).
   ============================================================================ */

/* ---- 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 (1.2 minor third on a 13px base for dense BI) */
  --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:   36px;
  --fs-kpi:   30px;

  /* 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:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* z-scale (semantic) */
  --z-base: 1; --z-sticky: 100; --z-chip: 150; --z-dropdown: 300;
  --z-tooltip: 800; --z-modal: 900;

  /* 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;
}

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

  /* surfaces & ink */
  --c-bg:        #F7F9FB;
  --c-bg-tint:   #EEF3F7;   /* faint section banding */
  --c-surface:   #FFFFFF;
  --c-surface-2: #F4F7FA;   /* nested wells, table header */
  --c-ink:       #102A43;   /* primary text */
  --c-ink-soft:  #334E68;   /* secondary text */
  --c-muted:     #5A7184;   /* tertiary / captions */
  --c-faint:     #8DA2B5;   /* axis ticks, de-emphasis */
  --c-hairline:  #E3E8EF;   /* borders, gridlines */
  --c-hairline-2:#EDF1F6;   /* lighter gridlines */

  /* brand / signal roles */
  --c-ocean:     #1E6F9F;   /* primary brand blue */
  --c-ocean-2:   #155A82;   /* darker brand */
  --c-ocean-soft:#D7E7F1;   /* brand tint fill */
  --c-teal:      #0E7C86;   /* accent teal */
  --c-teal-soft: #D2EAEC;

  /* status semantics (good is NOT always green) */
  --c-ontime:    #2E7D32;   /* on-time green */
  --c-ontime-soft:#DCEEDD;
  --c-transit:   #F0A202;   /* in-transit amber */
  --c-transit-soft:#FBEBC4;
  --c-delayed:   #C0392B;   /* delayed red */
  --c-delayed-soft:#F6D9D5;
  --c-early:     #5B8DEF;   /* early blue (ahead of schedule) */
  --c-early-soft:#DCE7FB;

  /* transport mode palette (categorical, <=6 hues, colorblind-aware) */
  --c-mode-sea:  #1E6F9F;   /* ocean blue */
  --c-mode-air:  #C0392B;   /* red */
  --c-mode-road: #F0A202;   /* amber */
  --c-mode-rail: #0E7C86;   /* teal */

  /* sequential ramp (heatmaps: low -> high intensity, single hue) */
  --c-seq-0: #F0F5F9;
  --c-seq-1: #CFE2EE;
  --c-seq-2: #9FC6DD;
  --c-seq-3: #5E9EC4;
  --c-seq-4: #2E77A3;
  --c-seq-5: #155A82;

  /* diverging ramp (vs target: bad <- neutral -> good) */
  --c-div-neg2: #C0392B;
  --c-div-neg1: #E59C93;
  --c-div-mid:  #EDEFF2;
  --c-div-pos1: #8DBF90;
  --c-div-pos2: #2E7D32;

  /* severity steps (risk low->high) */
  --c-sev0: #2E7D32;
  --c-sev1: #8DB14A;
  --c-sev2: #F0A202;
  --c-sev3: #E0651B;
  --c-sev4: #C0392B;

  /* chart furniture */
  --c-grid:      #EAEFF4;
  --c-axis:      #B7C5D2;
  --c-axis-text: #5A7184;
  --c-target:    #5A7184;   /* target / reference lines */
  --c-context:   #C5D2DD;   /* de-emphasized "context" marks (gray workhorse) */

  /* map basemap (quiet) */
  --c-map-land:  #E7EDF2;
  --c-map-land-2:#DCE4EB;
  --c-map-water: #F2F6F9;
  --c-map-stroke:#CDD8E1;

  /* ui chrome */
  --c-chip-bg:   #EAF1F6;
  --c-chip-ink:  #1E4D6B;
  --c-chip-border:#CBDDE9;
  --c-control-bg:#FFFFFF;
  --c-control-border:#D4DEE7;
  --c-control-ink:#22384C;
  --c-focus:     #1E6F9F;
  --c-shadow:    0 1px 2px rgba(16,42,67,.05), 0 4px 14px rgba(16,42,67,.06);
  --c-shadow-lg: 0 6px 30px rgba(16,42,67,.12);
  --c-positive:  #2E7D32;  /* delta up-good */
  --c-negative:  #C0392B;  /* delta down-bad */
  --c-tooltip-bg:#0E1E2C;
  --c-tooltip-ink:#F2F6F9;
}

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

  --c-bg:        #07121C;
  --c-bg-tint:   #0A1825;
  --c-surface:   #0E1E2C;
  --c-surface-2: #132838;
  --c-ink:       #E7EEF4;
  --c-ink-soft:  #B7C7D4;
  --c-muted:     #8298A8;
  --c-faint:     #5F7585;
  --c-hairline:  #1E3243;
  --c-hairline-2:#172734;

  --c-ocean:     #4FA3D1;
  --c-ocean-2:   #6FBBE2;
  --c-ocean-soft:#143247;
  --c-teal:      #34B3BD;
  --c-teal-soft: #0E3338;

  --c-ontime:    #5DBE63;
  --c-ontime-soft:#13351A;
  --c-transit:   #F5B83D;
  --c-transit-soft:#3A2D0A;
  --c-delayed:   #E66A5C;
  --c-delayed-soft:#3A1714;
  --c-early:     #7FA8F2;
  --c-early-soft:#16223D;

  --c-mode-sea:  #4FA3D1;
  --c-mode-air:  #E66A5C;
  --c-mode-road: #F5B83D;
  --c-mode-rail: #34B3BD;

  --c-seq-0: #112230;
  --c-seq-1: #1A3A50;
  --c-seq-2: #275A78;
  --c-seq-3: #3D85AB;
  --c-seq-4: #5FA8CE;
  --c-seq-5: #8CC8E6;

  --c-div-neg2: #E66A5C;
  --c-div-neg1: #9B4A43;
  --c-div-mid:  #2A3C4A;
  --c-div-pos1: #4E8553;
  --c-div-pos2: #5DBE63;

  --c-sev0: #5DBE63;
  --c-sev1: #9BBF5A;
  --c-sev2: #F5B83D;
  --c-sev3: #EE8A45;
  --c-sev4: #E66A5C;

  --c-grid:      #16293A;
  --c-axis:      #2C4456;
  --c-axis-text: #8298A8;
  --c-target:    #8298A8;
  --c-context:   #2E4658;

  --c-map-land:  #14283A;
  --c-map-land-2:#1A3145;
  --c-map-water: #0A1825;
  --c-map-stroke:#243B4F;

  --c-chip-bg:   #143247;
  --c-chip-ink:  #9FD0EC;
  --c-chip-border:#1F4760;
  --c-control-bg:#132838;
  --c-control-border:#244056;
  --c-control-ink:#D5E2EC;
  --c-focus:     #4FA3D1;
  --c-shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.4);
  --c-shadow-lg: 0 8px 36px rgba(0,0,0,.55);
  --c-positive:  #5DBE63;
  --c-negative:  #E66A5C;
  --c-tooltip-bg:#021019;
  --c-tooltip-ink:#E7EEF4;
}

/* ---- 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; }