/* ==========================================================================
   TOKENS — design variables. Edit here to restyle the whole site.
   ========================================================================== */
:root {
  /* Colors */
  --color-cream: #F6EFE6;
  --color-cream-soft: #FBF7F1;
  --color-ink: #241C16;
  --color-terracotta: #B5502E;
  --color-terracotta-dark: #8F3D22;
  --color-sand: #E8DCC8;
  --color-olive: #5C5642;
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.25rem, 4vw + 1rem, 4.25rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --fs-body-lg: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* Radii & shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(36, 28, 22, 0.08);
  --shadow-md: 0 12px 32px rgba(36, 28, 22, 0.14);

  /* Layout */
  --container-max: 1200px;
  --transition-base: 220ms ease;

  /* Overlays & alt accents (visual refresh) */
  --overlay-scrim: linear-gradient(100deg, rgba(36, 28, 22, 0.82) 10%, rgba(36, 28, 22, 0.45) 55%, rgba(36, 28, 22, 0.08) 85%);
  --color-terracotta-light: #E0805C;
}