@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Base */
  --bg: #f4ede2;
  --ink: #1f1a16;
  --muted: #6b5d50;
  --line: rgba(42, 34, 28, 0.18);

  /* Accent palette — five-tier */
  --accent-1: #2c3a2e;  /* forest green — foundation */
  --accent-2: #4a5c3a;  /* sage — growth */
  --accent-3: #b8732a;  /* tan — PRIMARY brand accent, use for CTAs */
  --accent-4: #c5562a;  /* ember — secondary action */
  --accent-5: #8a2a1f;  /* deep red — warnings */

  /* Fonts */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter Tight', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 100px;

  /* ----------------------------------------------------------
     Typography scale — locked. Every heading/body/eyebrow size
     in components.css MUST come from these tokens. Adding a new
     visual size requires adding a new token here first; never
     override h1/h2/h3 sizes with inline pixel values. See RULES.md §11.
     ---------------------------------------------------------- */
  --type-h1-size: clamp(40px, 6.5vw, 68px);
  --type-h1-line: 1.05;
  --type-h1-tracking: -0.02em;

  --type-h2-size: clamp(28px, 4vw, 38px);
  --type-h2-line: 1.1;
  --type-h2-tracking: -0.02em;

  --type-h3-size: 24px;
  --type-h3-line: 1.2;
  --type-h3-tracking: -0.01em;

  --type-subtitle-size: clamp(17px, 2vw, 19px);
  --type-subtitle-line: 1.5;

  --type-body-size: 15px;
  --type-body-line: 1.55;

  --type-eyebrow-size: 11px;
  --type-eyebrow-tracking: 0.32em;

  --type-mono-size: 13px;

  /* Motion — the brand curve. Never use linear or ease. */
  --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1);
}