/*
  Lake Ontario (Lake America) Map, final design tokens
  Base: candidate map-3 "modern minimal, maritime" (winner), corrected and
  extended with the per-metric data accents and beach status colors that
  candidates map-1 and map-2 proved out.

  Corrections applied to the map-3 original:
  1. --ink-faint darkened in light mode (#7c8a90 -> #5f6d74) and lightened in
     dark mode (#728086 -> #7f8d93) so micro text passes WCAG AA 4.5:1.
  2. Added --data-temp / --data-level / --data-wave / --data-wind metric
     accents (from map-1), retuned to sit inside this maritime palette.
  3. Added full beach status set (open / advisory / closed / unknown, each
     with a soft tint) from map-1 and map-2; map-3 only had --status-live.
  4. Comment punctuation cleaned per the no long dashes rule.
  5. Light-mode --accent, --accent-strong, --data-level, --status-open,
     --status-advisory, and --status-unknown darkened so each meets WCAG AA
     4.5:1 against the map background --bg-sunken (#eee9dd).

  Pattern: light values on bare :root; dark values twice, once under
  prefers-color-scheme guarded with :not([data-theme="light"]) and once
  under [data-theme="dark"], so the manual toggle wins in both directions.
*/

:root {
  /* ---- Color: light (default) ---- */
  --bg: #f6f4ee;              /* warm paper */
  --bg-raised: #ffffff;       /* cards, panels */
  --bg-sunken: #eee9dd;       /* recessed panels, map placeholder */
  --bg-inverse: #101c24;

  --ink: #101c24;             /* deep navy ink, primary text */
  --ink-soft: #47565e;        /* secondary text */
  --ink-faint: #5f6d74;       /* tertiary and meta text, AA at 12px */
  --ink-on-primary: #f6f4ee;

  --line: #ddd6c6;            /* hairline borders on paper */
  --line-strong: #c7bfab;

  --primary: #0e5f6b;         /* deep teal */
  --primary-strong: #0a4750;
  --primary-soft: #dfeceb;    /* teal tint for chips and backgrounds */

  --accent: #9f4a29;          /* rust, signal flag orange, highlights only; 4.97:1 on --bg-sunken */
  --accent-strong: #7d3a20;
  --accent-soft: #f2e2d6;

  /* Per-metric data accents (stat tiles, sparklines, map layer swatches) */
  --data-temp: #16697f;
  --data-level: #28714a;
  --data-wave: #565a9e;
  --data-wind: #8a5a1e;

  /* Live indicator */
  --status-live: #2e8b57;
  --status-live-soft: #e1efe4;

  /* Beach and advisory status */
  --status-open: #2a6f46;
  --status-open-soft: #e2f0e6;
  --status-advisory: #7d5a15;
  --status-advisory-soft: #f4e8cd;
  --status-closed: #a03a2a;
  --status-closed-soft: #f6e2dd;
  --status-unknown: #56646b;
  --status-unknown-soft: #e8ecee;

  --focus-ring: #0e5f6b;

  --shadow-sm: 0 1px 2px rgba(16, 28, 36, 0.06);
  --shadow-md: 0 6px 20px rgba(16, 28, 36, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 28, 36, 0.12);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 2.15rem + 2.6vw, 4.75rem);
  --text-h1: clamp(2.1rem, 1.75rem + 1.6vw, 3.15rem);
  --text-h2: clamp(1.55rem, 1.35rem + 0.9vw, 2.15rem);
  --text-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --text-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;
  --text-stat: clamp(2.4rem, 1.9rem + 2vw, 4rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.14em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --container-max: 74rem;
  --container-narrow: 46rem;

  --border-hairline: 1px solid var(--line);
}

/* ---- Color: dark, system preference ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a141a;
    --bg-raised: #101d25;
    --bg-sunken: #0d1920;
    --bg-inverse: #f6f4ee;

    --ink: #eef2ef;
    --ink-soft: #a9b8bd;
    --ink-faint: #7f8d93;
    --ink-on-primary: #06171b;

    --line: #1f2e35;
    --line-strong: #2c3f47;

    --primary: #6bd3d9;
    --primary-strong: #9be4e8;
    --primary-soft: #12333a;

    --accent: #e58a5c;
    --accent-strong: #f2a97e;
    --accent-soft: #33241a;

    --data-temp: #5ecbee;
    --data-level: #6fd39c;
    --data-wave: #a3a3e8;
    --data-wind: #e2b26a;

    --status-live: #6ecb93;
    --status-live-soft: #163024;

    --status-open: #5bbf85;
    --status-open-soft: #14301f;
    --status-advisory: #e0ab48;
    --status-advisory-soft: #32270f;
    --status-closed: #e07a5f;
    --status-closed-soft: #371c15;
    --status-unknown: #93a3aa;
    --status-unknown-soft: #1c2a30;

    --focus-ring: #6bd3d9;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
  }
}

/* ---- Color: dark, explicit toggle wins in either direction ---- */
:root[data-theme="dark"] {
  --bg: #0a141a;
  --bg-raised: #101d25;
  --bg-sunken: #0d1920;
  --bg-inverse: #f6f4ee;

  --ink: #eef2ef;
  --ink-soft: #a9b8bd;
  --ink-faint: #7f8d93;
  --ink-on-primary: #06171b;

  --line: #1f2e35;
  --line-strong: #2c3f47;

  --primary: #6bd3d9;
  --primary-strong: #9be4e8;
  --primary-soft: #12333a;

  --accent: #e58a5c;
  --accent-strong: #f2a97e;
  --accent-soft: #33241a;

  --data-temp: #5ecbee;
  --data-level: #6fd39c;
  --data-wave: #a3a3e8;
  --data-wind: #e2b26a;

  --status-live: #6ecb93;
  --status-live-soft: #163024;

  --status-open: #5bbf85;
  --status-open-soft: #14301f;
  --status-advisory: #e0ab48;
  --status-advisory-soft: #32270f;
  --status-closed: #e07a5f;
  --status-closed-soft: #371c15;
  --status-unknown: #93a3aa;
  --status-unknown-soft: #1c2a30;

  --focus-ring: #6bd3d9;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);
}