:root {
  /* surfaces + structure (dark, default) */
  --canvas: #000000;
  --lift: #0A0A0A;
  --hair-faint: #1A1A1A;
  --hair: #2C2C2C;
  --hair-active: #3F3F3F;
  /* text */
  --fg: #FFFFFF;
  --fg-2: #C8C8C8;
  --fg-3: #9A9A9A;
  --muted: #8A8A8A;
  /* signals */
  --orange: #FF6B35;
  --green: #06D6A0;
  --yellow: #FFBE0B;
  /* washes */
  --grid: rgba(255,255,255,0.022);
  --grid-strong: rgba(255,255,255,0.05);
  --surface: rgba(255,255,255,0.02);
  --surface-strong: rgba(255,255,255,0.04);
  --nav-bg: rgba(0,0,0,0.72);
  --nav-bg-scrolled: rgba(0,0,0,0.92);
  --frost-bg: rgba(10,10,12,0.55);
  /* type families */
  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* type scale */
  --text-caption: 13px;
  --text-body: 15px;
  --text-subheading: 18px;
  --text-heading: 40px;
  --text-heading-lg: 48px;
  --text-display: clamp(48px, 8vw, 84px);
  --leading-tight: 1.05;
  --leading-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  /* weights */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-display: 800;
  /* spacing */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px;
  /* radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  /* elevation */
  --shadow-soft: 0 1px 1px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.4);
  --shadow-frost: 0 2px 30px rgba(0,0,0,0.5);
  /* layout */
  --page-max: 1200px;
  --section-gap: var(--space-80);
}

html[data-theme="light"] {
  --canvas: #FBFBF8;
  --lift: #F1F1EC;
  --hair-faint: #ECECE4;
  --hair: #E3E3DC;
  --hair-active: #B4B4AA;
  --fg: #0C0F14;
  --fg-2: #2A2E33;
  --fg-3: #596066;
  --muted: #6B7280;
  --orange: #D54D1A;
  --green: #138669;
  --yellow: #C9940D;
  --grid: rgba(0,0,0,0.04);
  --grid-strong: rgba(0,0,0,0.07);
  --surface: rgba(0,0,0,0.02);
  --surface-strong: rgba(0,0,0,0.04);
  --nav-bg: rgba(251,251,248,0.8);
  --nav-bg-scrolled: rgba(251,251,248,0.94);
  --frost-bg: rgba(251,251,248,0.62);
}