/* TaskStrider - the dark palette
 *
 * Its own sheet since the quick pass of 2026-10-06, when a device could
 * choose its theme. WHICH PAGES USE IT IS base.html'S DECISION, not this
 * file's: on Auto - no cookie - a page links it with
 * media="(prefers-color-scheme: dark)", so the device's own setting
 * decides exactly as it always did; on Dark it is linked for every
 * device; on Light not at all. So each colour here is written once, and
 * nothing in either sheet asks which theme it is.
 *
 * ONLY TOKENS. Every rule in app.css draws with var(), so dark mode is
 * this file and nothing else - no second set of rules to drift out of
 * step, and a new screen is dark the day it is written.
 *
 * THE NUMBERS ARE MEASURED. Every pair of these that lands on top of
 * another is computed against WCAG AA in check_styling, all four themes
 * - so a colour picked because it looked all right at a desk in daylight
 * fails the suite instead of shipping.
 *
 * BRAND-DARK MEANS EMPHASIS, NOT DARKNESS. In the light theme the
 * stronger blue is darker; here it is lighter, because that is what
 * stands out against a dark ground. The name is light-mode's and is left
 * alone: it is the heading colour, the hover colour and the button's edge.
 *
 * Loaded after app.css, so each block here wins over its light twin of
 * the same specificity - body.admin's included, which is why the admin
 * theme needs its own dark block below.
 */

:root {
    color-scheme: dark;

    /* Not black. A shop's board is read all day and pure black with
     * near-white text is the combination that smears on an OLED
     * panel; a dark navy keeps the product's blue underneath it. */
    --bg: #0e141e;
    --panel: #182131;
    --ink: #e8eef7;
    --muted: #a3b2c7;
    --line: #2c3a4f;

    /* Light enough to read as a link on the page AND dark enough to
     * carry --on-brand on a button, which pull in opposite
     * directions once the background is dark. Resolved by flipping
     * the button rather than splitting the token: a filled button is
     * light blue with near-black text, which is how a dark interface
     * usually draws its strongest control. */
    --brand: #8ab6f0;
    --brand-dark: #b4d0f7;
    --brand-tint: #1c2b42;
    --on-brand: #0a1424;

    /* Lighter than the page, not darker: in the dark the bar is a
     * surface raised toward you, like a card. */
    --navy: #132a50;
    --on-navy: #f0f4fa;
    --on-navy-muted: #b9c7dd;
    --navy-line: #ffffff59;
    --navy-hover: #ffffff1a;
    --navy-band: #21437a;
    --navy-shade: #000000a6;

    --edge: #26344a;
    --focus: #8ab6f066;

    /* Both marks inverted: a light figure on a deep tinted ground,
     * rather than the light theme's dark figure on a pale one. The
     * pale fills would glow at night and the dark inks would vanish.
     *
     * The hues are pushed further apart than the light theme's -
     * amber toward yellow, red toward pink - because a row can carry
     * BOTH at once, over quote in Actual and past due in Due. They
     * measure 1.27:1 against each other here against 1.18:1 in the
     * light theme, which is better and still not the point: neither
     * badge has ever relied on colour alone, and both say what they
     * mean in words inside the badge. */
    --accent: #f2b45c;
    --accent-bg: #33230f;
    --accent-line: #6d4a1e;

    --late: #f28e8e;
    --late-bg: #3a1a18;
    --late-line: #7b3631;

    /* Black, and stronger. A shadow is an absence of light, so on a
     * dark surface it has to be darker than the surface rather than
     * a tint of the brand. */
    --shadow: #00000066;
    --shadow-near: #00000040;

    /* The backdrop's frame stays blue and its middle goes dark, so
     * the words on it keep their contrast either way round. */
    --poly-1: #091327;
    --poly-2: #10244a;
    --poly-3: #16305e;
    --poly-4: #1e3c76;
    --poly-5: #2b4f8f;
    --poly-6: #1b273b;
    --poly-7: #151e2e;
    --poly-8: #111925;
}

/* THE ADMIN THEME NEEDS ITS OWN, and this is the trap in the whole
 * feature. app.css's light body.admin block - one element, one class -
 * outranks the :root block here, whichever sheet comes later, because it
 * sits on body and body's own declarations beat what it inherits from
 * :root. Without these lines an admin screen in
 * dark mode would keep its pale green background and take the dark
 * theme's near-white text on top of it: not merely un-darkened, but
 * unreadable. check_styling pins that every admin override has a
 * dark partner, by name, so a token added to one and not the other
 * goes red. */
body.admin {
    --bg: #0e1815;
    /* Its own dark card. Until the refresh --panel was never
     * overridden here, and an admin's cards were the shop's dark navy
     * on a green-black page. */
    --panel: #15241e;
    --ink: #e4f1ea;
    --muted: #9dbbac;
    --line: #2b4438;
    --brand: #56c79b;
    --brand-dark: #86dcb8;
    --brand-tint: #172b22;
    --navy: #12392b;
    --navy-band: #1c5240;
    --on-navy-muted: #b5d6c6;
    --focus: #56c79b66;
    --edge: #243c32;
}