/* ============================================================
   tokens.css: alle design tokens van de site (designtaal F).
   Bron van waarheid: sandbox-claude/design-f.md.
   Kleuren komen ALLEEN hiervandaan; nooit hex in andere bestanden
   (enige uitzondering: assets/img/favicon.svg, standalone bestand).
   Designtaal F is flat: geen gradients, geen schaduwen, geen
   afgeronde hoeken. Er bestaan acht kleuren plus de vaste
   tinten voor tekst en lijnen op donkere (--ink) vlakken.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---- De acht kleuren van designtaal F ---- */
    --ink: #171512;        /* tekst, kaders, donkere vlakken, footer */
    --red: #a81619;        /* actiekleur: links, knoppen, accenten */
    --red-dark: #7e1013;   /* hover op rood */
    --yellow: #f1c902;     /* signaalkleur: markering, gele vlakken */
    --bg: #ffffff;         /* paginavlak */
    --bg-alt: #f6f3eb;     /* afwisselend sectievlak (warm gebroken wit) */
    --border: #e4e1da;     /* hairlines, secundaire randen */
    --muted: #55524b;      /* secundaire tekst (datums, subregels) */

    /* ---- Vaste tinten op donker (--ink) vlak ---- */
    --on-ink: #f2efe8;         /* bodytekst op donker vlak */
    --on-ink-soft: #c6c2b6;    /* subtekst op donker vlak */
    --on-ink-line: #3c3931;    /* scheidingslijnen op donker vlak */

    /* Scheidingslijn op geel vlak (inkt op kwart sterkte) */
    --on-yellow-line: rgba(23, 21, 18, 0.25);

    /* ---- Typografie ---- */
    --font: 'Inter', -apple-system, system-ui, sans-serif;
    --font-display: 'Sora', 'Inter', sans-serif;
    --fs-root: 18px;
    --lh-body: 1.65;
    --lh-tight: 1.12;

    /* ---- Layout ---- */
    --container-max: 1160px;
    --container-pad: 24px;
    --gutter: 22px;
    --section-pad: 70px;
    --section-pad-sm: 60px;

    /* ---- Kaders ---- */
    --border-hair: 1px solid var(--border);
    --border-strong: 2px solid var(--ink);

    /* ---- Aspect-ratio's voor afbeeldingsslots (zie README) ---- */
    --ratio-hero: 5 / 4;
    --ratio-wide: 21 / 9;
    --ratio-card: 16 / 9;
    --ratio-square: 1 / 1;
    --ratio-photo: 16 / 21;
    --ratio-map: 16 / 10;
}