/* =============================================================
   TOKENS.CSS — Heart Workx design tokens
   Geladen op elke pagina, altijd als eerste.

   Kleuren komen uit config.json via head.php (:root inline).
   Hier staan alleen de vaste tokens die niet via het CMS
   worden beheerd — spacing, radius, schaduwen, animaties,
   breekpunten als custom properties.

   NOOIT hier aanpassen zonder ook head.php te controleren.
   ============================================================= */

:root {

    /* ── Kleurenpalet (waarden via head.php uit config/db) ──────
       --hoofdkleur    standaard #a32508  rood  — CTA, knoppen
       --accentkleur   standaard #E8C9A0  zand  — accenten donker
       --donker        standaard #2c4a52  blauwgroen — L5, nav
       --achtergrond   standaard #FAF7F2  crème — body
       --tekstkleur    standaard #2C2C2C  bijna-zwart
       --zacht         standaard #F5EDE4  warm zacht — L2
       --wit           standaard #FFFFFF
       ──────────────────────────────────────────────────────── */

    /* Afgeleide kleuren — niet via CMS, wel consistente tokens */
    --donker-diep:        #1e333a;   /* hover staat donker */
    --donker-licht:       #c8dde2;   /* subtiele lijn op donker */
    --tekst-zacht:        #9B9589;   /* secondaire tekst */
    --tekst-op-donker:    rgba(255, 255, 255, 0.85);
    --overlay-donker:     rgba(28, 40, 51, 0.62);  /* L1 foto overlay */
    --schaduw-kleur:      rgba(0, 0, 0, 0.08);

    /* ── Spacing schaal (mobile-first, 4px grid) ─────────────── */
    --ruimte-1:   4px;
    --ruimte-2:   8px;
    --ruimte-3:   12px;
    --ruimte-4:   16px;
    --ruimte-5:   24px;
    --ruimte-6:   32px;
    --ruimte-7:   48px;
    --ruimte-8:   64px;
    --ruimte-9:   80px;
    --ruimte-10:  100px;

    /* Sectie padding — mobiel basis, groeit via media queries */
    --sectie-v:      56px;   /* verticaal */
    --sectie-h:      20px;   /* horizontaal */
    --container-max: 1200px;

    /* ── Typografie ──────────────────────────────────────────── */
    /* --display-font en --body-font komen uit head.php          */
    --tekst-xs:   0.70rem;   /* label, meta */
    --tekst-sm:   0.85rem;   /* klein, microcopy */
    --tekst-base: 1rem;      /* lopende tekst */
    --tekst-md:   1.05rem;   /* iets groter intro */
    --tekst-lg:   1.2rem;    /* lead */

    --kop-h1: clamp(2rem,   5vw, 3.2rem);
    --kop-h2: clamp(1.6rem, 4vw, 2.4rem);
    --kop-h3: clamp(1.2rem, 3vw, 1.6rem);

    --regelafstand-kop:  1.2;
    --regelafstand-tekst: 1.75;

    --gewicht-normaal: 400;
    --gewicht-semi:    600;
    --gewicht-vet:     700;

    --spatie-label:  3px;    /* letter-spacing labels */
    --spatie-knop:   0.5px;

    /* ── Vormen ──────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-rond: 999px;

    /* ── Schaduwen ───────────────────────────────────────────── */
    --schaduw-xs:  0 1px  4px  var(--schaduw-kleur);
    --schaduw-sm:  0 4px  12px var(--schaduw-kleur);
    --schaduw-md:  0 8px  24px var(--schaduw-kleur);
    --schaduw-lg:  0 16px 48px var(--schaduw-kleur);

    /* ── Animaties ───────────────────────────────────────────── */
    --overgang-snel:    0.15s ease;
    --overgang-normaal: 0.25s ease;
    --overgang-traag:   0.4s  ease;

    /* Scroll-animatie voor entrance (Intersection Observer) */
    --scroll-duur:      0.55s;
    --scroll-vertraging: 0.08s;  /* stapeling per kind-element */
    --scroll-afstand:   28px;    /* opwaartse beweging bij inkomst */

    /* ── Z-lagen ─────────────────────────────────────────────── */
    --z-basis:   0;
    --z-laag:    10;
    --z-nav:     100;
    --z-zweef:   200;
    --z-overlay: 300;
    --z-modal:   400;

    /* ── Breekpunten als tokens (informatief — gebruik in comments)
       480px  grote telefoon / liggend
       768px  tablet / iPad staand
       1024px iPad liggend / laptop
       1280px desktop breed
       ──────────────────────────────────────────────────────── */
}

/* Sectie ruimte groeit mee met het scherm */
@media (min-width: 480px) {
    :root {
        --sectie-v: 64px;
        --sectie-h: 24px;
    }
}
@media (min-width: 768px) {
    :root {
        --sectie-v: 80px;
        --sectie-h: 32px;
    }
}
@media (min-width: 1024px) {
    :root {
        --sectie-v:  96px;
        --sectie-h:  48px;
    }
}
@media (min-width: 1280px) {
    :root {
        --sectie-v:  112px;
    }
}