/*
 * Kleuren van COBS en het thema collectief2024. Dit is de enige plek waar
 * kleuren gedefinieerd zijn: de plugin-CSS, het thema en het inlogscherm
 * gebruiken overal var(--tsc-*). Het thema leest dit bestand bij het builden
 * (webpack/color-tokens.js) en maakt er Sass-variabelen van; die zijn nodig
 * omdat Bootstrap met echte kleurwaarden rekent.
 *
 * Dit bestand wordt altijd geladen (frontend, dashboard, inlogscherm). Een
 * andere huisstijl is een tweede bestand variables-{naam}.css in deze map met
 * alleen de regels die afwijken; het wordt ná dit bestand geladen en wint dus.
 * Kies het via COBS > Thema instellingen > Thema-variant. Meestal volstaat
 * blok 1:
 *
 *     :root {
 *         --tsc-primary:      #0B3C5D;
 *         --tsc-primary-dark: #062A42;
 *         --tsc-secondary:    #328CC1;
 *         --tsc-accent:       #1D65A6;
 *         --tsc-text:         #1D65A6;
 *     }
 *
 * Nieuwe kleur nodig? Hier toevoegen en het thema opnieuw builden. Losse
 * hex-waarden horen niet in de stylesheets.
 */
:root {
    /* 1. Huisstijl: dit blok past een ander bedrijf aan. */
    --tsc-primary: #5F2466;         /* donkere merkkleur: koppen, actieve tabs, hover van knoppen */
    --tsc-primary-dark: #3A113F;    /* nog donkerder: waas over foto's, hero */
    --tsc-secondary: #984E98;       /* lichtere merkkleur: labels, broodkruimels, inactieve tabs */
    --tsc-accent: #833683;          /* knoppen, gekozen opties, links */
    --tsc-text: #833683;            /* lopende tekst op het merk */
    --tsc-text-dark: #201E1D;       /* lopende tekst op lichte secties */

    /* Campagnekleur van de landingspagina (citaat met beeld). */
    --tsc-campaign: #E30621;
    --tsc-campaign-darker: #771419;

    /* 2. Afgeleid van blok 1: hoeft niet mee. */
    --tsc-login-background: color-mix(in srgb, var(--tsc-primary) 25%, white);

    /* 3. Neutraal: grijzen van donker naar licht. */
    --tsc-white: #FFFFFF;
    --tsc-black: #000000;
    --tsc-grey-dark: #88838B;       /* gedempte tekst */
    --tsc-grey: #CBC8CC;            /* randen van velden en kaarten */
    --tsc-grey-light: #DADADA;      /* lichte randen, scheidingslijnen */
    --tsc-grey-lighter: #F3F2F4;    /* achtergrond van panelen en tabellen */

    /* 4. Terugkoppeling: knoppen (basis/dark) en meldingen (bg/border/text). */
    --tsc-success: #69F0AE;
    --tsc-success-dark: #3EBF84;
    --tsc-success-bg: #E8F5E9;
    --tsc-success-border: #C8E6C9;
    --tsc-success-text: #155724;

    --tsc-warning: #FFAB00;
    --tsc-warning-light: #FFE979;
    --tsc-warning-bg: #FFF3CD;
    --tsc-warning-border: #FFEEBA;
    --tsc-warning-text: #856404;

    --tsc-danger: #FF5252;
    --tsc-danger-dark: #CC4141;
    --tsc-danger-bg: #F8D7DA;
    --tsc-danger-border: #F5C6CB;
    --tsc-danger-text: #721C24;

    /* 5. Meldingstatus in COBS (overzichten, planscherm). */
    --tsc-status-high-alert: #DD2C00;
    --tsc-status-normal-alert: var(--tsc-black);
    --tsc-status-gemeld: #E65100;
    --tsc-status-voorgesteld: #FB8C00;
    --tsc-status-ingepland: var(--tsc-warning);
    --tsc-status-voltooid: #00C853;

    /* 6. Afwezigheid in het planscherm: vier onderscheidbare kleuren. */
    --tsc-afwezig-ziek: var(--tsc-danger-dark);
    --tsc-afwezig-verlof: #2563EB;
    --tsc-afwezig-feestdag: #7C3AED;
    --tsc-afwezig-notitie: var(--tsc-warning);

    /* 7. Merkkleur van WhatsApp (deelknop): verandert niet per bedrijf. */
    --tsc-whatsapp: #25D366;
    --tsc-whatsapp-dark: #1EBE5A;

    --basic-trans: 0.3s ease all;
}