:root {
  /* ── The Collision: Dark meets Light ── */
  --dark: #0a0a0a;
  --dark-mid: #141414;
  --dark-soft: #1a1a1a;
  --light: #f7f5f0;
  --light-warm: #ece8e0;
  --white: #ffffff;

  /* ── Ink & text ── */
  --ink-on-dark: #f0ede8;
  --ink-on-light: #0a0a0a;
  --muted-on-dark: rgba(240, 237, 232, 0.72);
  --muted-on-light: rgba(10, 10, 10, 0.6);

  /* ── The Spark ── */
  --yellow: #FFFF00;
  --yellow-dim: rgba(255, 255, 0, 0.12);
  --yellow-glow: rgba(255, 255, 0, 0.25);

  /* ── Purple accent ── */
  --purple: #a855f7;
  --purple-dim: rgba(168, 85, 247, 0.15);

  /* ── Typography ── */
  --heading: 'Jost', 'Futura', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 140px;
  --space-5xl: 200px;

  /* ── Grid ── */
  --grid-max: 1400px;
  --grid-narrow: 900px;
  --grid-gutter: clamp(20px, 4vw, 60px);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 800ms;
  --duration-glacial: 1.5s;
}