/* Theme tokens - the ONLY place colours are defined.
 *
 * Three layers, applied in this order:
 *   1. Base brand + appearance  (this file)   :root  /  :root[data-mode="dark"]
 *   2. Season                    (seasons.css) :root[data-season=x]  /  ...[data-mode="dark"][data-season=x]
 *   3. Components read tokens only (no hard-coded colours outside photo overlays).
 *
 * <html data-mode> is the RESOLVED appearance ("light" | "dark"), set by
 * js/theme-boot.js before first paint from the member's choice (Light / Dark /
 * System) - so CSS never needs prefers-color-scheme. */

:root {
  color-scheme: light;

  /* Surfaces & text (light: warm white, ink type) */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f3f0eb;
  --surface-3: #ebe6df;
  --line: #e6e1d9;
  --line-strong: #d6cfc4;
  --ink: #1a1714;
  --ink-2: #4a443d;
  --muted: #736b61;
  --on-ink: #ffffff;

  /* Brand accent (seasons override these four + the season-* extras) */
  --brand: #f2a93b;
  --brand-ink: #3b2603;        /* text/icons ON --brand */
  --brand-soft: #fdf1dc;
  --brand-soft-ink: #7a4a06;   /* text/icons ON --brand-soft */
  --season-2: #e07a2e;         /* secondary decoration colour */
  --season-3: #c9a227;         /* tertiary decoration colour */
  --season-line: var(--brand); /* the thin accent under the nav */

  /* Status */
  --ok: #187a50;   /* status text >= 4.5:1 on its -soft, --surface, --bg, --surface-2 */
  --ok-soft: #e3f4ec;
  --warn: #9a520a;
  --warn-soft: #fcefdf;
  --bad: #b8323a;
  --bad-soft: #fbe6e7;
  --star: #e29a1d;

  --shadow-1: 0 1px 2px rgba(26, 23, 20, .06), 0 4px 14px rgba(26, 23, 20, .06);
  --shadow-hover: 0 2px 6px rgba(26, 23, 20, .06), 0 12px 28px rgba(26, 23, 20, .10);
  --shadow-2: 0 10px 40px rgba(26, 23, 20, .16), 0 2px 8px rgba(26, 23, 20, .08);
  --shadow-nav: 0 1px 0 var(--line), 0 6px 20px rgba(26, 23, 20, .06);
  --scrim: rgba(18, 15, 12, .45);
  --nav-glass: rgba(250, 248, 245, .88);

  /* Shape - restrained: controls 10, cards 14, sheets 20; pills only for chips/badges */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Spacing scale (4-pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* Type scale */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: clamp(32px, 4.6vw, 52px);
  --lh-tight: 1.12; --lh-snug: 1.3; --lh: 1.5;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);          /* standard / exit */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* entrances */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* small confirmations (badge bump) */
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 420ms;

  /* Focus ring: --focus is the season's brand text colour (dark in light mode, bright
   * in dark mode), >= 5:1 against every surface in every season; the 2px --surface gap
   * keeps the ring distinct on brand-filled controls. */
  --focus: var(--brand-soft-ink);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --font: "Inter", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max: 1200px;
  --gutter: 16px;
  --nav-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --nav-h: 72px; }
}

/* Dark: designed, not inverted - deep charcoal, lifted surfaces, borders over shadows. */
:root[data-mode="dark"] {
  color-scheme: dark;

  --bg: #121110;
  --surface: #1b1a18;
  --surface-2: #24221f;
  --surface-3: #2e2b27;
  --line: #2f2c28;
  --line-strong: #3d3934;
  --ink: #f4f1ec;
  --ink-2: #cfc9c0;
  --muted: #a39b91;
  --on-ink: #121110;

  --brand: #f5b553;
  --brand-ink: #2a1b02;
  --brand-soft: #3a2a10;
  --brand-soft-ink: #f5c272;
  --season-2: #f09a55;
  --season-3: #e3be47;

  --ok: #4cc38a;
  --ok-soft: #173326;
  --warn: #f0a356;
  --warn-soft: #3a2812;
  --bad: #f07178;
  --bad-soft: #3d1b1e;
  --star: #f0b23e;

  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .02), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 26px rgba(0, 0, 0, .45);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-nav: 0 1px 0 var(--line), 0 8px 24px rgba(0, 0, 0, .35);
  --scrim: rgba(0, 0, 0, .62);
  --nav-glass: rgba(18, 17, 16, .86);
}

/* Switching appearance cross-fades colours briefly (theme-boot adds the class for
 * ~300 ms only, so normal interactions are never slowed). */
:root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after {
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, fill 250ms ease, stroke 250ms ease !important;
}