/*
    De tokens van het Pavinom-thema.

    Eén plek voor kleur, ruimte, typografie en tempo. Alles daaronder in
    site.css verwijst hiernaar en gebruikt nooit een losse waarde — dat is wat
    maakt dat de schuifjes in Beheer > Vormgeving écht iets doen in plaats van
    één element te verzetten.

    De kleuren komen uit het wapenschild van de club: het diepe blauw van het
    veld, het oranje van de kroon, het goud van het lint. De vierde kleur staat
    er niet op maar ligt eronder — de terracotta van het gravel.
*/

:root {
    /* ── de kleuren van de club ───────────────────────────────────── */
    --blauw: #1B3A8F;
    --blauw-diep: #12275F;
    --blauw-nacht: #0C1A42;
    --op-blauw: #FFFFFF;

    --oranje: #F4791F;
    --oranje-diep: #D2600F;
    --op-oranje: #FFFFFF;

    --goud: #FFC72C;
    --gravel: #B4573A;

    /* ── grond en inkt ────────────────────────────────────────────── */
    --papier: #F7F5F1;
    --papier-op: #FFFFFF;
    --papier-diep: #EDE9E2;
    --inkt: #181A1F;
    --inkt-zacht: #4A4F5A;
    --inkt-flauw: #767C88;
    --lijn: #E1DDD4;
    --lijn-sterk: #CFC9BD;

    /* ── ruimte ───────────────────────────────────────────────────── */
    --ruimte-schaal: 1;
    --ruimte-1: calc(0.25rem * var(--ruimte-schaal));
    --ruimte-2: calc(0.5rem * var(--ruimte-schaal));
    --ruimte-3: calc(0.75rem * var(--ruimte-schaal));
    --ruimte-4: calc(1rem * var(--ruimte-schaal));
    --ruimte-5: calc(1.5rem * var(--ruimte-schaal));
    --ruimte-6: calc(2rem * var(--ruimte-schaal));
    --ruimte-7: calc(3rem * var(--ruimte-schaal));
    --ruimte-8: calc(4.5rem * var(--ruimte-schaal));
    --ruimte-9: calc(6.5rem * var(--ruimte-schaal));

    --breedte: 1180px;
    --breedte-smal: 760px;
    --rand: clamp(1rem, 4vw, 2.5rem);

    /* ── typografie ───────────────────────────────────────────────── */
    --lettertype: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --lettertype-kop: "Bricolage Grotesque", var(--lettertype);
    --lettertype-code: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

    --kop-schaal: 1;
    --tekst-xs: 0.78rem;
    --tekst-s: 0.875rem;
    --tekst-m: 1.0625rem;
    --tekst-l: 1.1875rem;
    --tekst-xl: calc(1.45rem * var(--kop-schaal));
    --tekst-2xl: calc(clamp(1.6rem, 3.2vw, 2.1rem) * var(--kop-schaal));
    --tekst-3xl: calc(clamp(2rem, 4.6vw, 3rem) * var(--kop-schaal));
    --tekst-4xl: calc(clamp(2.6rem, 6.4vw, 4.4rem) * var(--kop-schaal));

    /* ── vorm ─────────────────────────────────────────────────────── */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --radius-xl: calc(var(--radius-l) * 1.7);
    --radius-rond: 999px;

    --schaduw-1: 0 1px 2px rgb(24 26 31 / .05), 0 1px 3px rgb(24 26 31 / .06);
    --schaduw-2: 0 4px 10px rgb(24 26 31 / .06), 0 12px 28px rgb(24 26 31 / .07);
    --schaduw-3: 0 10px 24px rgb(18 39 95 / .12), 0 30px 60px rgb(18 39 95 / .14);

    /* ── beweging ─────────────────────────────────────────────────── */
    --tempo: 1;
    --snel: calc(120ms * var(--tempo));
    --normaal: calc(240ms * var(--tempo));
    --traag: calc(480ms * var(--tempo));
    --boog: cubic-bezier(.2, .7, .3, 1);

    --banner-duur: 38s;

    /* ── de kop ───────────────────────────────────────────────────── */
    --kop-hoogte: 7.4;
    --navhoogte: 68px;

    color-scheme: light dark;
}

/*
    Donker. Niet de lichte versie met omgekeerde waarden, maar een eigen
    afstemming: het clubblauw wordt op een donkere grond te zwaar, dus daar
    neemt een lichter blauw het over en doet het goud het werk van het accent.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --blauw: #6E8FE8;
        --blauw-diep: #4E6FCB;
        --blauw-nacht: #0A1026;
        --op-blauw: #0A1026;

        --oranje: #FF9244;
        --oranje-diep: #F4791F;
        --op-oranje: #241002;

        --papier: #101218;
        --papier-op: #171A22;
        --papier-diep: #0B0D12;
        --inkt: #ECEEF3;
        --inkt-zacht: #A9B0BE;
        --inkt-flauw: #7B8393;
        --lijn: #262A34;
        --lijn-sterk: #333947;

        --schaduw-1: 0 1px 2px rgb(0 0 0 / .4);
        --schaduw-2: 0 4px 12px rgb(0 0 0 / .45);
        --schaduw-3: 0 12px 32px rgb(0 0 0 / .55);
    }
}

:root[data-thema="donker"] {
    --blauw: #6E8FE8;
    --blauw-diep: #4E6FCB;
    --blauw-nacht: #0A1026;
    --op-blauw: #0A1026;

    --oranje: #FF9244;
    --oranje-diep: #F4791F;
    --op-oranje: #241002;

    --papier: #101218;
    --papier-op: #171A22;
    --papier-diep: #0B0D12;
    --inkt: #ECEEF3;
    --inkt-zacht: #A9B0BE;
    --inkt-flauw: #7B8393;
    --lijn: #262A34;
    --lijn-sterk: #333947;

    --schaduw-1: 0 1px 2px rgb(0 0 0 / .4);
    --schaduw-2: 0 4px 12px rgb(0 0 0 / .45);
    --schaduw-3: 0 12px 32px rgb(0 0 0 / .55);
}

/*
    Wie in zijn besturingssysteem zegt dat hij minder beweging wil, meent dat.
    Dat is geen voorkeur maar vaak een medische noodzaak — dus geen halve maat
    hier: alles stil, ook de lichtkrant.
*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}