/* ============================================================
   Hazlnut — Colour tokens
   Official palette (brand guide, pg.2):
     E45558  coral      B4CEED  powder blue   E163C3  pink
     194234  deep green D5C800  chartreuse    EDE6DC  cream
     561023  maroon
   The live site also uses a brighter coral (F04955) and a darker
   forest (012D22); both are kept as named variants.
   ============================================================ */

:root {
  /* ---- Raw brand hues -------------------------------------- */
  --hzl-maroon:        #561023;  /* primary ink / dark surface       */
  --hzl-maroon-deep:   #3f0c1a;  /* pressed / shadow maroon          */
  --hzl-coral:         #e45558;  /* official accent                  */
  --hzl-coral-bright:  #f04955;  /* hero / high-energy coral         */
  --hzl-pink:          #e163c3;  /* magenta motif + fine-print band  */
  --hzl-green:         #194234;  /* official deep green              */
  --hzl-green-forest:  #0f3a2e;  /* faq panel green                  */
  --hzl-green-deep:    #012d22;  /* darkest green motif tile         */
  --hzl-chartreuse:    #d5c800;  /* acid yellow                      */
  --hzl-cream:         #ede6dc;  /* primary paper surface            */
  --hzl-cream-warm:    #e7d3c4;  /* warm cream text on maroon        */
  --hzl-blue:          #b4ceed;  /* powder blue                      */
  --hzl-ink:           #1e1e1e;  /* near-black body ink              */
  --hzl-black:         #000000;
  --hzl-white:         #ffffff;

  /* ---- Tints for hover / wash ------------------------------ */
  --hzl-coral-tint:    #f6c9c4;
  --hzl-blue-tint:     #dbe9f6;
  --hzl-cream-tint:    #f5f0e8;

  /* ---- Semantic surfaces ----------------------------------- */
  --surface-page:      var(--hzl-cream);   /* default canvas        */
  --surface-paper:     var(--hzl-white);   /* cards on cream        */
  --surface-ink:       var(--hzl-maroon);  /* dark hero / footer    */
  --surface-green:     var(--hzl-green);   /* deep panels           */
  --surface-blue:      var(--hzl-blue);    /* soft section          */
  --surface-pink:      var(--hzl-pink);    /* loud accent band      */
  --surface-yellow:    var(--hzl-chartreuse);

  /* ---- Semantic text --------------------------------------- */
  --text-body:         var(--hzl-ink);          /* on cream/paper   */
  --text-strong:       var(--hzl-maroon);       /* headings on light*/
  --text-muted:        color-mix(in oklab, var(--hzl-ink) 60%, var(--hzl-cream));
  --text-on-dark:      var(--hzl-cream);        /* on maroon/green  */
  --text-on-dark-soft: var(--hzl-cream-warm);
  --text-on-accent:    var(--hzl-cream);        /* on coral         */

  /* ---- Lines & borders ------------------------------------- */
  --line-ink:          var(--hzl-ink);
  --line-soft:         color-mix(in oklab, var(--hzl-ink) 18%, transparent);
  --line-on-dark:      color-mix(in oklab, var(--hzl-cream) 28%, transparent);

  /* ---- Interactive ----------------------------------------- */
  --accent:            var(--hzl-coral);
  --accent-hover:      var(--hzl-coral-bright);
  --focus-ring:        color-mix(in oklab, var(--hzl-coral) 55%, transparent);
}