/* Fusèl, ontwerptokens.
   Eén bron voor kleur, letter en maat: site.css en de brandguide
   (huisstijl/brandguide.html) lezen hieruit, en nergens anders staan deze
   waarden overgetypt. De kleuren zijn op 28 oktober 2026 uit de drukbestanden
   van het etiket en het kortingskaartje gehaald (huisstijl/bron) en naar sRGB
   omgerekend; de drukwaarden zelf staan in de brandguide.

   Het merk is navy. De pagina opent dus navy, en de lichte stand (het gele
   kaartje) bestaat voor later, als een pagina erom vraagt en een knop de
   bezoeker laat kiezen. */

:root {
  /* ---- merkkleuren, zoals ze heten in de brandguide ---- */
  --fs-navy:        #323B55;   /* de fles, het etiket, de grond */
  --fs-navy-diep:   #272E43;   /* een laag dieper: voet, schaduwvlak */
  --fs-navy-licht:  #59617E;   /* de kaart van Italië op het etiket */
  --fs-geel:        #E5CB03;   /* citroengeel, het beeldmerk en het kaartje */
  --fs-geel-licht:  #E2DC4E;   /* het vruchtvlees van de citroen */
  --fs-geel-diep:   #C9B200;   /* geel in de schaduw, voor randen op geel */
  --fs-wit:         #FFFFFF;
  --fs-room:        #F7F3E3;   /* papier: lopende tekst op licht */
  --fs-zilver:      #959394;   /* de ring van het medaillon */
  --fs-mist:        #D9DCE6;   /* lopende tekst op navy, 10,5:1 */
  --fs-mist-stil:   #AEB4C7;   /* bijzinnen op navy, 6,3:1 */

  /* ---- rollen: de pagina leest deze, niet de merkkleuren ---- */
  --grond:        var(--fs-navy);
  --grond-diep:   var(--fs-navy-diep);
  --inkt:         var(--fs-wit);
  --tekst:        var(--fs-mist);
  --tekst-stil:   var(--fs-mist-stil);
  --accent:       var(--fs-geel);
  --accent-inkt:  var(--fs-navy);       /* tekst op een accentvlak */
  --lijn:         rgb(255 255 255 / .14);
  --band:         var(--fs-geel);       /* het tweede materiaal: geel met navy */
  --band-inkt:    var(--fs-navy);
  --band-tekst:   #3A4260;              /* navy, iets lichter, 6,6:1 op geel */
  --band-lijn:    rgb(50 59 85 / .22);
  --focus:        var(--fs-geel);
  color-scheme: dark;

  /* ---- letters ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.6rem, 1.2rem + 5vw, 5.6rem);
  --t-h2:      clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --t-h3:      clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --t-lead:    clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-klein:   .9375rem;

  /* ---- maat ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --sectie: clamp(4rem, 8vw, 7.5rem);
  --wrap: 72rem;
  --rond: .25rem;
}

/* De gele stand: het kortingskaartje als pagina. Alleen actief als een
   bezoeker of een pagina daar om vraagt (data-theme="light"); het
   themascript van de kit zet 'dark' bij thema_standaard donker. */
:root[data-theme="light"] {
  --grond:       var(--fs-geel);
  --grond-diep:  var(--fs-geel-diep);
  --inkt:        var(--fs-navy);
  --tekst:       var(--band-tekst);
  --tekst-stil:  #4C5473;
  --accent:      var(--fs-navy);
  --accent-inkt: var(--fs-geel);
  --lijn:        rgb(50 59 85 / .22);
  --band:        var(--fs-navy);
  --band-inkt:   var(--fs-wit);
  --band-tekst:  var(--fs-mist);
  --band-lijn:   rgb(255 255 255 / .14);
  --focus:       var(--fs-navy);
  color-scheme: light;
}