/* ============================================================
   tokens.css — the only file you edit to change the look
   ------------------------------------------------------------
   WHAT THIS DOES
   Every colour, type size and spacing value on the site is
   defined once, here. Change a value here and it changes
   everywhere. Never hardcode a colour or a margin in a
   component file.

   WHAT BREAKS HERE
   - A typo in a custom property name fails silently: the
     component just inherits or renders unstyled. If something
     looks "default", check the name here first.
   - Type sizes use clamp(), so they scale between phone and
     desktop. Don't add a media query to fix a heading size —
     adjust the clamp instead.

   TRY CHANGING
   --accent to a colour from their actual packaging labels.
   That single value is most of the brand.
   ============================================================ */

:root {
  /* --- Colour: one accent, one secondary, one highlight --- */
  --cream:       #FFFDF7;   /* page background */
  --paper:       #FFFFFF;   /* cards, inputs */
  --ink:         #1B1814;   /* body text, headings */
  --ink-muted:   #5B5245;   /* secondary text, captions */
  --line:        #EDE4D4;   /* borders, dividers */
  --accent:      #CB3417;   /* scotch bonnet red — buttons, links */
  --accent-dark: #A82810;   /* accent hover, badge text */
  --leaf:        #0D6B47;   /* secondary — the WhatsApp CTA band */
  --leaf-dark:   #0A5E3F;   /* leaf hover */
  --sun:         #FFB020;   /* highlight — badges only, never body text */
  --heat:        #CB3417;   /* chilli strength, kept apart from --accent */

  /* --- Derived tints (badges, photo placeholders) --- */
  --accent-tint: #FBE4DD;
  --leaf-tint:   #E8F3E6;
  --photo-1:     #F5EDDF;
  --photo-2:     #E5D7BE;
  --photo-ink:   #8A7654;

  /* --- Type: two families, no more --- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Type scale: fluid between phone and desktop --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1.15rem + 0.40vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  1.30rem + 0.90vw, 2rem);
  --text-3xl:  clamp(2rem,    1.60rem + 1.80vw, 3rem);
  --text-4xl:  clamp(2.5rem,  1.80rem + 3.00vw, 4rem);

  /* --- Spacing scale: 4px based. Use these, nothing else. --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */

  /* --- Shape --- */
  --radius: 6px;
  --container: 1120px;
}