:root {
  /* ----------------------------------------------------
     STRICT 2-COLOR COFFEE SYSTEM (Warm Cream & Espresso)
     Zero third colors. Every value is derived from these two.
  ----------------------------------------------------- */
  --c-bg: #F9F6F0;
  --c-fg: #20150E;

  /* Optical Alpha Levels for High-Contrast Readability */
  --c-fg-100: #20150E;
  --c-fg-95: rgba(32, 21, 14, 0.95);
  --c-fg-85: rgba(32, 21, 14, 0.85);
  --c-fg-70: rgba(32, 21, 14, 0.70);
  --c-fg-45: rgba(32, 21, 14, 0.45);
  --c-fg-20: rgba(32, 21, 14, 0.20);
  --c-fg-12: rgba(32, 21, 14, 0.12);
  --c-fg-06: rgba(32, 21, 14, 0.06);

  /* Inverted Elements Alpha */
  --c-bg-95: rgba(249, 246, 240, 0.95);
  --c-bg-80: rgba(249, 246, 240, 0.80);
  --c-bg-70: rgba(249, 246, 240, 0.70);
  --c-bg-20: rgba(249, 246, 240, 0.20);
  --c-bg-10: rgba(249, 246, 240, 0.10);

  /* Structural Rules & Borders */
  --border-subtle: 1px solid var(--c-fg-12);
  --border-focus: 1px solid var(--c-fg-45);
  --border-active: 1px solid var(--c-fg);

  /* ----------------------------------------------------
     TYPOGRAPHY SYSTEM
     Classical Editorial Display (Italiana),
     Architectural Neo-Grotesque (Chivo),
     Engineering Precision (JetBrains Mono)
  ----------------------------------------------------- */
  --font-grotesk: 'Chivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Italiana', Georgia, serif;
  --font-serif: 'Italiana', Georgia, serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Chivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Mathematical Fluid Typography Scale */
  --text-hero: clamp(3.5rem, 11vw, 11.5rem);
  --text-giant: clamp(4rem, 14vw, 15rem);
  --text-h1: clamp(2.5rem, 6vw, 5.5rem);
  --text-h2: clamp(1.85rem, 4vw, 3.5rem);
  --text-h3: clamp(1.25rem, 2.5vw, 2rem);
  --text-lead: clamp(1.1rem, 1.6vw, 1.45rem);
  --text-body: clamp(0.95rem, 1.15vw, 1.1rem);
  --text-small: clamp(0.8rem, 0.9vw, 0.9rem);
  --text-micro: 0.75rem;

  /* Spacing Grid */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.75rem, 1.2vw, 1.25rem);
  --space-md: clamp(1.5rem, 2.5vw, 2.5rem);
  --space-lg: clamp(3rem, 5vw, 5.5rem);
  --space-xl: clamp(5rem, 9vw, 9rem);

  /* Layout Boundaries */
  --page-max-width: 1440px;
  --page-padding: clamp(1.25rem, 4vw, 4.5rem);

  /* Transitions & Easing Curves */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 360ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}