:root {
  /* =========================================
     FONTS
     ========================================= */
  --font-display: 'IM Fell English', 'Georgia', serif;
  --font-body: 'Overpass', 'Helvetica Neue', sans-serif;

  /* =========================================
     TYPE SCALE (1.250 ratio)
     ========================================= */

  /* Display */
  --text-display-xl: 3.815rem;
  --text-display-lg: 3.052rem;
  --text-display-md: 2.441rem;
  --text-display-sm: 1.953rem;

  /* Heading */
  --text-heading-lg: 1.563rem;
  --text-heading-md: 1.25rem;
  --text-heading-sm: 1rem;

  /* Body */
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.875rem;
  --text-body-xs: 0.75rem;

  /* Label */
  --text-label: 0.6875rem;

  /* =========================================
     LINE HEIGHT
     ========================================= */
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-loose: 1.8;

  /* =========================================
     LETTER SPACING
     ========================================= */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* =========================================
     FONT WEIGHT
     ========================================= */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* =========================================
     COLOR
     ========================================= */
  --color-burnt-sienna: #B7412A;
  --color-cream: #FFF0E1;
  --color-charcoal: #22211F;

  --color-olive: #717337;

  --color-olive-deep: #494B24;
  --color-golden: #D5BF51;
  --color-ochre: #9F7C39;
  --color-sage: #CAC98E;
  --color-vermillion: #E06336;
  --color-teal: #5F7B7E;
  --color-ink: #19272F;

  /* =========================================
     SEMANTIC COLOR ROLES
     ========================================= */
  --surface-primary: var(--color-cream);
  --surface-dark: var(--color-charcoal);

  --text-primary: var(--color-charcoal);
  --text-muted: rgba(34, 33, 31, 0.65);
  --text-on-dark: var(--color-cream);

  --brand-mark: #983C29;
  --brand-accent: var(--color-olive);

  --interactive-default: var(--color-charcoal);
  --interactive-hover: var(--color-burnt-sienna);

  --border-subtle: rgba(34, 33, 31, 0.12);
  --border-medium: rgba(34, 33, 31, 0.25);

  --overlay-heavy: rgba(0, 0, 0, 0.50);
  --overlay-medium: rgba(0, 0, 0, 0.35);
  --overlay-light: rgba(0, 0, 0, 0.10);

  /* =========================================
     SPACING (8px base)
     ========================================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 8rem;
  --space-20: 10rem;

  --gap-paragraph: var(--space-5);
  --gap-block: var(--space-8);
  --gap-grid: var(--space-4);
  --section-pad-y: var(--space-12);
  --section-pad-y-lg: var(--space-16);

  --content-max: 1440px;
  --content-gutter: 20px;
  --content-narrow: 700px;

  /* =========================================
     MOTION
     ========================================= */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-mrvica: cubic-bezier(0.32, 0.72, 0, 1);

  --duration-fast: 200ms;
  --duration-medium: 400ms;
  --duration-slow: 800ms;
  --duration-hero: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}