/* ==========================================================================
   Voetzorg by Corina — Designsysteem "Zacht"
   tokens.css — alle ontwerpbeslissingen als custom properties.

   Uitgangspunt: niets is hard. Geen pure kleuren, geen scherpe hoeken,
   geen harde lijnen, geen abrupte bewegingen. Alles vloeit, zoals de
   turquoise rook in het zand uit de huisstijl.

   In het WordPress-thema: dit bestand laden vóór base.css en components.css.
   ========================================================================== */

/* ---------- Lettertypes (self-hosted, AVG-vriendelijk) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Goudy Oldstyle: de huisstijl gebruikt LTC Goudy Oldstyle Pro (commercieel).
   Sorts Mill Goudy is een vrije (OFL) revival met hetzelfde karakter. */
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/SortsMillGoudy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/SortsMillGoudy-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Hunter River: handschrift uit het logo ("by Corina").
   Let op: webfontlicentie controleren vóór livegang. */
@font-face {
  font-family: "Hunter River";
  src: url("../fonts/HunterRiver-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Terugvalletters met dezelfde maten als de huisstijlletters (size-adjust en regelhoogte).
   Zolang de echte letter nog laadt, staat de tekst al op de juiste breedte: bij het
   wisselen verspringen regels niet meer. Berekend met fontTools op Nederlandse tekst. */
@font-face {
  font-family: "Manrope Terugval";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 103.54%;
  ascent-override: 102.95%;
  descent-override: 28.97%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Goudy Terugval";
  src: local("Georgia");
  size-adjust: 96.48%;
  ascent-override: 99.5%;
  descent-override: 49.54%;
  line-gap-override: 0%;
}

:root {
  /* ======================================================================
     KLEUR — basisschalen
     Merkkleuren: teal #069590 · zandgoud #D4A674 · cacao #4C3A2E
     ====================================================================== */

  /* Zand: de ondergrond. Warm, licht, nooit wit. */
  --zand-50:  #FDFAF6;
  --zand-100: #FBF7F1;  /* pagina-achtergrond */
  --zand-200: #F5ECE0;
  --zand-300: #EDDDC8;
  --zand-400: #E2C7A4;
  --zand-500: #D4A674;  /* merk: zandgoud */
  --zand-700: #8F6236;  /* goud als tekst (AA op zand-100) */

  /* Teal: de zorg. Merkteal voor beeld, donkerder tinten voor interactie. */
  --teal-50:  #EEF8F7;
  --teal-100: #DCF0EE;
  --teal-200: #B5E1DD;
  --teal-300: #7FCBC6;
  --teal-400: #3DAFA9;
  --teal-500: #069590;  /* merk: teal (logo, grote vlakken, decoratie) */
  --teal-600: #057C78;  /* knoppen — wit erop 5,0:1 */
  --teal-700: #04706C;  /* links — 5,6:1 op zand-100 */
  --teal-800: #0A5552;

  /* Rook: de heldere turquoise uit de achtergrondbeelden. Alleen als gloed. */
  --rook: #5ED9D3;

  /* Cacao: de inkt. Warm bruin in plaats van zwart. */
  --cacao-300: #CBBBAD;
  --cacao-400: #A8958A;
  --cacao-500: #7A6759;  /* stille tekst — min. 4,5:1 op alle lichte ondergronden (WCAG 1.4.3) */
  --cacao-600: #6B5849;  /* zachte tekst — 6,3:1 */
  --cacao-800: #4C3A2E;  /* merk: tekst — 10:1 */
  --cacao-900: #33271F;

  /* ======================================================================
     KLEUR — semantisch (gebruik deze in componenten)
     ====================================================================== */
  --kleur-achtergrond:      var(--zand-100);
  --kleur-achtergrond-warm: var(--zand-200);
  --kleur-achtergrond-koel: var(--teal-50);
  --kleur-oppervlak:        var(--zand-50);
  --kleur-oppervlak-glas:   rgb(253 250 246 / 0.72);

  --kleur-tekst:            var(--cacao-800);
  --kleur-tekst-zacht:      var(--cacao-600);
  --kleur-tekst-stil:       var(--cacao-500);
  --kleur-tekst-omgekeerd:  var(--zand-50);

  --kleur-accent:           var(--teal-600);
  --kleur-accent-hover:     var(--teal-800);
  --kleur-accent-zacht:     var(--teal-100);
  --kleur-link:             var(--teal-700);
  --kleur-goud:             var(--zand-500);
  --kleur-goud-tekst:       var(--zand-700);

  /* Lijnen: nooit hard. Transparant cacao, zodat ze op elke ondergrond mengen. */
  --kleur-lijn:             rgb(76 58 46 / 0.10);
  --kleur-lijn-sterk:       rgb(76 58 46 / 0.18);

  /* Status (zacht gehouden) */
  --kleur-succes:           #3E8A6A;
  --kleur-succes-zacht:     #E4F2EA;
  --kleur-let-op:           #A86A2C;
  --kleur-let-op-zacht:     #FAEEDD;
  --kleur-fout:             #B4534A;
  --kleur-fout-zacht:       #F8E5E1;

  /* Verlopen: de rook als zachte achtergrondgloed */
  --verloop-zand:  linear-gradient(180deg, var(--zand-100) 0%, var(--zand-200) 100%);
  --verloop-gloed:
    radial-gradient(60% 50% at 85% 10%, rgb(94 217 211 / 0.22) 0%, transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgb(212 166 116 / 0.28) 0%, transparent 70%);
  --verloop-knop:  linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 55%, var(--teal-800) 100%); /* wit erop min. 5:1 */

  /* ======================================================================
     TYPOGRAFIE
     ====================================================================== */
  --font-kop:     "Sorts Mill Goudy", "Goudy Terugval", Georgia, serif;
  --font-tekst:   "Manrope", "Manrope Terugval", Arial, sans-serif;
  --font-hand:    "Hunter River", "Segoe Script", "Snell Roundhand", cursive;

  /* Vloeiende schaal (≈ 1.25 mobiel → 1.333 desktop), 360px → 1280px */
  --tekst-xs:   clamp(0.78rem, 0.76rem + 0.08vw, 0.83rem);
  --tekst-s:    clamp(0.88rem, 0.86rem + 0.10vw, 0.94rem);
  --tekst-m:    clamp(1.03rem, 0.99rem + 0.18vw, 1.13rem);   /* lopende tekst */
  --tekst-l:    clamp(1.20rem, 1.12rem + 0.36vw, 1.42rem);   /* intro */
  --tekst-xl:   clamp(1.45rem, 1.29rem + 0.70vw, 1.90rem);   /* h3 */
  --tekst-2xl:  clamp(1.80rem, 1.50rem + 1.30vw, 2.65rem);   /* h2 */
  --tekst-3xl:  clamp(2.35rem, 1.80rem + 2.40vw, 3.90rem);   /* h1 */
  --tekst-4xl:  clamp(2.90rem, 2.00rem + 4.00vw, 5.40rem);   /* hero */

  --gewicht-licht:   300;
  --gewicht-normaal: 400;
  --gewicht-medium:  500;
  --gewicht-half:    600;

  --regel-strak:  1.12;
  --regel-kop:    1.2;
  --regel-tekst:  1.72;

  --spatie-kapitaal: 0.22em;  /* labels in kapitalen, zoals "CADEAUBON" */
  --leesbreedte:     64ch;

  /* ======================================================================
     RUIMTE — royaal; witruimte is rust
     ====================================================================== */
  --ruimte-3xs: 0.25rem;
  --ruimte-2xs: 0.5rem;
  --ruimte-xs:  0.75rem;
  --ruimte-s:   1rem;
  --ruimte-m:   1.5rem;
  --ruimte-l:   clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --ruimte-xl:  clamp(3rem, 2.2rem + 3.2vw, 5rem);
  --ruimte-2xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);   /* tussen secties */

  --container:       72rem;
  --container-smal:  46rem;
  --goot:            max(1.25rem, 5vw);

  /* ======================================================================
     VORM — ronde, organische hoeken
     ====================================================================== */
  --rond-s:    0.75rem;
  --rond-m:    1.25rem;
  --rond-l:    2rem;
  --rond-xl:   3rem;
  --rond-pil:  999px;
  /* Organische vorm voor foto's en gloed: een kiezel, geen rechthoek */
  --rond-kiezel: 58% 42% 46% 54% / 48% 56% 44% 52%;
  --rond-boog:   50vw 50vw var(--rond-l) var(--rond-l) / 18rem 18rem var(--rond-l) var(--rond-l);

  /* ======================================================================
     SCHADUW — warm getint, groot en vaag; nooit grijs of hard
     ====================================================================== */
  --schaduw-s:  0 1px 2px rgb(76 58 46 / 0.04), 0 4px 14px -4px rgb(76 58 46 / 0.08);
  --schaduw-m:  0 2px 6px rgb(76 58 46 / 0.04), 0 18px 40px -16px rgb(76 58 46 / 0.16);
  --schaduw-l:  0 4px 12px rgb(76 58 46 / 0.05), 0 40px 80px -30px rgb(76 58 46 / 0.24);
  --schaduw-teal: 0 14px 32px -12px rgb(5 124 120 / 0.45);
  /* Focus: zachte zandrand met daaromheen een effen teal ring (min. 3:1, WCAG 1.4.11 / 2.4.7) */
  --focus-kleur: var(--teal-700);
  --focus-ring: 0 0 0 2px var(--zand-50), 0 0 0 4.5px var(--focus-kleur);

  /* ======================================================================
     BEWEGING — traag in, zacht uit. Niets springt.
     ====================================================================== */
  --curve-zacht:   cubic-bezier(0.22, 0.61, 0.36, 1);    /* standaard */
  --curve-adem:    cubic-bezier(0.45, 0.05, 0.25, 1);    /* in- en uitademen */
  --curve-veer:    cubic-bezier(0.34, 1.32, 0.64, 1);    /* heel licht nawippen */

  --duur-snel:   220ms;   /* kleur, focus */
  --duur-m:      420ms;   /* hover, openklappen */
  --duur-l:      800ms;   /* binnenkomen van secties */
  --duur-xl:    1400ms;   /* paginaovergang, gloed */

  --zweef: -3px;          /* hoeveel een element optilt bij hover */

  /* Lagen */
  --laag-header: 50;
  --laag-overlay: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duur-snel: 1ms;
    --duur-m: 1ms;
    --duur-l: 1ms;
    --duur-xl: 1ms;
    --zweef: 0px;
  }
}