/* Design tokens. Light is the base; dark is declared twice below, once for
   the device setting and once for the toggle, which must win both ways. */

:root {
    color-scheme: light;

    /* Surfaces: enamel console grey, a touch green */
    --desk: #e3e8e6;
    --panel: #f8faf9;
    --raised: #ffffff;
    --well: #edf1ef;
    --line: #c3cdc9;
    --line-soft: #d9e0dd;

    /* Ink */
    --ink: #15232b;
    --ink-soft: #4c5e67;
    --ink-faint: #66777f;

    /* Brand: the one hue no status light uses */
    --brand: #5540d0;
    --brand-fill: #5540d0;
    --on-brand: #ffffff;
    --brand-wash: rgba(85, 64, 208, 0.1);

    /* Status. *-fill is a lit lamp; the plain token is a mark beside text. */
    --ok: #1c8a52;
    --warn: #b97a00;
    --down: #c8362b;
    --busy: #1f5fbf;
    --off: #7a8a91;
    --warn-fill: #f1b02f;
    --on-warn: #241900;
    --down-fill: #c8362b;
    --on-down: #ffffff;
    --lamp-glow: none;

    /* Chart series, one fixed slot per site. Validated against --panel. */
    --c1: #2a78d6;
    --c2: #eb6834;
    --c3: #1baf7a;
    --c4: #eda100;
    --c5: #e87ba4;
    --c6: #008300;
    --c7: #4a3aa7;
    --c8: #e34948;

    /* The ribbon: the three colours of the brand mark in one line. It is
       the one flourish, so it appears in only a few places. */
    --ribbon: linear-gradient(90deg, var(--warn-fill), var(--ok) 50%, var(--brand));
    --dots: #cfd8d4;
    --glow: rgba(85, 64, 208, 0.08);

    --shadow: 0 8px 28px rgba(21, 35, 43, 0.16);
    --lift: 0 1px 2px rgba(21, 35, 43, 0.06);
    --scrim: rgba(21, 35, 43, 0.45);

    /* Type: DIN, the face of instrument panels and road signs, for names
       and numbers; Avenir Next for everything read as text. */
    --display: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
    --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --r: 4px;
    --rail: 232px;
    --bar: 56px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --desk: #0f1a20;
        --panel: #16232b;
        --raised: #1d2d37;
        --well: #111d24;
        --line: #2d4350;
        --line-soft: #223642;
        --ink: #e7eef0;
        --ink-soft: #a3b5bd;
        --ink-faint: #7f949e;
        --brand: #a99bff;
        --brand-fill: #6d5ae6;
        --brand-wash: rgba(169, 155, 255, 0.14);
        --ok: #4ccb8d;
        --warn: #f1b02f;
        --down: #ff7466;
        --busy: #6cb0ff;
        --off: #7f949e;
        --down-fill: #ff6b5c;
        --on-down: #2a0600;
        --lamp-glow: 0 0 22px -6px;
        --c1: #3987e5;
        --c2: #d95926;
        --c3: #199e70;
        --c4: #c98500;
        --c5: #d55181;
        --c6: #008300;
        --c7: #9085e9;
        --c8: #e66767;
        --dots: #1b2a32;
        --glow: rgba(169, 155, 255, 0.1);
        --shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
        --lift: none;
        --scrim: rgba(5, 10, 13, 0.65);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --desk: #0f1a20;
    --panel: #16232b;
    --raised: #1d2d37;
    --well: #111d24;
    --line: #2d4350;
    --line-soft: #223642;
    --ink: #e7eef0;
    --ink-soft: #a3b5bd;
    --ink-faint: #7f949e;
    --brand: #a99bff;
    --brand-fill: #6d5ae6;
    --brand-wash: rgba(169, 155, 255, 0.14);
    --ok: #4ccb8d;
    --warn: #f1b02f;
    --down: #ff7466;
    --busy: #6cb0ff;
    --off: #7f949e;
    --down-fill: #ff6b5c;
    --on-down: #2a0600;
    --lamp-glow: 0 0 22px -6px;
    --c1: #3987e5;
    --c2: #d95926;
    --c3: #199e70;
    --c4: #c98500;
    --c5: #d55181;
    --c6: #008300;
    --c7: #9085e9;
    --c8: #e66767;
    --dots: #1b2a32;
    --glow: rgba(169, 155, 255, 0.1);
    --shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    --lift: none;
    --scrim: rgba(5, 10, 13, 0.65);
}

/* .s0 is for totals that belong to no single site. */
.s0 { --c: var(--ink-faint); }
.s1 { --c: var(--c1); }
.s2 { --c: var(--c2); }
.s3 { --c: var(--c3); }
.s4 { --c: var(--c4); }
.s5 { --c: var(--c5); }
.s6 { --c: var(--c6); }
.s7 { --c: var(--c7); }
.s8 { --c: var(--c8); }

/* Parts of a whole: one hue, three steps. */
.p1 { --c: var(--brand); }
.p2 { --c: color-mix(in srgb, var(--brand) 55%, var(--panel)); }
.p3 { --c: color-mix(in srgb, var(--brand) 28%, var(--panel)); }