/* tokens.css
 * Design tokens for the Snow Peak × Ophelia portfolio deck.
 * Locked palette per Deck-Script.md.
 */

:root {
  /* ── color: snow peak palette ──────────────────────────────
   * Six tones, strict roles.
   *   paper   default ground
   *   sumi    body ink AND full-bleed dark slides
   *   mist    hairlines, secondary text, atmospheric sky
   *   river   Act I chapter mark, water tone, blue accent on paper
   *   moss    Act II chapter mark, field tone, green accent on paper
   *   copper  firelight — appears ONLY against sumi, never on paper
   */
  --paper:   #fbfaf6;
  --paper-2: #f1ece1;          /* hairlines, subtle separators on paper */
  --paper-3: #e5dfd0;          /* muted shapes on paper */

  --sumi:    #1a1816;          /* body ink + full-bleed dark ground */
  --sumi-2:  #25221d;          /* dark slide secondary plane */
  --sumi-3:  #322e27;          /* dark slide hairline */

  --mist:    #a8b8c2;          /* sky / hairlines on paper */
  --mist-soft: rgba(168, 184, 194, 0.42);

  --river:   #5a7a8a;          /* Act I accent / water */
  --moss:    #3a4a3c;          /* Act II accent / field */
  --copper:  #b8662e;          /* sumi-only firelight */

  /* ── legacy aliases (do not introduce new uses) ─────────── */
  --coal:    var(--sumi);
  --coal-2:  var(--sumi-2);
  --coal-3:  var(--sumi-3);
  --ink:     var(--sumi);
  --ink-soft: rgba(26, 24, 22, 0.66);
  --ink-mute: rgba(26, 24, 22, 0.42);
  --paper-soft: rgba(251, 250, 246, 0.78);
  --paper-mute: rgba(251, 250, 246, 0.52);
  --blue:    var(--river);
  --ember:   var(--copper);    /* still spelled --ember in legacy rules; rule must live on sumi */

  /* ── type families ─────────────────────────────────────── */
  --font-serif: var(--font-sans);
  --font-sans:  "Space Grotesk", -apple-system, BlinkMacSystemFont,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── type scale (fluid where it earns it) ──────────────── */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    clamp(26px, 2.4vw, 32px);
  --t-2xl:   clamp(34px, 3.4vw, 46px);
  --t-3xl:   clamp(48px, 5.2vw, 72px);
  --t-display: clamp(64px, 9vw, 132px);

  /* ── line-height ───────────────────────────────────────── */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.65;
  --lh-prose:  1.55;

  /* ── tracking ──────────────────────────────────────────── */
  --tr-mono:   0.16em;          /* mono-caps chrome */
  --tr-mono-tight: 0.10em;
  --tr-tight: -0.012em;
  --tr-snug:  -0.005em;

  /* ── spacing scale ─────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ── layout ────────────────────────────────────────────── */
  --slide-pad-x: clamp(36px, 5.5vw, 104px);
  --slide-pad-y: clamp(56px, 7vw, 120px);
  --measure-narrow: 52ch;
  --measure-mid:    62ch;
  --measure-wide:   84ch;
  --rule-width: 1px;

  /* ── motion ────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 220ms;
  --dur-2: 420ms;
  --dur-3: 720ms;

  /* ── chrome heights (used by base.css for safe-area math) ─ */
  --chrome-top:    52px;
  --chrome-bottom: 60px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}