/* ============================================================
   La Belle Beauté — Design Tokens
   Bron: homepage-ontwerp / design system (Junto Media).
   Drop-in voor het maatwerk WordPress-thema: wordt als eerste
   stylesheet geladen, vóór typografie en componenten.
   Gebruik altijd deze variabelen i.p.v. losse waarden, zodat het
   merk centraal aanpasbaar blijft.
   ============================================================ */

:root {

  /* --- Merkkleuren --- */
  --black:        #231F20;   /* basis · donkere vlakken & tekst       */
  --taupe:        #775C4B;   /* warm accent · secundaire tekst        */
  --gold:         #D5A940;   /* primair accent · CTA's & lijnen       */
  --white:        #FFFFFF;   /* puur wit                              */

  /* --- Uitbreidingen (afgeleid, voor diepte & contrast) --- */
  --ink:          #1A1617;   /* donker sectievlak                     */
  --ink-2:        #15110F;   /* footer · diepste vlak                 */
  --taupe-soft:   #A08772;   /* gedempte tekst op donker              */
  --copper:       #A9714B;   /* warm accent op licht                  */
  --gold-soft:    #E7C878;   /* hover · zachte goudtint               */
  --cream:        #F6F1EA;   /* lichte sectie · warm off-white        */
  --sand:         #EFE6DA;   /* lichte sectie · warmer                */

  /* --- Lijnen (hairlines) --- */
  --line-dark:    rgba(213,169,64,.22);  /* lijn op donkere vlakken   */
  --line-cream:   rgba(35,31,32,.14);    /* lijn op lichte vlakken    */

  /* --- Typografie --- */
  --ff-display:   "Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --ff-sans:      "Jost","Helvetica Neue",Arial,sans-serif;

  /* Type-schaal (fluid) */
  --fs-xl:        clamp(2.6rem, 6.6vw, 5.2rem);    /* .h-xl — hero          */
  --fs-lg:        clamp(2.1rem, 4.6vw, 3.6rem);    /* .h-lg — sectiekoppen  */
  --fs-md:        clamp(1.7rem, 3vw,   2.5rem);    /* .h-md — subkoppen     */
  --fs-lead:      clamp(1.02rem, 1.5vw, 1.18rem);  /* .lead                 */

  /* --- Layout & ruimte --- */
  --maxw:         1240px;                          /* container max-breedte */
  --gut:          clamp(22px, 5vw, 60px);          /* container gutter      */
  --section-y:    clamp(72px, 11vw, 140px);        /* verticale sectiepad.  */
  --radius:       4px;                             /* hoekafronding         */

  /* --- Motion --- */
  --ease:         cubic-bezier(.2,.7,.2,1);        /* gedeelde easing-curve */
  --dur:          .45s;                            /* standaard duur        */
}