/* Heft tokens — Spiegel von website/design/heft/tokens.json (MASTER). */
:root {
  --color-paper: #f4f0e6;
  --color-paper-raised: #fffcf6;
  --color-ink: #1a2416;
  --color-ink-muted: #4a5544;
  --color-forest: #173404;
  --color-forest-soft: #27500a;
  --color-moss: #3d6b14;
  --color-amber: #8a5610;
  --color-spree: #1b5f9a;
  --color-spree-hover: #134a78;
  --color-rule: rgb(26 36 22 / 14%);
  --color-focus: #1b5f9a;
  --color-error: #8b1e1e;
  --color-error-bg: #f8e8e4;
  --color-disabled: rgb(26 36 22 / 38%);
  --color-inverse: #fffcf6;
  --color-inverse-muted: rgb(255 252 246 / 78%);
  --color-wash-moss: rgb(61 107 20 / 8%);
  --color-wash-spree: rgb(27 95 154 / 8%);

  --font-heading: "Source Serif 4", "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;

  --text-kicker: 0.8125rem;
  --text-kicker-tracking: 0.08em;
  --text-hint: 0.8125rem;
  --text-body: 1.125rem;
  --text-small: 0.9375rem;
  --text-lead: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --text-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --text-h2: clamp(1.85rem, 1.4rem + 1.8vw, 2.75rem);
  --text-h1: clamp(2.4rem, 1.5rem + 4.2vw, 4.5rem);
  --text-quote: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-page-x: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --space-section-y: clamp(3.5rem, 2.8rem + 3vw, 6.5rem);
  --space-touch: 44px;

  --content-max: 1240px;
  --gutter: var(--space-4);

  --radius-sm: 2px;
  --radius-md: 4px;

  --elevation-1: 0 0 0 1px rgb(26 36 22 / 14%);
  --elevation-2: 0 0 0 1px rgb(26 36 22 / 12%), 0 18px 40px rgb(26 36 22 / 12%);

  /* Motion — Spec: website/design/heft/MOTION.md */
  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --duration-slow: 520ms;
  --duration-sway: 9s;
  --duration-drift: 32s;
  --duration-flow-front: 17s;
  --duration-flow-mid: 24s;
  --duration-flow-back: 34s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-stagger: 80ms;
  --motion-rise: 16px;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0 0.08  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (min-width: 720px) {
  :root {
    --gutter: var(--space-5);
  }
}