/*
 * Zakgeldbaas design-tokens - web.
 * Deze waarden komen exact uit /design/tokens.md; de iOS-app gebruikt dezelfde
 * set in ios/Zakgeldbaas/DesignSystem/Tokens.swift.
 */

:root {
    /* Basis (licht) */
    --kleur-achtergrond: #F5F3FA;
    --kleur-oppervlak: #FFFFFF;
    --kleur-oppervlak-zacht: #F0EEF7;
    --kleur-rand: #E4E0EE;
    --kleur-tekst: #1E1B2E;
    --kleur-tekst-zacht: #6B6880;
    /* Tekst op gevulde accentvlakken. Blijft in beide thema's wit: de
       profielkleuren zijn verzadigde middentonen, dus donkere tekst zou daar
       te weinig contrast geven. */
    --kleur-op-accent: #FFFFFF;

    /* Status */
    --kleur-positief: #1F9D6B;
    --kleur-negatief: #D2523F;
    --kleur-wachtend: #E0A030;
    --kleur-info: #4A6BD6;

    /* Profielkleuren */
    --kleur-paars: #7C5CFF;
    --kleur-blauw: #2E9BF0;
    --kleur-groen: #22B573;
    --kleur-oranje: #F5883B;
    --kleur-roze: #F0629B;
    --kleur-geel: #F2C230;

    /* Merkkleur + actieve profielkleur (wordt per kind overschreven) */
    --kleur-merk: var(--kleur-paars);
    --accent: var(--kleur-merk);
    --accent-zacht: rgba(124, 92, 255, 0.12);

    /* Vorm */
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 22px;
    --radius-xl: 28px;
    --radius-rond: 999px;
    --schaduw-kaart: 0 6px 20px rgba(30, 27, 46, 0.08);
    --schaduw-hoog: 0 12px 32px rgba(30, 27, 46, 0.14);
    --rand-breedte: 1px;

    /* Ruimte */
    --ruimte-1: 4px;
    --ruimte-2: 8px;
    --ruimte-3: 12px;
    --ruimte-4: 16px;
    --ruimte-5: 24px;
    --ruimte-6: 32px;
    --ruimte-7: 48px;

    /* Typografie */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
    --tekst-saldo: 700 40px/1.15 var(--font);
    --tekst-titel: 700 28px/1.35 var(--font);
    --tekst-kop: 600 20px/1.35 var(--font);
    --tekst-body: 400 16px/1.5 var(--font);
    --tekst-nadruk: 600 16px/1.5 var(--font);
    --tekst-bijschrift: 400 13px/1.45 var(--font);
    --tekst-label: 600 12px/1.4 var(--font);

    /* Animatie */
    --duur-snel: 120ms;
    --duur-normaal: 220ms;
    --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --kleur-achtergrond: #121020;
        --kleur-oppervlak: #1D1A2E;
        --kleur-oppervlak-zacht: #272338;
        --kleur-rand: #332E48;
        --kleur-tekst: #F5F3FA;
        --kleur-tekst-zacht: #A9A4BD;
        --schaduw-kaart: 0 6px 20px rgba(0, 0, 0, 0.35);
        --schaduw-hoog: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
}

/* Profielkleur per kind: <div data-kleur="blauw"> */
[data-kleur="paars"] { --accent: var(--kleur-paars); --accent-zacht: rgba(124, 92, 255, 0.12); }
[data-kleur="blauw"] { --accent: var(--kleur-blauw); --accent-zacht: rgba(46, 155, 240, 0.12); }
[data-kleur="groen"] { --accent: var(--kleur-groen); --accent-zacht: rgba(34, 181, 115, 0.12); }
[data-kleur="oranje"] { --accent: var(--kleur-oranje); --accent-zacht: rgba(245, 136, 59, 0.12); }
[data-kleur="roze"] { --accent: var(--kleur-roze); --accent-zacht: rgba(240, 98, 155, 0.12); }
[data-kleur="geel"] { --accent: var(--kleur-geel); --accent-zacht: rgba(242, 194, 48, 0.14); }