/* Tokens — generated from DESIGN.md. Components must reference these via var(). */

:root {
  /* — Color — */
  --bg: #FAFAF7;
  --bg-soft: #F2F2EE;
  --bg-card: #FFFFFF;

  --ink: #0F1419;
  --ink-soft: #2F353D;
  --ink-muted: #6B7280;
  --ink-faint: #9CA3AF;

  --rule: #E5E5E0;
  --rule-soft: #EFEFEA;

  --blue: #2563EB;
  --blue-bright: #3B82F6;
  --blue-soft: #DBEAFE;
  --blue-faint: #EFF4FF;

  --green: #047857;
  --green-soft: #D1FAE5;
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --red: #B91C1C;
  --red-soft: #FEE2E2;

  --frost: #6B7280;
  --frost-soft: #F3F4F6;

  /* — Typography — */
  /* Inter Tight + Inter delivered via system stack fallback for v0; web font
     loading is added in slice A3 with self-hosted woff2 in /static/fonts/. */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-display-hero: clamp(40px, 6.2vw, 84px);
  --text-display-section: clamp(32px, 4vw, 52px);
  --text-body: 16px;
  --text-body-dense: 15px;
  --text-secondary: 14px;
  --text-tertiary: 13px;
  --text-mono-eyebrow: 11px;
  --text-mono-data: 12px;

  --leading-display: 1.05;
  --leading-body: 1.55;

  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.06em;
  --tracking-status: 0.04em;

  /* — Geometry — */
  --radius-card: 4px;
  --radius-card-hero: 6px;
  --radius-pill: 2px;

  --border-1: 1px;

  /* — Spacing scale (4-step) — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;
  --space-30: 120px;

  /* — Shadows — */
  --shadow-card-hover: 0 8px 24px rgba(15, 20, 25, 0.06);
  --shadow-hero-card: 0 1px 0 var(--rule-soft), 0 12px 32px rgba(15, 20, 25, 0.04);
  --shadow-modal: 0 16px 48px rgba(15, 20, 25, 0.12);

  /* — Motion — */
  --motion-hover: 0.15s ease;
  --motion-entrance: 0.6s ease;
  --motion-pulse: 1.8s ease-in-out;
  --motion-shimmer: 1.4s linear;

  /* — Layout — */
  --breakpoint-app: 880px;
  --breakpoint-content: 720px;
}