:root {
  /* ── Colors ── */
  --color-charcoal:       #2C2C2C;
  --color-charcoal-light: #3E3E3E;
  --color-concrete:       #6B6B6B;
  --color-steel:          #8A9BA8;
  --color-sand:           #C4A882;
  --color-sand-light:     #D4BCA0;
  --color-offwhite:       #F0EDE8;
  --color-white:          #FAFAF8;
  --color-rust:           #A85C38;
  --color-rust-dark:      #8B4A2C;
  --color-overlay:        rgba(30, 28, 25, 0.75);

  /* ── Spacing ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
  --space-xxl: 12rem;

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
  --text-2xl:  3rem;
  --text-3xl:  4.5rem;
  --text-hero: clamp(4rem, 10vw, 9rem);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Borders ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --border-thin: 1px solid var(--color-concrete);
  --border-sand: 1px solid var(--color-sand);

  /* ── Z-Index Layers ── */
  --z-base:  1;
  --z-above: 10;
  --z-nav:   100;
  --z-modal: 1000;
  --z-top:   9999;
}