/* design-tokens.css
   Single source of truth for atomic design values.
   Values per DESIGN_VOICE.md §5 (colors), §6 (typography),
   §9 (layout), §4 (motion).
*/

/* Self-hosted Inter + Fraunces variable fonts. Files in
   public/static/fonts/ (copied from the @fontsource-variable/ npm
   packages — same files the React SPA bundles). Latin subset only —
   English-only site. Loaded here so every public/ surface that
   imports design-tokens.css (sprint.css, legal pages, etc.) inherits
   font-loading automatically. The homepage uses an inline copy of
   these declarations in public/index.html's <style> block because it
   doesn't <link> external stylesheets. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/static/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ====================================
     COLORS — DESIGN_VOICE.md §5.1
     ==================================== */
  --paper: #ffffff;
  --paper-soft: #fafafa;
  --paper-translucent: rgba(255, 255, 255, 0.6);
  --ink-1: #0a0a0a;
  --ink-2: #525252;
  --ink-3: #a3a3a3;
  --ink-4: #d4d4d4;
  --border: #ededed;
  --dr-yellow: #ffd84d;
  --dr-yellow-soft: rgba(255, 216, 77, 0.18);
  --bloom-amber: rgba(255, 178, 71, 0.20);
  --dr-red: #cc2228;
  --dr-red-soft: rgba(204, 34, 40, 0.06);
  --dr-red-hover: #b01e23;
  --dr-red-shadow: #8b1a1a;

  /* ====================================
     TYPOGRAPHY — DESIGN_VOICE.md §6.1 + §6.3
     ==================================== */
  --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces Variable', 'Fraunces', 'Charter', 'Georgia', serif;

  --type-display: clamp(40px, 6vw, 64px);
  --type-h2: clamp(28px, 4vw, 40px);
  --type-h3: clamp(22px, 2.6vw, 28px);
  --type-subhead-serif: clamp(20px, 2.2vw, 26px);
  --type-pullquote: clamp(22px, 2.6vw, 28px);
  --type-body-large: 18px;
  --type-body: 17px;
  --type-detail: 15px;
  --type-small: 14px;
  --type-micro: 13px;
  --type-caption: 12px;
  --type-legal: 11px;

  /* ====================================
     SPACING — DESIGN_VOICE.md §9.1
     ==================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ====================================
     LAYOUT — DESIGN_VOICE.md §9.2
     ==================================== */
  --content-width: 720px;
  --wide-width: 1080px;

  /* ====================================
     MOTION — DESIGN_VOICE.md §4 (forward-looking)
     ==================================== */
  --motion-marker-drag: 1.6s;
  --motion-flip: 0.65s;
  --motion-flip-opacity: 0.45s;
  --motion-utilitarian: 0.25s;
  --motion-button-feedback: 0.18s;
  --motion-color-invert: 0.15s;
  --motion-beam-loop: 3.5s;
  --motion-dot-pulse: 2.4s;
  --ease-human: cubic-bezier(0.55, 0.1, 0.45, 0.9);
  --ease-flip: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default: ease;

  /* ====================================
     LAYERING
     ==================================== */
  --z-atmosphere: -1;
  --z-content: 1;
  --z-nav: 50;
}