:root {
  /* Typefaces */
  --font-display: warbler-display, sans-serif;
  --font-serif:   warbler-text, Georgia, serif;
  --font-sans:    neue-haas-grotesk-display, 'Helvetica Neue', Arial, sans-serif;

  /* Colors — hsl(24,42%,5%) / hsl(1,66%,14%) / hsl(29,69%,54%) / hsl(32,97%,86%) */
  --color-dark:      #110B07;  /* Near-black warm base — page background */
  --color-dark-deep: #3A0D0C;  /* Deep warm dark — overlays, secondary surfaces */
  --color-amber:     #DB8737;  /* Accent — use on dark backgrounds only (7:1 on dark) */
  --color-cream:      #FEDEB9;             /* Primary text on dark (15:1 on dark) */
  --color-cream-dim:  hsl(32, 60%, 76%);  /* Secondary text — labels, captions */
  --color-cream-body: hsl(32, 30%, 92%);  /* Body/paragraph text — +2 stops, near-white warm */

  /* WCAG notes:
     amber on cream = 2.17:1 — NEVER use amber text on cream background
     amber on dark  = 7.01:1 — safe for all text sizes
     cream on dark  = 15.22:1 — safe for all text sizes             */

  /* Fluid type scale */
  --text-xs:   clamp(0.7rem,  1.5vw, 0.9rem);
  --text-sm:   clamp(0.85rem, 2vw,   1.1rem);
  --text-base: clamp(1rem,    2.5vw, 1.5rem);
  --text-lg:   clamp(1.2rem,  3vw,   2.2rem);
  --text-xl:   clamp(2rem,    5vw,   5rem);
  --text-xxl:  clamp(2.5rem,  8vw,   7rem);

  /* Fluid spacing */
  --space-xs: clamp(0.5rem,  1vw,  0.75rem);
  --space-sm: clamp(1rem,    2vw,  1.5rem);
  --space-md: clamp(2rem,    4vw,  3rem);
  --space-lg: clamp(3rem,    6vw,  6rem);
  --space-xl: clamp(6rem,    10vw, 12rem);

  /* Slide margins */
  --margin-x: clamp(1.5rem, 8vw, 8rem);
  --margin-y: clamp(2rem,   8vh, 8rem);
}