/* ==========================================================================
   Design tokens — Luxury Hair By Denise
   Afkomstig uit de Elementor kit (post-5.css, .elementor-kit-5) en aangevuld
   met waarden die op de live site zijn gemeten met getComputedStyle.
   De comments noemen de oorspronkelijke Elementor-naam.
   ========================================================================== */
:root {
  /* --- Kleuren -------------------------------------------------------- */
  --kleur-zwart:        #000000;  /* --e-global-color-primary / -text      */
  --kleur-wit:          #FFFFFF;  /* --e-global-color-secondary           */
  --kleur-creme:        #F1E9E4;  /* --e-global-color-accent              */
  --kleur-bruin:        #875E45;  /* --e-global-color-f510e2c             */
  --kleur-taupe:        #CEB2A1;  /* --e-global-color-a34395d             */
  --kleur-transparant:  transparent; /* --e-global-color-e03878b          */
  --kleur-grijs-vlak:   rgba(231, 231, 231, 0.51); /* sectie "Waarom"     */
  --kleur-lijn:         #E4E4E4;

  /* --- Typografie ------------------------------------------------------ */
  /* Let op: de kit noemt Inter Tight als primary, maar de hero-titel is op
     de live site gemeten als Montserrat 700. Beide fonts zijn in gebruik. */
  --font-kop:     "Inter Tight", system-ui, -apple-system, sans-serif; /* typography-primary/secondary */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif;  /* hero-h1, footer-cta         */
  --font-body:    "Nunito", system-ui, -apple-system, sans-serif;      /* typography-text             */
  --font-accent:  "Roboto", system-ui, -apple-system, sans-serif;      /* typography-accent (knoppen) */
  --font-knop:    "Open Sans", system-ui, -apple-system, sans-serif;   /* hero- en headerknop         */

  /* Gemeten groottes */
  --tekst-hero-h1:   56px;  /* Montserrat 700, uppercase   */
  --tekst-hero-h1-lp: 56px; /* Inter Tight 600 op landingspagina's */
  --tekst-hero-h2:   30px;  /* Inter Tight 600, uppercase  */
  --tekst-h2-groot:  40px;  /* "Waarom voor ons kiezen?"   */
  --tekst-h2:        38px;  /* typography-secondary        */
  --tekst-h3:        28px;  /* typography-cc3a67a          */
  --tekst-h4:        22px;  /* typography-9c28cf7          */
  --tekst-groot:     20px;  /* typography-4c29a70          */
  --tekst-body:      17px;  /* typography-text             */
  --tekst-body-lg:   18px;  /* openingstijden              */
  --tekst-accent:    15px;  /* typography-accent, uppercase*/
  --tekst-klein:     14px;

  /* --- Maatvoering ----------------------------------------------------- */
  --container:        1140px; /* .e-con --container-max-width */
  --container-breed:  1197px; /* secties met 114px zijpadding */
  --rand-zij:         8%;     /* sectiepadding links/rechts — gemeten: 114px bij 1425px
                                 en 152px bij 1905px, dus procentueel */

  --ruimte-xs:  5px;
  --ruimte-sm:  10px;
  --ruimte-md:  20px;
  --ruimte-lg:  45px;
  --ruimte-xl:  80px;

  /* --- Overig ---------------------------------------------------------- */
  --radius:      0px;          /* knoppen hebben geen afronding */
  --knop-rand:   3px;
  --transitie:   0.3s ease;
  --header-h:    90px;
}

/* Elementor-breakpoints (1024 / 767), waarden gemeten op de live site.
   Let op: de typografie verandert NIET op 1024 — alleen de zijranden.
   Pas onder 768px worden de koppen kleiner. */
@media (max-width: 1024px) {
  :root {
    --container: 100%;
    --rand-zij: 5%;              /* gemeten 50,44px bij 1009px = 5% */
  }
}
@media (max-width: 767px) {
  :root {
    --container: 100%;
    --rand-zij: 5%;              /* gemeten 18,75px bij 375px = 5% */
    --tekst-hero-h1:  29px;      /* gemeten */
    --tekst-hero-h1-lp: 32px;   /* gemeten op landingspagina's */
    --tekst-hero-h2:  16px;      /* gemeten */
    --tekst-h2-groot: 32px;      /* gemeten */
    --tekst-h2:       32px;      /* gemeten */
    --ruimte-lg: 30px;
    --ruimte-xl: 45px;
  }
}