/*
  Design tokens — single source of truth for all pages.
  Import this before any page-specific styles.
  All rem values relative to browser default 16px only.
*/

:root {
  /* ── Colour palette ── */
  --terracotta: #C8553D;
  --saffron:    #E8A838;
  --teal:       #2A7C78;
  --teal-light: #3FA39E;
  --plum:       #4A1942;
  --plum-light: #6B2D6E;
  --ivory:      #F5EFE0;
  --ivory-dark: #EDE4CE;
  --warm-white: #FAF6EE;
  --charcoal:   #1E1A18;
  --dusty-rose: #C47B6A;
  --cobalt:     #1B4E72;
  --mid:        #6B6460;
  --border:     rgba(74,25,66,0.12);

  /* ── Typography — fluid scale, caps at ~1100px+ ── */
  --font-label:         clamp(0.75rem, 0.75vw, 0.85rem);
  --font-body:          clamp(0.95rem, 0.85vw, 1.1rem);
  --font-section-title: clamp(1.5rem,  2.4vw,  2.8rem);
  --font-headline:      clamp(1.75rem, 3.2vw,  3.5rem);
  --line-height-headline: 1.05;
  --line-height-body:     1.7;
}

/* Mobile font bump — overrides clamp mins on small screens only */
@media (max-width: 640px) {
  :root {
    --font-label:         0.8rem;
    --font-body:          1.05rem;
    --font-section-title: 1.9rem;
    --font-headline:      2.4rem;
  }
}

/* Base resets */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }