/* ─────────────────────────────────────────
   DESIGN TOKENS
   Colours, font stacks, the fluid type scale and easing. Change a value here and it updates everywhere.
   (Motion/animation tokens for JS live in js/motion-tokens.js.)
───────────────────────────────────────── */

:root {
  /* ── Colour: all-terracotta palette (Option D, chosen 8 Oct 2026) ──
     Clay replaces green everywhere. Contrast checked against WCAG AA. */

  /* paper */
  --cream-50:  #FDFAF4;   /* text on clay */
  --cream-200: #EDE5D0;   /* soft text on clay (countdown label) */
  --cream-300: #DDD4BC;   /* current-page menu link */
  --ivory:     #FBF3EA;   /* the "white" sections — warm, no cold undertone */
  --blush-100: #F4E6DA;   /* the "beige" sections */
  --blush-200: #EFDCCD;   /* hover wash, open FAQ item */

  /* clay */
  --clay-950: #3B1D12;    /* ink: headings + body text (13.9:1 on ivory) */
  --clay-800: #6B3420;    /* secondary text (8.9:1) */
  --clay-700: #88411E;    /* brand clay: dark sections, frames, borders, active tab (6.8:1) */
  --clay-500: #8B5233;    /* muted text: eyebrows, notes (5.7:1 on ivory, 5.1:1 on blush, 4.7:1 on blush-200) */
  --clay-300: #C4896A;    /* decoration only: callout rules, dashed outlines */
  --clay-200: #D9A88C;    /* decoration on clay: the footer ampersand (large only) */

  /* semantic — components use these */
  --bg:               var(--ivory);
  --surface:          var(--blush-100);
  --surface-sunken:   var(--blush-200);
  --border:           var(--clay-700);
  --hairline:         rgba(136, 65, 30, 0.25);
  --text-primary:     var(--clay-950);
  --text-secondary:   var(--clay-800);
  --text-muted:       var(--clay-500);
  --inverse:          var(--clay-700);               /* RSVP, footer, menu, featured card, active tab */
  --on-inverse:       var(--cream-50);
  --on-inverse-muted: rgba(253, 250, 244, 0.82);     /* 5.4:1 on clay */
  --overlay:          rgba(110, 48, 22, 0.6);        /* clay tint over the hero photo — cream text stays ≥ 4.6:1 even over the brightest 5% of the photo */
  --scrim:            rgba(59, 29, 18, 0.97);        /* lightbox */

  --font-display: 'Flaviotte', Georgia, serif;
  --font-script:  'Flaviotte', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'prestige-elite-std', 'Courier New', monospace;   /* lead, eyebrows, labels · Adobe Fonts project bus2ocn: 400 + 700, roman + italic */
  --font-hand:    'Zeyada', cursive;   /* handwritten asides — (parentheses), notes, signature */

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Fluid type scale ──────────────────────────────────────────
     Every size glides smoothly between a phone value (at a 360px-wide
     screen) and a desktop value (at 1440px), then stops growing.
     The display size keeps growing until 1800px so the names stay
     monumental on big monitors. Sizes are in rem, so they also respect
     the reader's own browser text-size setting.
     Comments show phone → desktop in px. clamp(phone, fluid, desktop):
     the middle value is just the straight line between the two, so if
     you change a phone/desktop size, recalculate it (any "CSS clamp
     calculator" does this) or ask Claude.
     ────────────────────────────────────────────────────────────── */

  /* display */
  --text-display:    clamp(3.25rem, 1.2500rem + 8.8889vw, 11.25rem);  /* 52 → 180 · hero names — "Sílvia & Stian" */
  --text-h1:         clamp(2.125rem, 1.5000rem + 2.7778vw, 4rem);  /* 34 → 64 · section headings (.script-heading) */
  --text-h2:         clamp(1.625rem, 1.3750rem + 1.1111vw, 2.375rem);  /* 26 → 38 · venue name */
  --text-h3:         clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);  /* 20 → 28 · plan / card / travel titles */

  /* handwritten & accent */
  --text-hand:       clamp(1.375rem, 1.1667rem + 0.9259vw, 2rem);  /* 22 → 32 · handwritten: signature, notes, countdown label (was signature 24 → 34 + note 20 → 26) */
  --text-note:       clamp(1.25rem, 1.1250rem + 0.5556vw, 1.625rem);  /* 20 → 26 · ONLY the old index.html footer note (.footer-note) — remove when index.html retires */

  /* text */
  --text-lead:       clamp(1rem, 0.875rem + 0.5556vw, 1.375rem);  /* 16 → 22 · hero eyebrow + date, coupon code, "menu" button (was lede 15 → 22 + nav 18 → 22) */
  --text-body:       clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);  /* 16 → 17 · all running text + form fields (was 14 → 16) */
  --text-small:      clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);  /* 13 → 14 · notes, captions, eyebrows (was 12 → 14) */
  --text-label:      clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);  /* 12 → 13 · tracked caps: labels, tabs, buttons (was 11 → 13) */

  /* leading (line-height) + tracking that pair with the scale */
  /* font weights */
  --weight-light:   300;   /* Lead + Eyebrow: wide tracking reads better light */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-display: 1;
  --leading-heading: 1.1;
  --leading-hand:    1.2;    /* handwritten */
  --leading-snug:    1.4;    /* lead, small, eyebrow, label */
  --leading-body:    1.65;
  --tracking-display: -0.01em;
  --tracking-caps:      0.2em;    /* lead + eyebrows: airy, but Prestige's fixed-width letters already carry space */
  --tracking-code:      0.05em;    /* the coupon code: Lead size but tight, so it fits on phones */
  --tracking-caps-wide: 0.12em;   /* labels + buttons: tiny uppercase needs air */
}