/* Design tokens: colour, type, spacing, radius, shadow */

:root {
  /* Colour palette */
  --color-cream: #F2EFE6;
  --color-copper: #B8734A;
  --color-copper-dark: #96603C;
  --color-sage: #9CAF88;
  --color-sage-dark: #566B4A;
  --color-sage-deepest: #2E3927;
  --color-sage-nav: #87AE73;
  --color-earth: #5B4636;
  --color-earth-deepest: #2B211A;
  --color-white: #FFFFFF;

  /* Font families */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale (1.5x ratio, mobile-first) */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  /* Fluid type scale — clamp(min, preferred, max), ~375px to ~1440px viewport */
  --text-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --text-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --text-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);

  /* Border radius — soft, understated */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadows — subtle, earth-tinted, no harsh drop shadows */
  --shadow-sm: 0 1px 3px rgba(91, 70, 54, 0.08);
  --shadow-md: 0 6px 20px rgba(91, 70, 54, 0.10);
}