/* Design tokens - GR20-M3-SITE-SPEC.md §1 + GR20-M5-VISUAL-SPEC.md §2. One file,
   custom properties only. Light values default on :root; dark applies under BOTH an
   explicit choice (html[data-theme="dark"], set pre-paint by theme-init.js) AND OS
   preference when no explicit choice. Status colors are semantic and never the only
   signal - every use pairs them with a text label. */

:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --secondary: #52514e;
  /* a11y-2026-07-21: was #898781 (3.41:1 on --page, 3.50:1 on --surface, both below
     the 4.5:1 body-text floor - this token backs footer text, form labels and
     board-count). Nudged darker only; hue held. */
  --muted: #73716c;
  --hairline: #e1e0d9;
  --ring: rgba(11, 11, 11, .10);

  /* a11y-2026-07-21: was #2a78d6 (4.19:1 on --page / 4.30:1 on --surface as link
     text, and only 4.42:1 for --accent-ink-on-accent CTA buttons - all below 4.5:1).
     Nudged darker only; --accent-hover (#1c5cab) stays visibly distinct/darker still. */
  --accent: #266ec4;
  --accent-hover: #1c5cab;
  --accent-ink: #ffffff;

  --status-available: #0ca30c;
  --status-limited: #fab219;
  --status-full: #898781;
  --status-full-bg: #eceae3;
  --status-unknown: var(--muted);
  --status-available-text: #06590a;
  --status-limited-text: #6b4a00;

  --danger: #a13a2e;

  --max-width: 1080px;
  --content-width: 720px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --duration-fast: 120ms;
  --duration-med: 240ms;
  --duration-slow: 360ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Explicit choice pins color-scheme (form controls, scrollbars, UA widgets);
   auto keeps site.css's `color-scheme: light dark`. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ========================= DARK TOKEN SETS - SYNC WARNING =========================
   The two blocks below MUST stay byte-identical in their bodies (CSS has no include;
   one selector must sit inside @media). 1: explicit choice. 2: OS-dark + no explicit
   light choice. Change a dark value -> change it in BOTH. Same rule for the per-area
   dark accent blocks at the bottom of this file. =================================== */
:root[data-theme="dark"] {
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --secondary: #c3c2b7;
  --muted: #898781;
  --hairline: #2c2c2a;
  --ring: rgba(255, 255, 255, .10);

  --accent: #3987e5;
  --accent-hover: #5c9fec;
  --accent-ink: #0b0b0b;

  --status-full-bg: #232320;
  --status-available-text: #7ee787;
  --status-limited-text: #ffce6b;

  /* a11y-2026-07-21: light --danger (#a13a2e) is only 2.92:1 on dark --page - well
     below 4.5:1 (errors box, field-hint-error, remove-row/cancel buttons). Lightened
     for dark mode only; same hue family. */
  --danger: #ee5544;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --secondary: #c3c2b7;
    --muted: #898781;
    --hairline: #2c2c2a;
    --ring: rgba(255, 255, 255, .10);

    --accent: #3987e5;
    --accent-hover: #5c9fec;
    --accent-ink: #0b0b0b;

    --status-full-bg: #232320;
    --status-available-text: #7ee787;
    --status-limited-text: #ffce6b;

    /* a11y-2026-07-21: light --danger (#a13a2e) is only 2.92:1 on dark --page - well
       below 4.5:1 (errors box, field-hint-error, remove-row/cancel buttons). Lightened
       for dark mode only; same hue family. */
    --danger: #ee5544;
  }
}

/* prefers-reduced-motion is handled centrally here so every component that opts into
   a transition/animation can gate it in one place instead of re-declaring the query. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-med: 0ms;
    --duration-slow: 0ms;
  }
}

/* Per-region accent identity: Corsica = brand blue, Italy green, France violet -
   every accent-colored element (CTAs, links, chips, region bar, panorama layers,
   trail fill) recolors per area via the body class alone. Ink stays white-on-accent
   in light mode for all three (green 4.7:1, violet 8.1:1). SAME DUAL-SELECTOR SYNC
   RULE as the root dark blocks above. */
.area-rifugi { --accent: #008300; --accent-hover: #006300; }
.area-ffcam { --accent: #4a3aa7; --accent-hover: #3b2e86; }
:root[data-theme="dark"] .area-rifugi { --accent: #0ca30c; --accent-hover: #2fbf2f; }
:root[data-theme="dark"] .area-ffcam { --accent: #9085e9; --accent-hover: #a89ef0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .area-rifugi { --accent: #0ca30c; --accent-hover: #2fbf2f; }
  :root:not([data-theme="light"]) .area-ffcam { --accent: #9085e9; --accent-hover: #a89ef0; }
}