/*
 * DESIGNTOKENS — hele udseendet styres herfra.
 * Vil du ændre look'et, skal du kun røre denne fil. site.css bruger udelukkende
 * disse variabler og indeholder ingen hårdkodede farver eller skrifttyper.
 *
 * Farverne kommer fra en valideret dataviz-palet (CVD-testet i begge modes).
 * Statusfarverne (--good/--warning/--critical) bærer aldrig betydning alene —
 * der står altid en tekst ved siden af.
 */
:root {
    color-scheme: light;

    /* Flader */
    --plane: #f9f9f7;           /* sidens baggrund */
    --surface: #fcfcfb;         /* kort, tabeller, målerbaggrund */
    --surface-sunken: #f0efec;  /* målerens tomme spor */

    /* Blæk */
    --ink: #0b0b0b;
    --ink-secondary: #52514e;
    --ink-muted: #898781;

    /* Streger */
    --line: #e1e0d9;
    --line-strong: #c3c2b7;

    /* Data */
    --series-1: #2a78d6;        /* CPU */
    --series-2: #eb6834;        /* hukommelse */
    --series-3: #1baf7a;        /* disk */
    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;

    /* Typografi — det retro-agtige ligger i mono-tallene */
    --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    --tracking-label: 0.08em;   /* spatieret versalt label */

    /* Form */
    --radius: 4px;              /* kantet frem for rundt = mindre "app", mere "terminal" */
    --gap: 1rem;
    --hairline: 1px;
    --meter-height: 10px;
    --meter-segment: 6px;       /* LED-blokkens bredde */
    --meter-gap: 2px;           /* mellemrum i fladefarve mellem blokke */
    --shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --plane: #0d0d0d;
        --surface: #1a1a19;
        --surface-sunken: #2c2c2a;
        --ink: #ffffff;
        --ink-secondary: #c3c2b7;
        --ink-muted: #898781;
        --line: #2c2c2a;
        --line-strong: #383835;
        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-sunken: #2c2c2a;
    --ink: #ffffff;
    --ink-secondary: #c3c2b7;
    --ink-muted: #898781;
    --line: #2c2c2a;
    --line-strong: #383835;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
}