:root {
  /* ── Colors ── warm near-black + ember accent (was cool blue-black) ── */
  --color-bg:          #0e0c0b;
  --color-bg-alt:      #14110f;
  --color-surface:     #1b1714;
  --color-surface-alt: #261f19;
  --color-surface-hover: #322a22;

  --color-text:        #f3efe8;
  --color-text-sub:    #a59d8e;
  --color-text-muted:  #6c6457;

  --color-accent:      #ff6a3d;
  --color-accent-hover:#ff8a66;
  --color-accent-glow: rgba(255, 106, 61, 0.16);
  --color-accent-glow-strong: rgba(255, 106, 61, 0.28);

  --color-cta:         #ff6a3d;
  --color-cta-hover:   #ff8a66;

  --color-border:      rgba(255, 238, 224, 0.08);
  --color-border-hover:rgba(255, 238, 224, 0.16);

  /* ── Typography ── characterful display for headings, Inter for body ── */
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-width:      1200px;
  --max-width-text: 720px;
  --radius:         8px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  /* ── Animation ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-normal:  300ms;
  --dur-slow:    600ms;
  --dur-reveal:  800ms;
}