/**
 * Design-tokens for dashboard v2 — Wila-branding. ÉN kilde til farver/typografi;
 * visningerne (style.css) bruger kun var() og kender ingen hex-værdier.
 *
 * Tema-model: bare :root = lys (default). Systemets mørke præference gælder kun
 * uden eksplicit valg (:not([data-theme="light"])); data-theme="dark" vinder altid.
 * Temaknappen sætter data-theme på <html> og husker valget i localStorage.
 *
 * Diagramfarver er valideret med dataviz-validatoren 2026-09-02:
 * lys #12866F på #EDEDED (3,2:1) og mørk #16A58A på både #131313 og #32373C — alle PASS.
 * Fonts: Wilas Typekit-kit xgd3zuh (cholla-sans/ministry) er domænebundet til deres
 * Adobe-konto — geometrisk sans-fallback indtil Simon evt. tilføjer domænet i kittet.
 */

:root {
    color-scheme: light;

    /* Brand */
    --brand: #16A58A;             /* Wila-grøn — logo og dekorative accenter */
    --accent: #0E7361;            /* interaktiv grøn m. hvid tekst (AA på lys) */
    --accent-ink: #FFFFFF;
    --accent-wash: rgba(22, 165, 138, 0.10);

    /* Flader (Wila lys: #E0E0E0 / #EDEDED / hvid) */
    --page: #EDEDED;
    --surface: #FFFFFF;
    --surface-2: #F5F5F5;

    /* Tekst */
    --ink: #131313;
    --ink-2: #4A5055;
    --muted: #83898E;

    /* Streger */
    --border: #E0E0E0;
    --grid: #E8E8E8;
    --baseline: #C4C8CB;

    /* Diagram */
    --series-1: #12866F;

    /* Typografi */
    --font-sans: "Avenir Next", Avenir, "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;

    /* Rum & radier */
    --radius: 10px;
    --radius-s: 7px;
    --gap: 12px;
    --pad-card: 14px 16px;

    --shadow-pop: 0 6px 22px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --accent: #16A58A;
        --accent-ink: #131313;
        --accent-wash: rgba(22, 165, 138, 0.16);
        --page: #131313;
        --surface: #32373C;
        --surface-2: #272B2F;
        --ink: #FFFFFF;
        --ink-2: #C9CDD1;
        --muted: #8B9195;
        --border: rgba(255, 255, 255, 0.12);
        --grid: rgba(255, 255, 255, 0.09);
        --baseline: #4A5055;
        --series-1: #16A58A;
        --shadow-pop: 0 6px 22px rgba(0, 0, 0, 0.5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --accent: #16A58A;
    --accent-ink: #131313;
    --accent-wash: rgba(22, 165, 138, 0.16);
    --page: #131313;
    --surface: #32373C;
    --surface-2: #272B2F;
    --ink: #FFFFFF;
    --ink-2: #C9CDD1;
    --muted: #8B9195;
    --border: rgba(255, 255, 255, 0.12);
    --grid: rgba(255, 255, 255, 0.09);
    --baseline: #4A5055;
    --series-1: #16A58A;
    --shadow-pop: 0 6px 22px rgba(0, 0, 0, 0.5);
}