/*
  cookiefail design tokens. A claymation Christmas world: cranberry and pine
  slabs on hand-pressed cream clay, chunky hard shadows, no rounded corners,
  and motion that runs at 12 frames a second like real stop-motion.
*/
:root {
  --c-ink: #2a150b;
  --c-paper: #fff5e2;
  --c-surface: #fffaf0;
  --c-surface-2: #ffe4a3;
  --c-muted: #5b3a28;
  --c-line: #2a150b;

  --c-red: #b3172a;
  --c-red-deep: #7c0d1b;
  --c-red-ink: #fff5e2;
  --c-green: #0f4c37;
  --c-green-ink: #fff5e2;
  --c-gold: #ffc23a;
  --c-gold-ink: #2a150b;
  --c-cookie: #d9a066;
  --c-frost: #e6f1f4;

  --c-ok: #0f4c37;
  --c-warn: #a35b00;
  --c-danger: #a30d24;
  --c-focus: #1f6fd6;

  --c-primary: var(--c-red);
  --c-primary-ink: var(--c-red-ink);
  --c-secondary: var(--c-green);
  --c-secondary-ink: var(--c-green-ink);

  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-base: 19px;
  --fs-small: 0.89rem;
  --fs-h1: clamp(2.2rem, 10vw, 3.1rem);
  --fs-h2: clamp(1.6rem, 7vw, 2.2rem);
  --fs-h3: 1.3rem;
  --lh-body: 1.45;
  --lh-tight: 1;
  --tracking-display: -0.01em;
  --stretch-display: 82%;

  --radius: 0;
  --border-w: 3px;
  --border: var(--border-w) solid var(--c-line);
  --shadow-offset: 6px;
  --shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--c-ink);
  --shadow-press: 2px 2px 0 var(--c-ink);

  --gutter: 16px;
  --gap: 14px;
  --max-w: 540px;
  --tap: 60px;
  --tap-huge: 92px;

  /* Motion: one drawing every two film frames at 24fps */
  --frame: 83ms;
  --ease: steps(4, end);
  --dur-fast: 83ms;
  --dur: 250ms;
  --dur-slow: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}