:root {
  /* Color Tokens */
  --color-base: hsl(40, 15%, 96%);
  /* #F8F7F4 - Warm off-white */
  --color-text-primary: hsl(25, 5%, 11%);
  /* #1C1B1A - Charcoal text */
  --color-text-secondary: hsl(25, 5%, 45%);
  /* Muted charcoal */
  --color-accent-sage: hsl(105, 10%, 58%);
  /* #8F9B8A - Muted sage */
  --color-accent-clay: hsl(25, 25%, 67%);
  /* #C2A895 - Subtle clay */
  --color-surface: hsl(0, 0%, 100%);
  /* #FFFFFF - Pure white */
  --color-border: hsl(40, 10%, 85%);
  /* Subtle beige border */

  /* Spacing Scale (based on 4px/8px baseline) */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 1rem;
  /* 16px */
  --space-4: 1.5rem;
  /* 24px */
  --space-5: 2rem;
  /* 32px */
  --space-6: 3rem;
  /* 48px */
  --space-8: 4rem;
  /* 64px */
  --space-12: 6rem;
  /* 96px */
  --space-section: clamp(8rem, 12vw, 12rem);
  --space-hero: clamp(10rem, 16vw, 16rem);

  /* Typography Scale */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-display: clamp(2.5rem, 5vw, 4.5rem);
  --text-h1: clamp(2rem, 4vw, 3.5rem);
  --text-h2: clamp(1.5rem, 3vw, 2.5rem);
  --text-h3: 1.25rem;
  --text-body: 1.125rem;
  /* 18px for editorial reading */
  --text-body-small: 1rem;
  --text-caption: 0.875rem;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.15;
  --lh-heading: 1.2;
  --lh-base: 1.6;
  --lh-caption: 1.5;

  /* Transitions */
  --transition-standard: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 4px 12px rgba(28, 27, 26, 0.15);
  --shadow-elevation: 0 20px 40px rgba(0, 0, 0, 0.06);

  /* Layout Boundaries */
  --container-max-width: 1200px;
  --container-narrow-width: 800px;
  --container-padding: clamp(1.5rem, 5vw, 3rem);
}