/* ============================================================================
   SENTINEL — theme tokens (light default + designed dark)
   Domain: HSE / incident & injury management.
   Identity: hi-vis safety AMBER signal · slate/charcoal ink · RED for severe.
   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).
   ============================================================================ */

@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;

  --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;

  --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-base: 1; --z-sticky: 100; --z-chip: 150; --z-dropdown: 300;
  --z-tooltip: 800; --z-modal: 900;

  --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 — warm-neutral slate (not cold blue) */
  --c-bg:        #F6F7F8;
  --c-bg-tint:   #EFF1F3;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F3F5F6;   /* nested wells, table header */
  --c-ink:       #1B2733;   /* charcoal slate primary text */
  --c-ink-soft:  #3B4A59;   /* secondary text */
  --c-muted:     #61707E;   /* tertiary / captions */
  --c-faint:     #93A0AC;   /* axis ticks, de-emphasis */
  --c-hairline:  #E4E7EA;   /* borders, gridlines */
  --c-hairline-2:#EDEFF1;   /* lighter gridlines */

  /* brand / signal roles — hi-vis safety amber */
  --c-brand:     #E8930C;   /* SENTINEL amber (the signal color) */
  --c-brand-2:   #C46A00;   /* darker amber (logo grad end, hovers) */
  --c-brand-soft:#FCEBCB;   /* amber tint fill */
  --c-amber:     #E8930C;   /* alias */
  --c-amber-2:   #C46A00;
  --c-ink-accent:#1B2733;   /* charcoal accent (pairs with amber) */

  /* critical / severe */
  --c-red:       #C0392B;   /* severe / critical / overdue */
  --c-red-2:     #9E2A1E;
  --c-red-soft:  #F7DAD5;

  /* incident-type semantics (categorical, <=6 hues, colorblind-aware:
     amber / charcoal / teal-blue / muted — avoids red/green collision) */
  --c-type-injury:   #C0392B;   /* injury = red (it hurt someone) */
  --c-type-injury-soft:#F7DAD5;
  --c-type-nearmiss: #E8930C;   /* near-miss = amber (warning) */
  --c-type-nearmiss-soft:#FCEBCB;
  --c-type-property: #2C6E8F;   /* property = slate blue */
  --c-type-property-soft:#D6E6EE;
  --c-type-environ:  #3E7C59;   /* environmental = muted green */
  --c-type-environ-soft:#D9EBE0;

  /* action-status semantics (good is NOT always green) */
  --c-st-open:       #61707E;   /* open = neutral slate */
  --c-st-open-soft:  #E7EAEC;
  --c-st-progress:   #2C6E8F;   /* in-progress = blue */
  --c-st-progress-soft:#D6E6EE;
  --c-st-overdue:    #C0392B;   /* overdue = red */
  --c-st-overdue-soft:#F7DAD5;
  --c-st-closed:     #3E7C59;   /* closed = green */
  --c-st-closed-soft:#D9EBE0;

  /* SEVERITY ramp (5-step green -> amber -> red; low risk -> critical) */
  --c-sev1: #3E7C59;   /* first-aid */
  --c-sev2: #8FA63C;   /* medical treatment */
  --c-sev3: #E8930C;   /* restricted work */
  --c-sev4: #DD6B1E;   /* lost-time */
  --c-sev5: #C0392B;   /* serious / fatality */
  --c-sev1-soft: #D9EBE0;
  --c-sev2-soft: #ECF0D6;
  --c-sev3-soft: #FCEBCB;
  --c-sev4-soft: #FADFC9;
  --c-sev5-soft: #F7DAD5;

  /* SEQUENTIAL AMBER ramp (6 steps; heatmaps: low -> high frequency, single hue) */
  --c-seq-0: #FBF2E2;
  --c-seq-1: #F7DFB0;
  --c-seq-2: #F1C572;
  --c-seq-3: #E8930C;
  --c-seq-4: #C46A00;
  --c-seq-5: #8F4B00;

  /* DIVERGING ramp (vs target: good <- neutral -> bad; amber-blue through neutral) */
  --c-div-neg2: #2C6E8F;   /* well under (good) */
  --c-div-neg1: #8FB7C9;
  --c-div-mid:  #ECEEF0;
  --c-div-pos1: #EBB05A;
  --c-div-pos2: #C0392B;   /* well over (bad) */

  /* chart furniture */
  --c-grid:      #ECEEF0;
  --c-axis:      #C2CAD1;
  --c-axis-text: #61707E;
  --c-target:    #61707E;   /* target / reference lines */
  --c-context:   #C7CFD6;   /* de-emphasized "context" marks (gray workhorse) */

  /* map basemap (quiet) */
  --c-map-land:  #E7EAEC;
  --c-map-land-2:#DDE2E5;
  --c-map-water: #F2F4F5;
  --c-map-stroke:#CDD4D9;

  /* ui chrome */
  --c-chip-bg:   #FBF1DC;
  --c-chip-ink:  #8F4B00;
  --c-chip-border:#F0D9AA;
  --c-control-bg:#FFFFFF;
  --c-control-border:#D8DDE1;
  --c-control-ink:#2A3744;
  --c-focus:     #E8930C;
  --c-shadow:    0 1px 2px rgba(27,39,51,.05), 0 4px 14px rgba(27,39,51,.06);
  --c-shadow-lg: 0 6px 30px rgba(27,39,51,.12);
  --c-positive:  #3E7C59;  /* delta good (green) */
  --c-negative:  #C0392B;  /* delta bad (red) */
  --c-tooltip-bg:#15202B;
  --c-tooltip-ink:#F4F6F7;

  /* anatomical figure fill (body map base, before frequency tint) */
  --c-figure:    #E9EDEF;
  --c-figure-2:  #DCE2E6;
  --c-figure-stroke:#C2CAD1;
}

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

  --c-bg:        #0C1217;
  --c-bg-tint:   #10171E;
  --c-surface:   #141C24;
  --c-surface-2: #1B252E;
  --c-ink:       #E8EDF1;
  --c-ink-soft:  #BCC8D1;
  --c-muted:     #8796A2;
  --c-faint:     #61707C;
  --c-hairline:  #233039;
  --c-hairline-2:#1A242C;

  --c-brand:     #F2A938;   /* brightened amber for dark */
  --c-brand-2:   #F6BE5E;
  --c-brand-soft:#3A2A0E;
  --c-amber:     #F2A938;
  --c-amber-2:   #F6BE5E;
  --c-ink-accent:#E8EDF1;

  --c-red:       #E5685A;
  --c-red-2:     #EE8579;
  --c-red-soft:  #3A1714;

  --c-type-injury:   #E5685A;
  --c-type-injury-soft:#3A1714;
  --c-type-nearmiss: #F2A938;
  --c-type-nearmiss-soft:#3A2A0E;
  --c-type-property: #58A6CC;
  --c-type-property-soft:#0F2D3B;
  --c-type-environ:  #5CB17F;
  --c-type-environ-soft:#12301F;

  --c-st-open:       #8796A2;
  --c-st-open-soft:  #20292F;
  --c-st-progress:   #58A6CC;
  --c-st-progress-soft:#0F2D3B;
  --c-st-overdue:    #E5685A;
  --c-st-overdue-soft:#3A1714;
  --c-st-closed:     #5CB17F;
  --c-st-closed-soft:#12301F;

  --c-sev1: #5CB17F;
  --c-sev2: #A7BE52;
  --c-sev3: #F2A938;
  --c-sev4: #ED8645;
  --c-sev5: #E5685A;
  --c-sev1-soft: #12301F;
  --c-sev2-soft: #2A300F;
  --c-sev3-soft: #3A2A0E;
  --c-sev4-soft: #3A220E;
  --c-sev5-soft: #3A1714;

  --c-seq-0: #2A1F0C;
  --c-seq-1: #4A3410;
  --c-seq-2: #7A5413;
  --c-seq-3: #B47D24;
  --c-seq-4: #E0A23C;
  --c-seq-5: #F6C266;

  --c-div-neg2: #58A6CC;
  --c-div-neg1: #356B83;
  --c-div-mid:  #29333B;
  --c-div-pos1: #C28A3A;
  --c-div-pos2: #E5685A;

  --c-grid:      #1E2A33;
  --c-axis:      #33434E;
  --c-axis-text: #8796A2;
  --c-target:    #8796A2;
  --c-context:   #38474F;

  --c-map-land:  #18242D;
  --c-map-land-2:#1F2D37;
  --c-map-water: #10171E;
  --c-map-stroke:#2A3A45;

  --c-chip-bg:   #3A2A0E;
  --c-chip-ink:  #F6C266;
  --c-chip-border:#5A4316;
  --c-control-bg:#1B252E;
  --c-control-border:#2B3A45;
  --c-control-ink:#D7E0E7;
  --c-focus:     #F2A938;
  --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:  #5CB17F;
  --c-negative:  #E5685A;
  --c-tooltip-bg:#05090D;
  --c-tooltip-ink:#E8EDF1;

  --c-figure:    #1E2A33;
  --c-figure-2:  #263540;
  --c-figure-stroke:#33434E;
}

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