/**
 * tokens.css — Mould Detect design tokens, trimmed for dashboard-cloud.
 *
 * WHY: this file is a deliberate subset of the website's
 * `Mould Detect Website/site/css/tokens.css` — same names, same values, so a
 * component built here would drop into the main site unchanged. The light
 * palette lives on bare `:root`; a dark palette redefines the same token
 * names (surfaces/ink/lines/accent tints/chart & gauge colours/shadows/the
 * chart's night-band fill) under `:root[data-theme="dark"]` and under
 * `@media (prefers-color-scheme: dark)` (guarded so the manual toggle always
 * wins over the system preference — see components/Header.js). Every
 * component still consumes only `var(--…)`, so nothing outside this file
 * needs to know a dark palette exists. Edit the website's tokens.css first if
 * a light-theme value ever needs to change, then mirror it here; the dark
 * palette is specific to this page (contrast pairs checked below).
 */

:root {
  /* ---- surfaces & ink (light / bone) ---- */
  --surface-0: #f6f4ec;
  --surface-1: #efece0;
  --surface-2: #e5e1d2;
  --ink-0: #152018;
  --ink-1: #3d4a40;
  --ink-2: #6b7769;
  --accent: #3e7a2e;
  --accent-ink: #f6f4ec;
  --accent-deep: #1e4d33;
  --line: #d6d2c0;

  /* Constant bone matte for the two JPEG illustrations (DiffuserReveal.js) —
     deliberately NOT redefined in the dark blocks below: the images have a
     white background, so their frame must always stay bone-coloured (a
     light "mat", not a themed surface) or they glare against a dark ground. */
  --frame-bone: #f6f4ec;

  /* ---- status / risk (data only; labels mandatory, dataviz skill) ---- */
  --risk-low: #3e7a2e;
  --risk-watch: #c0921f;
  --risk-high: #a04a1e;
  --risk-severe: #8a2a1b;

  /* subtle fill for the chart's night bands (HistoryChart.js .chart__night) —
     a fixed low-alpha token rather than ink-0 + a hardcoded opacity, so each
     theme can tune how visible the band is against its own surface. */
  --chart-night: rgb(21 32 24 / 0.05);

  /* ---- type ---- */
  --font-display: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --font-body: "Schibsted Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-display: clamp(2.75rem, 1.2rem + 6.5vw, 6rem);
  --text-h2: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --text-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --text-stat: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --text-body-lg: clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-mono: 0.8125rem;

  --leading-tight: 1.12;
  --leading-body: 1.65;
  --track-mono: 0.08em;
  --track-display: -0.01em;

  /* ---- space, grid, shape ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2.5rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 9rem;
  --section-pad: clamp(4rem, 10vh, 9rem);
  --page-max: 1240px;
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --page-margin: clamp(1.25rem, 5vw, 4rem);
  --r-1: 6px; --r-2: 12px; --r-3: 24px;
  --shadow-1: 0 24px 60px -24px rgb(21 32 24 / 0.28);
  /* subtler card/photo shadow (e.g. .device-card__photo) — kept as its own
     token rather than a hardcoded rgba() so dark mode can lift its opacity
     to read against a dark ground instead of vanishing into it. */
  --shadow-2: 0 6px 18px rgb(21 32 24 / 0.08);

  /* ---- motion ---- */
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-grow: cubic-bezier(0.34, 1.2, 0.4, 1);

  /* Supports both native colour schemes; the explicit blocks below (and the
     inline anti-flash script in index.html) pin it to whichever theme is
     actually active, so native form controls/scrollbars match. */
  color-scheme: light dark;
}

/**
 * Dark palette — deep green-black grounds (not pure black), bone/off-white
 * ink, the brand accent lifted for contrast on a dark ground. Applies when
 * either:
 *   - the toggle in Header.js has set `data-theme="dark"` on <html>, or
 *   - the OS/browser prefers dark AND the toggle hasn't explicitly chosen
 *     light (the `:not([data-theme="light"])` guard is what lets the toggle
 *     win over the system preference in both directions).
 *
 * Contrast pairs checked (WCAG AA, ≥ 4.5:1 for normal text):
 *   ink-0 #eef3ea  / surface-0 #0e1712 → 16.2:1
 *   ink-1 #c7d0c2  / surface-0 #0e1712 → 11.5:1   ink-1 / surface-1 → 10.6:1
 *   ink-2 #93a390  / surface-0 #0e1712 →  6.9:1   ink-2 / surface-1 →  6.3:1
 *   accent #5fc24a / surface-0 #0e1712 →  8.1:1   accent / surface-1 → 7.4:1
 *   accent-deep #8fe07c / surface-1 #142019 → 10.5:1 (icons/links on card bg)
 *   accent-ink #0b1710 / accent #5fc24a → 8.1:1 (text on the accent-filled
 *     range-selector button); accent-ink / accent-deep #8fe07c → 11.5:1
 *     (text on the "live" status/tag badges, which use accent-deep as their
 *     background)
 *   risk-watch #e0ab3a / surface-1 → 8.0:1   risk-high #e4703c / surface-1
 *     → 5.3:1   risk-severe #ef5b3f / surface-1 → 5.0:1 (all lifted from
 *     their light-theme values, which drop to ~2.8:1–3.0:1 unchanged on a
 *     dark ground — see StatusPill/HeroGauge "cached"/"demo" labels)
 */
:root[data-theme="dark"] {
  --surface-0: #0e1712;
  --surface-1: #142019;
  --surface-2: #1c2b22;
  --ink-0: #eef3ea;
  --ink-1: #c7d0c2;
  --ink-2: #93a390;
  --accent: #5fc24a;
  --accent-ink: #0b1710;
  --accent-deep: #8fe07c;
  --line: #2c3a31;

  --risk-low: #57b843;
  --risk-watch: #e0ab3a;
  --risk-high: #e4703c;
  --risk-severe: #ef5b3f;

  --chart-night: rgb(255 255 255 / 0.07);

  --shadow-1: 0 24px 60px -24px rgb(0 0 0 / 0.6);
  --shadow-2: 0 6px 18px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0e1712;
    --surface-1: #142019;
    --surface-2: #1c2b22;
    --ink-0: #eef3ea;
    --ink-1: #c7d0c2;
    --ink-2: #93a390;
    --accent: #5fc24a;
    --accent-ink: #0b1710;
    --accent-deep: #8fe07c;
    --line: #2c3a31;

    --risk-low: #57b843;
    --risk-watch: #e0ab3a;
    --risk-high: #e4703c;
    --risk-severe: #ef5b3f;

    --chart-night: rgb(255 255 255 / 0.07);

    --shadow-1: 0 24px 60px -24px rgb(0 0 0 / 0.6);
    --shadow-2: 0 6px 18px rgb(0 0 0 / 0.35);

    color-scheme: dark;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}