/* =====================================================================
   Theme tokens
   =====================================================================

   Dark is :root and light is :root.light-mode, the same arrangement as
   nova-dashboard. logic/theme.js sets the class in <head>, before the first
   paint, from the saved choice or else the system preference.

   Text and status tokens are held to 4.5:1 against EVERY surface they can sit
   on (bg, surface, raised); the measured worst case is written beside each.
   Status colours used as text are deliberately not the map's line colours:
   a line only needs 3:1 against the base map, a word needs 4.5:1 against a card.

   The map's colours live here too (--map-*), so the legend and the map read
   one source. logic/map.js reads them with getComputedStyle whenever the
   theme changes. They were checked with the dataviz validator; the numbers
   are in documentation/frontend.md. */

@property --sidebar-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 240px;
}
@property --panel-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 380px;
}

:root {
  color-scheme: dark;

  --bg: #0e0f10;
  --surface: #17181a;
  --raised: #202125;
  --hairline: #2d2e32;
  --hairline-strong: #44454a;
  --ink: #eceae4;            /* 13.37:1 on raised */
  --ink-2: #c4c2b8;          /*  9.00:1 */
  --muted: #a19f96;          /*  6.06:1 */
  --accent: #4fd1c1;         /*  8.60:1 */
  --on-accent: #0e0f10;      /* 10.25:1 on accent */
  --accent-soft: rgba(79, 209, 193, 0.14);
  --focus: #4fd1c1;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --scrim: rgba(0, 0, 0, 0.55);

  /* Status as text and icon */
  --st-progress: #ff8a7a;    /* 7.02:1 */
  --st-today: #f2b232;       /* 8.57:1 */
  --st-later: #b4a9ff;       /* 7.70:1 */
  --st-ended: #b3b1a8;       /* 7.48:1 */
  --st-ok: #5fd38a;          /* 8.56:1 */

  /* Glass: the floating layer over the map (header, filters, legend) and the
     sidebar. Alpha is the lowest that keeps ink and ink-2 at 4.5:1 over the
     worst thing the map can put underneath, composited and measured: here a
     solid label grey #bcbcbc, which at 0.66 leaves ink-2 at 4.53:1. Blur
     averages thin lines away, so large fills are the real worst case. */
  --glass: rgba(23, 24, 26, 0.66);
  --glass-blur: 24px;
  --glass-sat: 1.8;
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* Map: OpenFreeMap "dark" (background #0c0c0c). Validated --pairs all:
     CVD worst 10.2, normal vision 16.9, all >= 3:1. */
  --map-progress: #d03b3b;
  --map-today: #c98500;
  --map-later: #9085e9;
  --map-ended: #8f8d86;      /* dashed, 5.89:1 */
  --map-casing: #000000;
  --map-casing-opacity: 0.85;
  --map-outline: #8a8985;
  --map-fill-1: #184f95;     /* 1-2 outages. Reversed ramp: more outages, brighter */
  --map-fill-2: #256abf;     /* 3-5 */
  --map-fill-3: #3987e5;     /* 6-10 */
  --map-fill-4: #86b6ef;     /* 11+ */
  --map-fill-opacity: 0.62;
}

:root.light-mode {
  color-scheme: light;

  --bg: #f3f2ee;
  --surface: #ffffff;
  --raised: #f1f0eb;
  --hairline: #e0ded6;
  --hairline-strong: #c9c7be;
  --ink: #16150f;            /* 16.03:1 on raised */
  --ink-2: #45443e;          /*  8.56:1 */
  --muted: #62615a;          /*  5.45:1 */
  --accent: #0a6b63;         /*  5.58:1 */
  --on-accent: #ffffff;      /*  6.37:1 on accent */
  --accent-soft: rgba(10, 107, 99, 0.10);
  --focus: #0a6b63;
  --shadow: 0 10px 30px rgba(22, 21, 15, 0.14);
  --shadow-sm: 0 2px 8px rgba(22, 21, 15, 0.10);
  --scrim: rgba(22, 21, 15, 0.38);

  --st-progress: #b3261e;    /* 5.73:1 */
  --st-today: #875400;       /* 5.58:1 */
  --st-later: #4a3aa7;       /* 7.50:1 */
  --st-ended: #5f5e57;       /* 5.71:1 */
  --st-ok: #1d6b33;          /* 5.75:1 */

  /* 0.55: ink-2 at 5.18:1 over the darkest fill (#0d366b at 0.7). */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 28px rgba(22, 21, 15, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Map: OpenFreeMap "positron" (background #f2f3f0). Validated --pairs all:
     CVD worst 19.8, normal vision 24.1. The yellow is 1.94:1 against the
     base map; the dark casing around every line and the status word in the
     popup and card carry it. */
  --map-progress: #d03b3b;
  --map-today: #eda100;
  --map-later: #4a3aa7;
  --map-ended: #898781;      /* dashed, 3.22:1 */
  --map-casing: #0b0b0b;
  --map-casing-opacity: 0.55;
  --map-outline: #52514e;
  --map-fill-1: #6da7ec;     /* 1-2 outages, 2.25:1 against the base map */
  --map-fill-2: #2a78d6;
  --map-fill-3: #1c5cab;
  --map-fill-4: #0d366b;
  --map-fill-opacity: 0.7;
}

:root {
  --font-body: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Sofia Sans Condensed', 'Commissioner', system-ui, sans-serif;

  --header-height: 60px;
  /* env() enters the stylesheet here and nowhere else, so the whole chain can
     be checked by overriding these two tokens in a desktop browser. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-total: calc(var(--header-height) + var(--safe-top));

  --sidebar-expanded: 240px;
  --sidebar-rail: 64px;
  --panel-open: 380px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-control: 14px;    /* floating controls over the map: filters, legend */
  --tap: 44px;
  /* One timing for every layout move (sidebar, panel, drawer, sheet): a fast
     start that settles gently, the same length whatever the distance. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.32s;
}