/* ============================================================================
   HEARTH TABLE — design-token layer (CAP-2 / FR-2).
   Warm-dark Frosthaven frontier; dark-first; phone-first; season-skinned.

   Single source of truth: every screen styles itself ONLY from these tokens
   ("no hardcoded hex/px where a token exists" — enforced by review). All COLOR
   tokens are season-scoped on [data-season="summer"|"winter"] — flipping that
   one attribute on the document root repaints the whole app with no
   per-component overrides. Non-color tokens (space / radii / type / motion /
   layout) live on :root.

   Values are extracted verbatim from design/skeleton-hearth.html (the
   pixel-fidelity mockup). Companion reference: client/seasons.js mirrors the
   [data-season] blocks and a test keeps the two in lock-step.
   ========================================================================== */

/* ---------- TOKENS · SUMMER (default / Hearth) ---------- */
[data-season="summer"] {
  --bg: #15110b; --surface: #201a12; --sunk: #191309; --raised: #262017;
  --line: #352c1f; --line-soft: #2a2218;
  --ink: #f1e7d6; --ink-2: #d9ccb6; --mut: #a8967c; --faint: #776550;
  --accent: #f0883e; --accent-2: #dd6f27;
  --accent-wash: rgba(240,136,62,.12); --accent-bd: rgba(240,136,62,.28);
  --mint: #69d6bf; --gold: #e7b659;
  --good: #86d98e; --bad: #ef7066;
  --glow: #241a10;
  --warm-bg: #2c2114; --warm-bd: #3d2f1c;
  --face1: #3a2614; --face2: #2a1c0f; --face-bd: #46301a;
  --art-a: #221a11; --art-b: #1c1610;
  --on-accent: #1a1208; /* ink-on-accent: text/glyph over an --accent fill (buttons, badges) */
  --season-ico: "☀"; --season-name: "Summer";
}

/* ---------- TOKENS · WINTER (Frost) ---------- */
[data-season="winter"] {
  --bg: #0b1016; --surface: #141b23; --sunk: #0d141b; --raised: #1a2331;
  --line: #243240; --line-soft: #1b2632;
  --ink: #e9f1f8; --ink-2: #c3d3e0; --mut: #8497a8; --faint: #566776;
  --accent: #54b7ea; --accent-2: #3a9fd6;
  --accent-wash: rgba(84,183,234,.12); --accent-bd: rgba(84,183,234,.30);
  --mint: #7fe0d6; --gold: #cde0f0;
  --good: #86d9b0; --bad: #ef8076;
  --glow: #13202c;
  --warm-bg: #172634; --warm-bd: #234055;
  --face1: #16303f; --face2: #102330; --face-bd: #234e63;
  --art-a: #111c26; --art-b: #0e1822;
  --on-accent: #06151f; /* ink-on-accent (cool skin) */
  --season-ico: "❄"; --season-name: "Winter";
}

/* ---------- NON-COLOR TOKENS (season-agnostic) ---------- */
:root {
  /* radii */
  --r-sm: 9px; --r-md: 13px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  /* space scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  /* type */
  --disp: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* layout — --shell-max caps the app on screens wider than the phone (Story 8.3 / U-03).
     It is the app's FIRST width of any kind: nothing in the PRD, architecture, design system or
     the design/*.html mockups specifies one (those are all phone frames at 316–390px, and their
     own max-widths are gallery chrome around them). 720px ≈ 2× the 390px design canvas, which
     puts the Catalog at 6 columns of ~107px — the same tile size as the phone, six times as many
     of them. Consumed by .shell-top, #view and .tab; the tab BAR stays full-bleed. */
  --pad: 18px; --tabbar: 62px; --tap: 44px; --shell-max: 720px;
  /* motion (0.16–0.4s ease; honor prefers-reduced-motion below) */
  --motion-fast: .16s; --motion-mid: .24s; --motion-slow: .4s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Shared "reveal" rise-on-mount idiom for cards/sections (later component stories
   consume it, e.g. `animation: reveal var(--motion-mid) var(--ease)`). */
@keyframes reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility — kill all motion when the user asks for it (mockup contract). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}