:root {
  /* Colors */
  --color-charcoal: #2B2D2F;
  --color-navy: #1E3A5F;
  --color-offwhite: #F5F3F0;
  --color-warmgray: #E8E5E1;
  --color-taupe: #8A7E6B;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'Outfit', -apple-system, sans-serif;

  /* Font sizes - fluid scale */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;

  /* Header */
  --header-height: 72px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }
}