/* ==========================================================================
   tokens.css — the design system for Yasmin & Mpaala
   Every colour, font and size used on the site is defined here, once.
   Change a value here and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Colours: soft sage with a jewel colour for each country ---- */
  --color-sage:         #D2DCB9;   /* the green from the original site */
  --color-sage-light:   #EEF2E3;
  --color-sage-deep:    #64714A;   /* sage for text and buttons: passes WCAG AA on white and pale sage */
  --color-purple:       #5F5CB3;   /* Zambia */
  --color-bronze:       #9F670C;   /* Sweden (card background, white text passes) */
  --color-bronze-deep:  #95600B;   /* Sweden text on pale sage: passes WCAG AA */
  --color-white:        #FFFFFF;   /* page background */
  --color-ink:          #2F302B;   /* main text */
  --color-ink-soft:     #5E6058;   /* secondary text */
  --color-line:         #E3E6D8;   /* borders and dividers */

  /* ---- Fonts ---- */
  --font-display: "Cinzel", "Times New Roman", serif;               /* headings, capitals */
  --font-body:    "Cormorant Garamond", Georgia, serif;             /* paragraphs */
  --font-script:  "Pinyon Script", "Brush Script MT", cursive;      /* the couple's names */

  /* ---- Type sizes (fluid: grow smoothly from phone to desktop) ---- */
  --text-sm:   1rem;
  --text-base: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  --text-lg:   clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --text-xl:   clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --text-2xl:  clamp(2.4rem, 1.6rem + 3.5vw, 4.5rem);
  --text-hero: clamp(3.6rem, 2rem + 8vw, 9rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-height: 76px;

  /* ---- Shape & motion ---- */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-arch: 999px 999px 16px 16px;   /* arched cards and photos */
  --shadow-soft: 0 12px 40px -12px rgba(47, 48, 43, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.9s;
}