/**
 * Design tokens — approved 2026-07-13 (design review v3.3, doc 06 §1).
 * Brand colors are pixel-sampled from public/assets/brand/
 * "logo_hatzolah_central_final TM.png" — the color source of truth.
 * Cyan (#00AEEF) appears in the logo subtitle only; retired from the UI.
 * Every component consumes these variables; no hard-coded colors in views.
 */
:root {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --ink: #14222D;
  --ink-2: #41586B;
  --ink-3: #748CA0;
  --line: #D9DEE9;
  --line-soft: #E8ECF4;

  --color-primary: #095185;        /* marine blue — nav, buttons, links, selection */
  --color-primary-deep: #04325B;   /* the logo's own shadow blue */
  --color-primary-tint: #E4EEF6;

  --color-danger: #AB0534;         /* crimson — danger + brand only; never decoration */
  --color-danger-tint: #F8E7EC;
  --color-danger-ink: #98052F;

  --color-success: #207A4C;
  --color-success-tint: #E3F2EA;
  --color-warning: #9A6200;
  --color-warning-tint: #FBF0DC;

  --sidebar: #04325B;
  --sidebar-ink: #BCD2E4;
  --sidebar-ink-dim: #7FA1BD;
  --sidebar-line: #0E4471;
  --sidebar-active: #022543;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(22, 29, 46, .06), 0 4px 14px rgba(22, 29, 46, .05);
  --wm-invert: 0;                  /* line-art watermark inversion (1 in dark mode) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C141C;
    --surface: #14202B;
    --surface-2: #1A2836;
    --ink: #E7EEF3;
    --ink-2: #ABBECC;
    --ink-3: #7290A5;
    --line: #28394A;
    --line-soft: #20303F;

    --color-primary: #6BA7D6;
    --color-primary-deep: #8FBEE4;
    --color-primary-tint: #12334C;

    --color-danger: #E76C86;
    --color-danger-tint: #3A141F;
    --color-danger-ink: #EE8399;

    --color-success: #59B98A;
    --color-success-tint: #163527;
    --color-warning: #D9A44A;
    --color-warning-tint: #372A12;

    --sidebar: #062338;
    --sidebar-ink: #B3CADC;
    --sidebar-ink-dim: #6E92AC;
    --sidebar-line: #0F3A57;
    --sidebar-active: #031725;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --wm-invert: 1;
  }
}

/* Explicit theme override (user preference from the profile menu) beats the OS. */
:root[data-theme="light"] {
  --bg: #EEF1F7;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --ink: #14222D;
  --ink-2: #41586B;
  --ink-3: #748CA0;
  --line: #D9DEE9;
  --line-soft: #E8ECF4;
  --color-primary: #095185;
  --color-primary-deep: #04325B;
  --color-primary-tint: #E4EEF6;
  --color-danger: #AB0534;
  --color-danger-tint: #F8E7EC;
  --color-danger-ink: #98052F;
  --color-success: #207A4C;
  --color-success-tint: #E3F2EA;
  --color-warning: #9A6200;
  --color-warning-tint: #FBF0DC;
  --sidebar: #04325B;
  --sidebar-ink: #BCD2E4;
  --sidebar-ink-dim: #7FA1BD;
  --sidebar-line: #0E4471;
  --sidebar-active: #022543;
  --shadow: 0 1px 2px rgba(22, 29, 46, .06), 0 4px 14px rgba(22, 29, 46, .05);
  --wm-invert: 0;
}

:root[data-theme="dark"] {
  --bg: #0C141C;
  --surface: #14202B;
  --surface-2: #1A2836;
  --ink: #E7EEF3;
  --ink-2: #ABBECC;
  --ink-3: #7290A5;
  --line: #28394A;
  --line-soft: #20303F;
  --color-primary: #6BA7D6;
  --color-primary-deep: #8FBEE4;
  --color-primary-tint: #12334C;
  --color-danger: #E76C86;
  --color-danger-tint: #3A141F;
  --color-danger-ink: #EE8399;
  --color-success: #59B98A;
  --color-success-tint: #163527;
  --color-warning: #D9A44A;
  --color-warning-tint: #372A12;
  --sidebar: #062338;
  --sidebar-ink: #B3CADC;
  --sidebar-ink-dim: #6E92AC;
  --sidebar-line: #0F3A57;
  --sidebar-active: #031725;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --wm-invert: 1;
}

/* Per-module accent dots (doc 06 §1): icon dot + active-nav tint only — never paint. */
:root {
  --module-calls: #2E8B8B;
  --module-roster: #207A4C;
  --module-cs: #7C5CBF;
  --module-dot: #9A6200;
  --module-fleet: #5B6B7A;
  --module-dispatch: #AB0534;
}

/**
 * EMT certification-level colors (roster) — chosen by Eli 2026-07-19, then
 * strengthened. Solid = text/number, tint = fill. Base tiers use a saturated
 * tint + colored text; coordinator tiers use a strong SOLID fill so they stand
 * out (esp. the yellow). No hard-coded colors in views — consume these tokens.
 *   service  light blue   Service + Other
 *   emt      green        EMT
 *   para     red          Paramedic (EMT-P) + Physician
 *   emtco    yellow       EMT + coordinator        (solid fill)
 *   parco    purple       Paramedic/Physician + coordinator  (solid fill)
 */
:root {
  --emt-service: #0B5C9E; --emt-service-tint: #D2E7F7;
  --emt-emt: #157A42;     --emt-emt-tint: #CFEBD9;
  --emt-para: #A3082F;    --emt-para-tint: #F6CFD9;
  --emt-emtco: #4A3600;   --emt-emtco-tint: #F5C518;
  --emt-parco: #FFFFFF;   --emt-parco-tint: #6E3FB5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --emt-service: #7FC0EE; --emt-service-tint: #123B54;
    --emt-emt: #6FCF9C;     --emt-emt-tint: #14381F;
    --emt-para: #F08099;    --emt-para-tint: #3E1420;
    --emt-emtco: #2A1F00;   --emt-emtco-tint: #E0AE10;
    --emt-parco: #FFFFFF;   --emt-parco-tint: #7B54C4;
  }
}
:root[data-theme="light"] {
  --emt-service: #0B5C9E; --emt-service-tint: #D2E7F7;
  --emt-emt: #157A42;     --emt-emt-tint: #CFEBD9;
  --emt-para: #A3082F;    --emt-para-tint: #F6CFD9;
  --emt-emtco: #4A3600;   --emt-emtco-tint: #F5C518;
  --emt-parco: #FFFFFF;   --emt-parco-tint: #6E3FB5;
}
:root[data-theme="dark"] {
  --emt-service: #7FC0EE; --emt-service-tint: #123B54;
  --emt-emt: #6FCF9C;     --emt-emt-tint: #14381F;
  --emt-para: #F08099;    --emt-para-tint: #3E1420;
  --emt-emtco: #2A1F00;   --emt-emtco-tint: #E0AE10;
  --emt-parco: #FFFFFF;   --emt-parco-tint: #7B54C4;
}