/*
    Design tokens for the app shell redesign.

    Values are taken from the approved design (light and dark palettes,
    Barlow / Barlow Condensed, radii, shadow-float). Colour tokens are the
    only thing that changes between themes; radii, shadows and font stacks
    stay constant, so shadow-float is the only non-colour token redeclared
    per theme (its blur colour differs between the light and dark canvas).

    Theme resolution order, low to high priority:
      1. `:root` below — the light palette, the default.
      2. `prefers-color-scheme: dark`, scoped to `html:not([data-theme])` so
         it only applies before the user has made an explicit choice.
      3. `[data-theme="dark"]` / `[data-theme="light"]` — an explicit choice,
         set by the inline bootstrap script in base.html or the day/night
         switch, which always wins over the OS preference.
*/

:root {
    --canvas: #F2F4F8;
    --panel: #FFFFFF;
    --panel-2: #F7F8FB;
    --ink: #1B2432;
    --ink-2: #5B6675;
    --ink-3: #8A94A3;
    --line: #D9DEE7;
    --line-2: #E8ECF2;
    --chrome: #1B2740;
    --chrome-ink: #F3F6FA;
    --chrome-ink-2: #AAB6C8;
    --accent: #1E7BD9;
    --accent-hover: #1668B8;
    --accent-ink: #FFFFFF;
    --accent-soft: #E4F0FC;
    --good: #1F8A5B;
    --good-soft: #E1F3EA;
    --warn: #B86E00;
    --warn-soft: #FBEFD9;
    --crit: #C43C3C;
    --crit-soft: #FBE3E3;
    --shadow-float: 0 12px 32px rgba(27, 36, 50, 0.16);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --font-ui: 'Barlow', 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --canvas: #121924;
        --panel: #1B2433;
        --panel-2: #202B3C;
        --ink: #EAF0F8;
        --ink-2: #A3AFC0;
        --ink-3: #7C8899;
        --line: #2C3747;
        --line-2: #253040;
        --chrome: #0F1621;
        --chrome-ink: #F3F6FA;
        --chrome-ink-2: #8F9CB0;
        --accent: #63B3FF;
        --accent-hover: #86C4FF;
        --accent-ink: #0F1621;
        --accent-soft: #1D3350;
        --good: #4CC48A;
        --good-soft: #163526;
        --warn: #F0A23B;
        --warn-soft: #3B2A10;
        --crit: #F0716B;
        --crit-soft: #3F1D1C;
        --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
}

[data-theme="dark"] {
    --canvas: #121924;
    --panel: #1B2433;
    --panel-2: #202B3C;
    --ink: #EAF0F8;
    --ink-2: #A3AFC0;
    --ink-3: #7C8899;
    --line: #2C3747;
    --line-2: #253040;
    --chrome: #0F1621;
    --chrome-ink: #F3F6FA;
    --chrome-ink-2: #8F9CB0;
    --accent: #63B3FF;
    --accent-hover: #86C4FF;
    --accent-ink: #0F1621;
    --accent-soft: #1D3350;
    --good: #4CC48A;
    --good-soft: #163526;
    --warn: #F0A23B;
    --warn-soft: #3B2A10;
    --crit: #F0716B;
    --crit-soft: #3F1D1C;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* Plate typeface: OFL licensed, see static/fonts/OFL-1.1.txt */
@font-face {
    font-family: 'D-DIN Condensed';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/D-DINCondensed-Bold.woff2') format('woff2');
}