:root {
  /* Colors — achromatic with warm undertones */
  --color-black: #0A0A0A;
  --color-white: #F5F2EE;
  --color-ivory: #EDE8E2;
  --color-charcoal: #1A1A1A;
  --color-graphite: #2C2C2C;
  --color-silver: #8A8A8A;
  --color-ash: #4A4A4A;
  --color-bone: #D4CFC8;
  --color-smoke: #B8B2A8;

  /* Typography — Perfect Fourth (1.333) */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  --text-display: clamp(3.5rem, 8vw, 7rem);
  --text-h1: clamp(2.5rem, 5vw, 4rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: 1.125rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  --leading-tight: 1.05;
  --leading-body: 1.7;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* Spacing */
  --space-section: clamp(6rem, 12vh, 10rem);
  --space-block: clamp(3rem, 6vh, 5rem);
  --space-element: 1.5rem;
  --space-tight: 0.75rem;

  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-padding: clamp(1.5rem, 5vw, 4rem);

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 300ms;
  --duration-mid: 400ms;
  --duration-slow: 600ms;

  /* Layout */
  --nav-height: 5rem;
  --nav-height-mobile: 4rem;
}