/* ============================================================
   TOKENS — Bevallingscursus
   Warm · Natuurlijk · Rustig · Verzorgd
   ============================================================ */

:root{

  /* ---- Kleur: basis ---- */
  --blush:        #f6f0f0;   /* zachte warme achtergrond */
  --blush-deep:   #E5D2D0;   /* alternatieve secties */
  --blush-line:   #D5BCB9;   /* subtiele borders */
  --cream:        #F8F3EC;   /* warm gebroken wit */
  --white:        #FFFFFF;


  /* ---- Forest ---- */
  --forest:       #30304c;   /* hoofdgroen */
  --forest-deep:  #1e1e30;   /* donker groen */
  --forest-soft:  #32324f;   /* zachte variant */


  /* ---- Teal (accent) — nu gelijk aan de knopkleur, geen apart blauw meer ---- */
  --teal:         #30304c;   /* zelfde als --forest */
  --teal-deep:    #1e1e30;   /* zelfde als --forest-deep */
  --teal-tint:    #E0E0E4;   /* lichte, neutrale tint hiervan — voor badge-achtergronden */


  /* ---- Tekst ---- */
  --ink:          #302C29;   /* warme hoofdtekst */
  --ink-soft:     #716963;   /* secundaire tekst */


  /* ---- Warm accent ---- */
  --amber:        #B77A55;
  --amber-tint:   #F3E4D9;


  /* ---- Lijnen ---- */
  --line:         rgba(48,76,67,.13);
  --line-soft:    rgba(48,76,67,.07);


  /* ---- Schaduwen ---- */
  --shadow-color: 35,48,43;


  /* ============================================================
     TYPOGRAFIE
     ============================================================ */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-script:  "Beau Rivage", "Segoe Script", cursive;
  --font-body:    "Karla", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  --fs-h4: 1.1rem;

  --fs-lede: clamp(1.05rem, .95rem + .4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .8rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;


  /* ============================================================
     RUIMTE
     ============================================================ */

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;


  /* ============================================================
     VORM
     ============================================================ */

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-pill: 999px;


  /* ============================================================
     SCHADUWEN
     ============================================================ */

  --shadow-s:
    0 2px 10px rgba(var(--shadow-color), .05);

  --shadow-m:
    0 10px 30px rgba(var(--shadow-color), .09);

  --shadow-l:
    0 20px 50px rgba(var(--shadow-color), .14);


  /* ============================================================
     LAYOUT
     ============================================================ */

  --container-w: 1120px;

  --ease: cubic-bezier(.22,.8,.32,1);
}