:root {
  /* ── Colors ── */
  --color-bg-0: #0d0d0d;
  --color-bg-1: #161616;
  --color-bg-2: #1e1e1e;
  --color-bg-3: #252525;
  --color-line-1: #2e2e2e;
  --color-line-2: #3a3a3a;
  --color-line-3: #4a4a4a;
  --color-text-0: #f5f5f0;
  --color-text-1: #c8c8c3;
  --color-text-2: #9a9a95;
  --color-text-3: #6a6a66;
  --color-accent: #FFD200;
  --color-accent-dim: #c9a700;
  --color-accent-soft: rgba(255, 210, 0, 0.08);

  /* ── Typography ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ── Type Scale ── */
  --text-xs:   12px;  /* micro labels, footer legal */
  --text-sm:   14px;  /* mono labels, nav, card hints */
  --text-base: 18px;  /* body paragraphs */
  --text-lg:   21px;  /* subtitles, lead paragraphs */
  --text-xl:   28px;  /* section labels rendered as serif */
  --text-2xl:  42px;  /* pillar titles on flip cards */
  --text-3xl:  68px;  /* section headlines */
  --text-4xl:  96px;  /* hero headline only */

  /* ── Line Heights ── */
  --line-tight:   0.95;
  --line-snug:    1.1;
  --line-normal:  1.4;
  --line-relaxed: 1.7;

  /* ── Motion ── */
  --duration-fast:  0.3s;
  --duration-base:  0.5s;
  --duration-slow:  1s;
  --duration-intro: 2.4s;
  --ease-out-expo:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-cubic: cubic-bezier(0.77, 0, 0.175, 1);

  /* ── Spacing (8px base) ── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
}