/* ============================================================================
   VANTAGE — theme tokens (light default + designed dark)
   Audits & inspections. Emerald primary, charcoal ink, teal accent.
   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):
   desaturated/brightened data colors, near-black green-grey surface, legible text.
   ============================================================================ */

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

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

  /* surfaces & ink — warm-neutral with a faint green-grey cast */
  --c-bg:        #F6F8F6;
  --c-bg-tint:   #EEF3EF;   /* faint section banding */
  --c-surface:   #FFFFFF;
  --c-surface-2: #F2F6F3;   /* nested wells, table header */
  --c-ink:       #14211C;   /* primary text — charcoal w/ green cast */
  --c-ink-soft:  #2C3D36;   /* secondary text */
  --c-muted:     #5A6B63;   /* tertiary / captions */
  --c-faint:     #8A9A92;   /* axis ticks, de-emphasis */
  --c-hairline:  #E2E8E4;   /* borders, gridlines */
  --c-hairline-2:#EDF1EE;   /* lighter gridlines */

  /* brand / signal roles */
  --c-brand:     #0E9F6E;   /* PRIMARY emerald */
  --c-brand-2:   #0B7E57;   /* darker emerald */
  --c-brand-3:   #086547;   /* deepest emerald */
  --c-brand-soft:#D6F0E4;   /* emerald tint fill */
  --c-brand-soft2:#EAF7F0;  /* faintest emerald wash */
  --c-teal:      #0E7C86;   /* accent teal */
  --c-teal-2:    #0A626A;
  --c-teal-soft: #D3EBED;
  --c-amber:     #C77E0A;   /* warning / attention (used sparingly) */
  --c-amber-soft:#F8EBCF;
  --c-violet:    #6D5AC9;   /* a sixth categorical hue (inspectors etc.) */
  --c-violet-soft:#E5E0F6;
  --c-slate:     #4F6D7A;   /* neutral-cool categorical */
  --c-slate-soft:#DEE7EB;

  /* result semantics — pass/fail/na (good is emerald, fail is red) */
  --c-pass:      #0E9F6E;   /* PASS = emerald (== brand: good is green here) */
  --c-pass-soft: #D6F0E4;
  --c-fail:      #D14343;   /* FAIL = red */
  --c-fail-soft: #F7DAD8;
  --c-na:        #8A9A92;   /* N/A = neutral */
  --c-na-soft:   #E8EDEA;

  /* action-status semantics */
  --c-open:      #4F6D7A;   /* open = cool slate */
  --c-open-soft: #DEE7EB;
  --c-progress:  #0E7C86;   /* in-progress = teal */
  --c-progress-soft:#D3EBED;
  --c-overdue:   #D14343;   /* overdue = red */
  --c-overdue-soft:#F7DAD8;
  --c-closed:    #0E9F6E;   /* closed = emerald (done = good) */
  --c-closed-soft:#D6F0E4;

  /* priority semantics */
  --c-prio-critical:#B91C1C;
  --c-prio-high:    #D97706;
  --c-prio-medium:  #0E7C86;
  --c-prio-low:     #8A9A92;

  /* SEQUENTIAL emerald ramp (calendar heatmap: low -> high intensity) */
  --c-seq-0: #EEF4F0;
  --c-seq-1: #C8E8D6;
  --c-seq-2: #92D3B0;
  --c-seq-3: #54B786;
  --c-seq-4: #1E9C68;
  --c-seq-5: #0B7E57;
  --c-seq-6: #086547;

  /* DIVERGING ramp centred on the PASS THRESHOLD (red below / emerald above) */
  --c-div-neg3: #B4231F;
  --c-div-neg2: #D14343;
  --c-div-neg1: #E89C8E;
  --c-div-mid:  #EDEFEC;    /* the threshold band */
  --c-div-pos1: #84CBA6;
  --c-div-pos2: #1E9C68;
  --c-div-pos3: #0B7E57;

  /* chart furniture */
  --c-grid:      #E8EEEA;
  --c-axis:      #BBC9C2;
  --c-axis-text: #5A6B63;
  --c-target:    #5A6B63;   /* target / reference lines */
  --c-context:   #C5D2CC;   /* de-emphasized "context" marks (gray workhorse) */
  --c-context-2: #D8E1DC;

  /* map basemap (quiet) */
  --c-map-land:  #E6EDE8;
  --c-map-land-2:#DBE5DF;
  --c-map-water: #F1F5F2;
  --c-map-stroke:#CBD8D1;

  /* ui chrome */
  --c-chip-bg:   #E5F2EB;
  --c-chip-ink:  #0B6B4A;
  --c-chip-border:#C4E5D4;
  --c-control-bg:#FFFFFF;
  --c-control-border:#D2DDD7;
  --c-control-ink:#1E2D27;
  --c-focus:     #0E9F6E;
  --c-shadow:    0 1px 2px rgba(20,33,28,.05), 0 4px 14px rgba(20,33,28,.06);
  --c-shadow-lg: 0 6px 30px rgba(20,33,28,.12);
  --c-positive:  #0E9F6E;  /* delta good */
  --c-negative:  #D14343;  /* delta bad */
  --c-tooltip-bg:#0F1C17;
  --c-tooltip-ink:#EFF5F1;
}

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

  --c-bg:        #08110D;   /* near-black green-grey */
  --c-bg-tint:   #0B1813;
  --c-surface:   #0E1A15;
  --c-surface-2: #14241D;
  --c-ink:       #E6EFE9;
  --c-ink-soft:  #B6C7BD;
  --c-muted:     #809488;
  --c-faint:     #5E7268;
  --c-hairline:  #1E3128;
  --c-hairline-2:#16271F;

  --c-brand:     #34C28C;   /* brightened emerald for dark */
  --c-brand-2:   #4FD49E;
  --c-brand-3:   #6FE0B2;
  --c-brand-soft:#0E3528;
  --c-brand-soft2:#0B2A20;
  --c-teal:      #2DB3BD;
  --c-teal-2:    #4CC6CF;
  --c-teal-soft: #0C3338;
  --c-amber:     #E0A33A;
  --c-amber-soft:#36290C;
  --c-violet:    #9C8CE6;
  --c-violet-soft:#221C3D;
  --c-slate:     #7C9AA8;
  --c-slate-soft:#16262C;

  --c-pass:      #34C28C;
  --c-pass-soft: #0E3528;
  --c-fail:      #E96A6A;
  --c-fail-soft: #3A1614;
  --c-na:        #809488;
  --c-na-soft:   #1B2922;

  --c-open:      #7C9AA8;
  --c-open-soft: #16262C;
  --c-progress:  #2DB3BD;
  --c-progress-soft:#0C3338;
  --c-overdue:   #E96A6A;
  --c-overdue-soft:#3A1614;
  --c-closed:    #34C28C;
  --c-closed-soft:#0E3528;

  --c-prio-critical:#F0625E;
  --c-prio-high:    #E8A23E;
  --c-prio-medium:  #2DB3BD;
  --c-prio-low:     #809488;

  --c-seq-0: #0D211A;
  --c-seq-1: #11362A;
  --c-seq-2: #185040;
  --c-seq-3: #237158;
  --c-seq-4: #2F9670;
  --c-seq-5: #46BC8E;
  --c-seq-6: #6FE0B2;

  --c-div-neg3: #F0625E;
  --c-div-neg2: #D85A56;
  --c-div-neg1: #9B4A45;
  --c-div-mid:  #243029;
  --c-div-pos1: #2C7E5E;
  --c-div-pos2: #3FB587;
  --c-div-pos3: #6FE0B2;

  --c-grid:      #15271F;
  --c-axis:      #2C443A;
  --c-axis-text: #809488;
  --c-target:    #809488;
  --c-context:   #2C443A;
  --c-context-2: #223830;

  --c-map-land:  #12261E;
  --c-map-land-2:#193228;
  --c-map-water: #0B1813;
  --c-map-stroke:#244236;

  --c-chip-bg:   #0E3528;
  --c-chip-ink:  #7FE0B6;
  --c-chip-border:#1B5740;
  --c-control-bg:#14241D;
  --c-control-border:#284338;
  --c-control-ink:#D3E2DA;
  --c-focus:     #34C28C;
  --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:  #34C28C;
  --c-negative:  #E96A6A;
  --c-tooltip-bg:#03100A;
  --c-tooltip-ink:#E6EFE9;
}

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