/*
 * De tokens van de winkel — de onderlaag waar elk thema op bouwt.
 *
 * Alles hieronder is een terugvalwaarde. Wat je in de winkel ziet, komt uit
 * thema.json van het actieve thema: de standaarden daaruit worden als een
 * klein <style>-blok ná dit bestand in de pagina gezet en winnen dus. Zet de
 * winkelier iets bij in Beheer > Vormgeving, dan wint dát weer.
 *
 * De reden dat het hier tóch staat: een thema hoeft niet elke token op te
 * geven. Wie alleen een accentkleur kiest, krijgt de rest hiervandaan — en
 * omdat de afgeleide kleuren met color-mix uit het accent gerekend worden,
 * klopt het geheel ook bij een kleur die niemand had zien aankomen.
 *
 * De drie kleuren hieronder zijn met opzet neutraal. Dit thema is geen
 * winkel maar bouwmateriaal, en een basis die er al uitziet als een
 * speelgoedwinkel is een basis waar je tegenaan werkt.
 */

:root {
    /* ────────────────────────────────────────────────────────── de kleuren */

    /* De vier accenttokens horen bij elkaar: de kleur zelf, een diepere
       variant voor tekst op wit en voor de zweefstand, een doorschijnende
       waas voor vlakken, en de kleur die erop leesbaar is. Wie de
       accentkleur in het beheer wijzigt, krijgt de andere drie automatisch
       berekend — dat scheelt drie kansen om er een onleesbare combinatie
       van te maken. */
    --accent: #2F6F62;
    --accent-diep: color-mix(in oklab, var(--accent) 86%, #000);
    /* De waas volgt de accentkleur vanzelf: color-mix rekent hem uit in
       oklab, dus hij klopt ook als de winkelier morgen paars kiest. Dat is
       één ding minder dat uit de pas kan lopen. */
    --accent-waas: color-mix(in oklab, var(--accent) 16%, transparent);
    /* Donkere tekst op het oranje, niet wit. Op het oog lijkt wit
       vanzelfsprekend, maar #E0501F haalt met wit maar 3,9:1 en met deze
       donkere toon 5,3:1 — en een knoplabel hoort AA te halen. Het beheer
       rekent dit bij een andere accentkleur opnieuw uit. */
    --op-accent: #16150F;

    /* De steunkleur: het groen van het draakje. Voor de speelhoek, voor
       "op voorraad" en voor de tweede knop naast het oranje. */
    --steun: #C08A3E;
    --steun-waas: color-mix(in oklab, var(--steun) 14%, transparent);
    --op-steun: #16150F;

    /* De donkere band van de hero. Met opzet géén paar dat meedraait met
       licht of donker: de hero is een banier en hoort in beide standen
       donker te zijn, met het beeld en de gele gloed erop. Wie hem toch wil
       laten meedraaien, zet deze twee in zijn eigen thema om. */
    --banier: #16150F;
    --op-banier: #F2F0E9;

    --inkt: #1A1A1A;
    --inkt-zacht: #3F3D33;
    /* Nagemeten op de drie ondergronden die er in de praktijk onder liggen:
       wit, de warme grond en de iets diepere band van een kindthema. Die
       laatste is de strengste, en daar zakte het oude #6B6A5F net onder de
       4,5 met 4,43. Twee tinten donkerder haalt overal 4,5 en verandert niets
       aan hoe het oogt. */
    --inkt-gedempt: #69685E;

    /* De flauwste van de vier, en tot 6 september 2026 te flauw: #9C9A8E gaf
       2,8 op wit en 2,5 op de warme grond, waar 4,5 de ondergrens is. Dat is
       precies het grijs waarvan een ontwerper zegt dat het rustig oogt en een
       klant van vijftig zegt dat hij het niet leest. Deze waarde haalt 5,2 op
       wit en 4,6 op de grond eronder, en oogt nog altijd terughoudend. */
    --inkt-flauw: #6A6860;

    --grond: #FFFFFF;
    --grond-warm: #FAF9F5;
    --grond-diep: #F2F0E9;
    --paneel: #FFFFFF;

    --lijn: #E4E1D6;
    --lijn-zacht: #EFEDE5;
    --lijn-sterk: #CFCBBC;

    /* Statuskleuren. Sober, want in een winkel moet het accent het enige
       zijn dat de aandacht trekt. */
    --goed: #2C7A4B;
    --goed-waas: rgb(44 122 75 / 0.10);
    --korting: #C2352B;
    --korting-waas: rgb(194 53 43 / 0.10);
    --let-op: #A96A0C;
    --let-op-waas: rgb(169 106 12 / 0.10);

    /* De diepte van een kaart in rust en onder de muis. Apart van de vier
       schaduwen hierboven, want die worden overal gebruikt en een thema dat
       ze uitzet — de skateshop doet dat, met opzet — hoort daarmee niet
       meteen ook zijn kaarten plat te leggen. Twee lagen per waarde: een
       scherpe die de rand aanzet en een zachte die tilt. Eén laag ziet er
       altijd uit als een filter. */
    --diepte-rust:
        inset 0 1px 0 rgb(255 255 255 / 0.85),
        inset 0 -1px 0 rgb(22 21 15 / 0.06),
        0 1px 1px rgb(22 21 15 / 0.05),
        0 4px 12px rgb(22 21 15 / 0.07);
    --diepte-op:
        inset 0 1px 0 rgb(255 255 255 / 0.95),
        inset 0 -1px 0 rgb(22 21 15 / 0.08),
        0 2px 4px rgb(22 21 15 / 0.08),
        0 18px 40px rgb(22 21 15 / 0.16);

    /* Het reliëf apart van de diepte. Diepte tilt een ding van de bladzijde;
       reliëf zegt dat het ding zelf dikte heeft. Eén lichte lijn bovenaan en
       één donkere onderaan is genoeg — wie er een echte schuine rand van maakt,
       krijgt een knop uit 2003 terug. */
    --relief:
        inset 0 1px 0 rgb(255 255 255 / 0.9),
        inset 0 -1px 0 rgb(22 21 15 / 0.07);

    --gloed: 0 0 0 1px rgb(255 255 255 / 0.5);

    --schaduw-1: 0 1px 2px rgb(22 21 15 / 0.05);
    --schaduw-2: 0 4px 14px rgb(22 21 15 / 0.07);
    --schaduw-3: 0 12px 32px rgb(22 21 15 / 0.11);
    --schaduw-4: 0 28px 68px rgb(22 21 15 / 0.18);

    /* ─────────────────────────────────────────────────────── typografie */

    /*
     * De letters komen uit thema.json en worden door de basislaag als
     * --letter-kop en --letter-lopend in de pagina gezet. Hier staat alleen
     * waar op teruggevallen wordt als een thema er niets over zegt: de
     * systeemstapel, die er al is en nul bytes kost.
     *
     * Waarom via een tussenstap en niet rechtstreeks: de tweehonderd regels
     * hieronder en in winkel.css wijzen naar --kop-font. Die hoeven niets te
     * weten van waar de naam vandaan komt, en een thema dat morgen een ander
     * lettertype kiest, raakt geen enkele van die regels aan.
     */
    --kop-font: var(--letter-kop, ui-sans-serif, system-ui, "Segoe UI", sans-serif);
    --tekst-font: var(--letter-lopend, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --code-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Alleen de koppen schuiven mee met de kopschaal. De lopende tekst
       blijft staan waar hij staat: die hoort leesbaar te zijn en niet
       modieus. */
    --kop-schaal: 1;

    --tekst-xs: 0.75rem;
    --tekst-s: 0.8125rem;
    --tekst-m: 0.9375rem;
    --tekst-l: 1.0625rem;
    --tekst-xl: calc(1.375rem * var(--kop-schaal));
    --tekst-2xl: calc(1.75rem * var(--kop-schaal));
    --tekst-3xl: calc(2.25rem * var(--kop-schaal));
    --tekst-4xl: calc(3rem * var(--kop-schaal));
    --tekst-5xl: calc(clamp(2.5rem, 7vw, 4.75rem) * var(--kop-schaal));

    --spatie-kop: -0.03em;
    --spatie-titel: -0.018em;
    --spatie-label: 0.08em;

    --regel-strak: 1.1;
    --regel-kop: 1.18;
    --regel-normaal: 1.6;

    /* ──────────────────────────────────────────────────────────── ruimte */

    /* Alle ruimte hangt aan één schaal. Zet die op 0,9 en de hele site
       staat dichter op elkaar; op 1,2 en ze wordt rustiger en duurder. Dat
       is één schuif in het beheer in plaats van twaalf getallen. */
    --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.25rem * var(--ruimte-schaal));
    --ruimte-6: calc(1.5rem * var(--ruimte-schaal));
    --ruimte-8: calc(2rem * var(--ruimte-schaal));
    --ruimte-10: calc(2.5rem * var(--ruimte-schaal));
    --ruimte-12: calc(3rem * var(--ruimte-schaal));
    --ruimte-16: calc(4rem * var(--ruimte-schaal));
    --ruimte-20: calc(5rem * var(--ruimte-schaal));
    --ruimte-24: calc(6rem * var(--ruimte-schaal));

    /* De vier radiussen hangen aan één getal. Het beheer zet --radius-l en
       de rest volgt vanzelf — in de CSS zelf, niet in PHP, zodat er maar
       één plek is waar de verhouding staat. */
    --radius-l: 14px;
    --radius-s: calc(var(--radius-l) / 3.5);
    --radius-m: calc(var(--radius-l) / 1.75);
    --radius-xl: calc(var(--radius-l) * 1.45);
    --radius-rond: 999px;

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

    --knop-hoogte: 44px;
    --veld-hoogte: 46px;

    /* ────────────────────────────────────────────────────────── beweging */

    /* Tempo en veerkracht zijn de twee knoppen van de beweging. Het tempo
       vermenigvuldigt elke duur; de veerkracht bepaalt hoever een element
       doorschiet voor het gaat liggen — nul is zakelijk, één is speels. */
    --tempo: 1;
    --veer: 0.4;

    --soepel: cubic-bezier(0.2, 0.7, 0.3, 1);
    --veerkrachtig: cubic-bezier(0.34, calc(1 + var(--veer)), 0.64, 1);

    --duur-snel: calc(140ms * var(--tempo));
    --duur-normaal: calc(220ms * var(--tempo));
    --duur-traag: calc(380ms * var(--tempo));

    --laag-plakkend: 20;
    --laag-uitklap: 40;
    --laag-sluier: 60;
    --laag-lade: 70;
    --laag-melding: 90;

    color-scheme: light;
}

/*
 * De donkere stand.
 *
 * Bij een winkel is dit niet vanzelfsprekend: productfoto's zijn gemaakt op
 * wit, en die staan op zwart al snel te schreeuwen. De oplossing is dat het
 * beeldvlak zelf licht blijft — de kaart is warm gebroken wit, de pagina
 * eromheen is inkt. Zo blijft een product er goed uitzien en oogt het geheel
 * toch als een donker thema.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --inkt: #F2F0E9;
        --inkt-zacht: #C4C1B6;
        --inkt-gedempt: #8E8B80;
        --inkt-flauw: #837F76;

        --grond: #0B0B0A;
        --grond-warm: #121210;
        --grond-diep: #1A1A17;
        --paneel: #161613;

        --lijn: #26251F;
        --lijn-zacht: #1E1E1A;
        --lijn-sterk: #34332B;

        --accent-waas: color-mix(in oklab, var(--accent) 22%, transparent);
        --steun-waas: color-mix(in oklab, var(--steun) 20%, transparent);

        --goed: #4FA873;
        --goed-waas: rgb(79 168 115 / 0.14);
        --korting: #E4695C;
        --korting-waas: rgb(228 105 92 / 0.14);
        --let-op: #D9A03C;
        --let-op-waas: rgb(217 160 60 / 0.14);

        --diepte-rust:
            inset 0 1px 0 rgb(255 255 255 / 0.08),
            inset 0 -1px 0 rgb(0 0 0 / 0.5),
            0 6px 18px rgb(0 0 0 / 0.42);
        --diepte-op:
            inset 0 1px 0 rgb(255 255 255 / 0.14),
            inset 0 -1px 0 rgb(0 0 0 / 0.55),
            0 18px 40px rgb(0 0 0 / 0.52);

        --relief:
            inset 0 1px 0 rgb(255 255 255 / 0.10),
            inset 0 -1px 0 rgb(0 0 0 / 0.5);

        --gloed: 0 0 0 1px rgb(255 255 255 / 0.08);

        --schaduw-1: 0 1px 2px rgb(0 0 0 / 0.5);
        --schaduw-2: 0 4px 14px rgb(0 0 0 / 0.5);
        --schaduw-3: 0 12px 32px rgb(0 0 0 / 0.55);
        --schaduw-4: 0 28px 68px rgb(0 0 0 / 0.6);

        color-scheme: dark;
    }
}

:root[data-thema="donker"] {
    --inkt: #F2F0E9;
    --inkt-zacht: #C4C1B6;
    --inkt-gedempt: #8E8B80;
    --inkt-flauw: #837F76;

    --grond: #0B0B0A;
    --grond-warm: #121210;
    --grond-diep: #1A1A17;
    --paneel: #161613;

    --lijn: #26251F;
    --lijn-zacht: #1E1E1A;
    --lijn-sterk: #34332B;

    --accent-waas: rgb(244 226 6 / 0.13);

    --goed: #4FA873;
    --goed-waas: rgb(79 168 115 / 0.14);
    --korting: #E4695C;
    --korting-waas: rgb(228 105 92 / 0.14);
    --let-op: #D9A03C;
    --let-op-waas: rgb(217 160 60 / 0.14);

    --diepte-rust:
        inset 0 1px 0 rgb(255 255 255 / 0.08),
        inset 0 -1px 0 rgb(0 0 0 / 0.5),
        0 6px 18px rgb(0 0 0 / 0.42);
    --diepte-op:
        inset 0 1px 0 rgb(255 255 255 / 0.14),
        inset 0 -1px 0 rgb(0 0 0 / 0.55),
        0 18px 40px rgb(0 0 0 / 0.52);

    --relief:
        inset 0 1px 0 rgb(255 255 255 / 0.10),
        inset 0 -1px 0 rgb(0 0 0 / 0.5);

    --gloed: 0 0 0 1px rgb(255 255 255 / 0.08);

    --schaduw-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --schaduw-2: 0 4px 14px rgb(0 0 0 / 0.5);
    --schaduw-3: 0 12px 32px rgb(0 0 0 / 0.55);
    --schaduw-4: 0 28px 68px rgb(0 0 0 / 0.6);

    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duur-snel: 0.01ms;
        --duur-normaal: 0.01ms;
        --duur-traag: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}