/* =====================================================================
   PLAYBOOK — theme.css  (prototype v0.2 · Citrine reference · 30 Oct 2026)
   Tokens only. Layout rhythm, type scale and motion timings follow the
   measured Citrine spec (refspec/citrine/reference-spec-citrine.md),
   re-skinned in Playbook's own style: square corners, Anton (display,
   uppercase only) + Archivo, no italics/serif, Blush once per section
   (text on Blush is always ink). Single light theme by design.
   ===================================================================== */

/* Layout concept: paper page, 32px gutter, framed full-bleed media moments
   (12px inset, square) every 2–3 sections, 1px-rule label rows. */
:root {
  color-scheme: light;

  /* ---------- Palette ---------- */
  --pb-ink:   #252422;
  --pb-paper: #F4F4F4;
  --pb-mist:  #EAEAEA;
  --pb-grey:  #5E5E5E;
  --pb-cover: #E0E0E0;
  --pb-white: #FFFFFF;
  --pb-blush: #FFB3C7;

  --bg: var(--pb-paper);
  --fg: var(--pb-ink);
  --muted: var(--pb-grey);
  --tile: var(--pb-mist);
  --card: var(--pb-white);
  --ph: var(--pb-cover);
  --media: var(--pb-grey);
  --scrim: rgb(37 36 34 / 0.45);
  --accent: var(--pb-blush);

  /* ---------- Fonts ---------- */
  --font-display: "Anton", "Archivo Narrow", Impact, "Arial Narrow", sans-serif;
  --font-text: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale: phone (<810) → desktop (1440) ---------- */
  --fs-ticker:     clamp(5rem, 2.6rem + 6.25vw, 9rem);       /* 80 → 144 */
  --fs-display:    clamp(4rem, 2.25rem + 4.9vw, 7rem);       /* 64 → 112 */
  --fs-h2:         clamp(2.5rem, 1.6rem + 2.4vw, 4.5rem);    /* 40 → 72 statements */
  --fs-h3:         clamp(2.25rem, 1.75rem + 1.3vw, 3.5rem);  /* 36 → 56 (Anton) */
  --fs-quote:      clamp(1.5rem, 1.1rem + 1.1vw, 2.5rem);    /* 24 → 40 */
  --fs-card-title: clamp(1.375rem, 1.3rem + 0.2vw, 1.5rem);  /* 22 → 24 */
  --fs-lead:       clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);/* 18 → 20 */
  --fs-body:       1rem;
  --fs-small:      0.8125rem;
  --fs-label:      0.875rem;
  --fs-chip:       0.75rem;

  --ls-h2: -0.03em;
  --ls-tight: -0.02em;
  --ls-label: 0.08em;
  --ls-chip: 0.06em;

  /* ---------- Layout ---------- */
  --container-max: 94rem;   /* 1504 */
  --page-x: 1.25rem;        /* 20 phone */
  --inset: 0rem;            /* framed media inset: 0 phone, 12 desktop */
  --gap: 0.5rem;            /* 8 tile gap */
  --gap-cards-x: 1.25rem;
  --gap-cards-y: 2rem;
  --nav-h: 4.25rem;         /* 68 */
  --section-y: 4rem;        /* 64 phone → 144 desktop */
  --title-gap: 2rem;        /* 32 → 96 */
  --label-gap: 1.5rem;      /* 24 → 72 */
  --stack-top: 5.8rem;      /* 93 */
  --step-drop: 0rem;        /* 176 desktop */

  /* ---------- Buttons ---------- */
  --btn-h: 3rem;
  --btn-icon: 2.25rem;
  --btn-icon-hover: 3.75rem;

  /* ---------- Motion (from the Citrine runtime) ---------- */
  --scroll-duration: 1.4s;                                  /* Lenis, expo-out */
  --ease-expo-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.22, 1, 0.36, 1);        /* spring, bounce 0 */
  --ease-spring-pop: cubic-bezier(0.34, 1.36, 0.64, 1);     /* spring, bounce 0.2–0.4 */
  --ease-in-out:     cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 400ms;
  --dur-text: 400ms;
  --dur-reveal: 600ms;
  --dur-reveal-lg: 1000ms;
  --dur-hero-scale: 700ms;
  --stagger-line: 75ms;
  --stagger-item: 100ms;
  --delay-text: 200ms;
  --marquee-duration: 40s;
}

@media (min-width: 810px) {
  :root {
    --page-x: 2rem; --inset: 0rem; --section-y: 6rem;
    --title-gap: 4rem; --label-gap: 3rem; --gap-cards-x: 1.5rem;
  }
}
@media (min-width: 1280px) {
  :root {
    --section-y: 9rem; --title-gap: 6rem; --label-gap: 4.5rem;
    --gap-cards-x: 2rem; --gap-cards-y: 3rem; --step-drop: 11rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms; --dur-text: 0ms; --dur-reveal: 0ms; --dur-reveal-lg: 0ms;
    --dur-hero-scale: 0ms; --stagger-line: 0ms; --stagger-item: 0ms; --delay-text: 0ms;
    --scroll-duration: 0s;
  }
}