/* ──────────────────────────────────────────────────────────
   Legacy Shift — design tokens
   Single source of truth for palette, type, spacing, motion.
   ────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ───────────────────────────────────────── */
  --bg:             #F5F2EE;
  --bg-elevated:    #EDEAE5;
  --bg-section:     #E3E0DB;
  --text:           #1A1714;
  --text-2:         #4A4540;
  --text-3:         #6B6560;
  --text-muted:     #9E9891;
  --accent:         #E8641A;
  --accent-bright:  #FF7A2F;
  --accent-soft:    rgba(232,100,26,0.12);
  --border:         rgba(26,23,20,0.08);
  --border-strong:  rgba(26,23,20,0.15);
  --success:        #2E7D32;
  --error:          #C42818;

  /* ── Type families ─────────────────────────────────── */
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Type scale ────────────────────────────────────── */
  --fs-display-xl: clamp(68px, 9vw, 128px);
  --fs-display-l:  clamp(42px, 5vw, 72px);
  --fs-display-m:  clamp(28px, 3.5vw, 44px);
  --fs-title:      22px;
  --fs-body-l:     17px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-mono:       11px;
  --fs-mono-data:  12px;

  /* ── Spacing scale (4px grid) ──────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* ── Section vertical rhythm ───────────────────────── */
  --space-section: var(--space-13);   /* default section top/bottom */

  /* ── Page gutter (horizontal page-edge padding) ────── */
  --gutter: 80px;                     /* 1600px+ default */

  /* ── Motion ────────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover:   150ms;
  --dur-state:   250ms;
  --dur-reveal:  600ms;
  --dur-intro:  1500ms;
}

/* ── Gutter at each breakpoint ───────────────────────── */
@media (max-width: 1599px) { :root { --gutter: 60px; } }
@media (max-width: 1279px) { :root { --gutter: 48px; } }
@media (max-width: 1023px) { :root { --gutter: 40px; } }
@media (max-width:  767px) { :root { --gutter: 24px; } }
@media (max-width:  479px) { :root { --gutter: 20px; } }

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover:  0ms;
    --dur-state:  0ms;
    --dur-reveal: 0ms;
    --dur-intro:  0ms;
  }
}