/* Design tokens. Rules: docs/DESIGN-TOKENS.md */
@font-face {
  font-family: Geist;
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F4EFE6;
  --shelf: #E8E0D2;
  --shelf-deep: #DDD3C2;
  --navy: #1F2A44;
  --pencil: #5A6275;
  --marigold: #F2B632;
  --on-navy: #F4EFE6;
  --on-navy-muted: #D9D4CA;
  --focus: #1F2A44;
  --ink: var(--navy);
  --muted: var(--pencil);
  --card: var(--shelf);
  --stage: var(--navy);
  --on-stage: var(--on-navy);
  --on-stage-muted: var(--on-navy-muted);
  --action: var(--navy);
  --action-hover: var(--navy);
  --line: var(--shelf);
  --font: Geist, sans-serif;
  --radius-media: 16px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-inner: 8px;
  --radius-tag: 4px 10px 10px 4px;
  --radius-pill: 999px;
  --border-strong: 3px solid var(--navy);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 40px;
  --s-10: 48px;
  --s-11: 56px;
  --s-12: 64px;
  --s-13: 72px;
  --s-14: 96px;
  --max: 1320px;
  --gutter: 40px;
  --header: 64px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
}