/* The dashboard's colour tokens.
 *
 * GENERATED — do not hand-edit. The values are solved, not chosen:
 * `tools/palette.py` in the superstructur.es repo derives every token from
 * two knobs (--fill's hue and the accent) and pins each one's lightness to a
 * value measured against its WCAG floor. Editing a hex here does not change
 * a colour, it breaks a guarantee.
 *
 * Provenance: the website's `verify:palette` job runs
 * `python tools/palette.py --emit-css` and publishes the result as
 * palette.css. This file is that block, wrapped in the same selectors
 * site.css uses so the site's own theme toggle works here unchanged.
 *
 * To change a colour: change the knob in the website repo, re-run the tool
 * there, and copy the new block in. `tools/check_palette_drift.py` fails CI
 * if this file and the live site stop agreeing.
 *
 * Two borders, deliberately. --border is a decorative hairline and is allowed
 * to sit near-invisible; --border-control is the edge of an input or a quiet
 * button, which owes 3:1 under WCAG 1.4.11. The dashboard has far more
 * control edges than the site does, so the distinction matters more here.
 *
 * The 3D viewport does NOT read these. Inside the two WebGL canvases the
 * palette is the desktop app's own (`web/src/theme.ts`, copied from
 * apps/frontend/src/theme.h): the viewport is an instrument and matches the
 * app, the chrome around it is a web surface and matches the site.
 */

:root {
    /* palette:begin light */
    --surface: #F4FBFF;
    --panel: #EAF1FA;
    --widget: #DDE3EC;
    --border: #D2D8E1;
    --border-control: #81878F;
    --text: #121B28;
    --muted: #5C646F;
    --link: #1B539E;
    --fill: #275FAB;
    --fill-hover: #0E4993;
    --on-fill: #F4FBFF;
    --accent: #D27D1E;
    --accent-text: #A15100;
    /* palette:end light */
}

/* The default state stamps no class, so the media query is what light and
   dark resolve through; .light is the explicit opt-out from a dark OS. */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        /* palette:begin dark */
        --surface: #0E1218;
        --panel: #1B2026;
        --widget: #292E35;
        --border: #353A41;
        --border-control: #757B83;
        --text: #E9F6FF;
        --muted: #A9B2BE;
        --link: #7EB9FF;
        --fill: #2860AC;
        --fill-hover: #376FBC;
        --on-fill: #EFF6FF;
        --accent: #E8923A;
        --accent-text: #FFA752;
        /* palette:end dark */
    }
}

/* The explicit choice, set by the theme toggle. Repeated rather than
   combined with the block above: a selector list would make one invalid
   selector drop both. */
html.dark {
    /* palette:begin dark */
    --surface: #0E1218;
    --panel: #1B2026;
    --widget: #292E35;
    --border: #353A41;
    --border-control: #757B83;
    --text: #E9F6FF;
    --muted: #A9B2BE;
    --link: #7EB9FF;
    --fill: #2860AC;
    --fill-hover: #376FBC;
    --on-fill: #EFF6FF;
    --accent: #E8923A;
    --accent-text: #FFA752;
    /* palette:end dark */
}