/* ============================================================================
   Press Esc — tokens.css
   Design tokens only. Components (main.css) consume these and never raw hex,
   so re-theming touches one file. See docs/SYSTEM.md.
   ========================================================================== */
:root {
  /* ---- core palette ---- */
  --ink: #171417;
  --canvas: #F2ECDD;
  --moss: #0F4B3F;
  --berry: #F04D66;
  --accent: #F04D66;
  --gold: #F2B544;
  --electric: #3155D9;
  --sky: #98C9D3;

  /* ---- surfaces ---- */
  --paper: #F8F2E6;          /* specimen plates */
  --canvas-warm: #E5D8C2;    /* recessed warm tint / stripes */
  --bg-primary: var(--canvas);
  --bg-elevated: #FFFDF8;
  --bg-recessed: #E8DECC;

  /* ---- text ---- */
  --text-primary: var(--ink);
  --text-secondary: #584F59;             /* AA on canvas */
  --text-inverse: #F6F1E7;
  --text-inverse-soft: rgba(246, 241, 231, .62);

  /* ---- lines ---- */
  --border-subtle: rgba(25, 18, 33, .12);
  --border-strong: rgba(25, 18, 33, .22);

  /* ---- type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-spec: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.6rem, 5.6vw, 5.4rem);
  --fs-section: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.02rem, 1.3vw, 1.22rem);
  --fs-body: 1rem;
  --fs-caption: .82rem;

  /* ---- shape ---- */
  --r-plate: 4px;
  --r-panel: 14px;
  --r-pill: 999px;

  /* ---- space scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 72px;
  --s-8: 112px;

  /* ---- motion ---- */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-press: cubic-bezier(.34, 1.56, .64, 1);
  --reveal-dist: 16px;

  /* ---- misc ---- */
  --header-h: 66px;
  --maxw: 1200px;
  --shadow-panel: 0 18px 50px -24px rgba(25, 18, 33, .45);
  --shadow-header: 0 1px 0 var(--border-subtle);
  --focus: 0 0 0 3px rgba(240, 77, 102, .32);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --reveal-dist: 0px;
  }
}