/*
 * css/tokens.css
 * Every colour on S4X Budgets, defined once and used through var(--name)
 * (playbooks/colour-and-contrast.md). An internal tool, so not held to a
 * brand palette (Nikita, 2026-10-07 and 2026-10-16); colours are chosen
 * for legibility. Light keeps the site's teal and greys, with the shades
 * that failed contrast darkened: the card header teal (#4bb8d4, 2.31:1
 * under white text) is now 5.43:1, light grey text (#888, #999, #aaa,
 * 3.5:1 and less) is now one grey at 5.74:1, the red badge (#d9534f,
 * 3.96:1) and the green button (#3fa34d, 3.2:1) are darker. About 140
 * separate colours became the tokens below. Dark is new. Accent borders
 * have their own token (accent-line), lighter in dark so they still show
 * on the dark panels; the dark danger red is a shade lighter for the same
 * reason, with white text still above 4.5:1.
 *
 * Structure from Oldways (css/theme.css), the estate catalogue's best
 * example for a plain-PHP site: the computer's setting by default, a
 * Light, Dark or Same as computer choice kept in a cookie the server
 * reads (s4xab_theme), so a page is drawn in the right colours from the
 * first byte. Every pair one token is drawn on another is listed in
 * tools/contrast-pairs.json and measured by tools/check-contrast.php in
 * both themes.
 *
 * Author:  Nikita
 * Created: 2026-10-17
 */

:root {
    color-scheme: light;
    --canvas: #f0f2f5;
    --panel: #ffffff;
    --panel-soft: #f7f8fa;
    --fill: #e9edf1;
    --line-soft: #eeeeee;
    --line: #d9dde2;
    --line-strong: #7d848e;
    --ink: #3d3d3d;
    --ink-2: #555555;
    --soft: #666666;
    --chrome: #3d3d3d;
    --on-chrome: #ffffff;
    --on-chrome-soft: #c9ccd1;
    --accent: #1e7389;
    --accent-hover: #175f72;
    --accent-ink: #1d6f85;
    --accent-line: #1e7389;
    --accent-tint: #eaf6fa;
    --accent-tint-2: #b8e2ec;
    --on-accent: #ffffff;
    --on-accent-line: rgba(255, 255, 255, 0.3);
    --good: #2e7d32;
    --good-strong: #1b5e20;
    --good-bg: #e8f5e9;
    --good-line: #a5d6a7;
    --good-button: #2e7d32;
    --bad: #cc0000;
    --bad-strong: #a00000;
    --bad-bg: #fff0f0;
    --bad-line: #ffcccc;
    --danger: #b3261e;
    --warn: #8a5a00;
    --warn-strong: #6d4c00;
    --warn-bg: #fff8e1;
    --warn-line: #f0d97a;
    --warn-mark: #a87d00;
    --purple: #6a4fc4;
    --purple-bg: #f3e8fd;
    --purple-line: #d9c2f0;
    --info: #1a56c4;
    --info-bg: #e8f0fe;
    --info-line: #b8cdf0;
    --shadow-1: rgba(0, 0, 0, 0.08);
    --shadow-2: rgba(0, 0, 0, 0.18);
    --overlay: rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --canvas: #15191d;
        --panel: #1e2328;
        --panel-soft: #232930;
        --fill: #2a3038;
        --line-soft: #2c333b;
        --line: #3a424b;
        --line-strong: #7c8691;
        --ink: #e6e8eb;
        --ink-2: #cfd4da;
        --soft: #a9b1ba;
        --chrome: #0f1215;
        --on-chrome: #e6e8eb;
        --on-chrome-soft: #a9b1ba;
        --accent: #207a93;
        --accent-hover: #1a6577;
        --accent-ink: #6cc3d9;
        --accent-line: #3fa6c0;
        --accent-tint: #12313a;
        --accent-tint-2: #22525e;
        --on-accent: #ffffff;
        --on-accent-line: rgba(255, 255, 255, 0.3);
        --good: #6fcf7f;
        --good-strong: #9be2a6;
        --good-bg: #12301a;
        --good-line: #2f6b3a;
        --good-button: #2e7d32;
        --bad: #ff8a80;
        --bad-strong: #ffb4ab;
        --bad-bg: #3a1a1a;
        --bad-line: #6b2b2b;
        --danger: #d32f2f;
        --warn: #e6b74c;
        --warn-strong: #f5d98d;
        --warn-bg: #33290e;
        --warn-line: #6b5a1e;
        --warn-mark: #e0b400;
        --purple: #b9a6f0;
        --purple-bg: #2a2140;
        --purple-line: #4f3f80;
        --info: #8fb4f5;
        --info-bg: #142440;
        --info-line: #2f4a7a;
        --shadow-1: rgba(0, 0, 0, 0.4);
        --shadow-2: rgba(0, 0, 0, 0.55);
        --overlay: rgba(0, 0, 0, 0.6);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #15191d;
    --panel: #1e2328;
    --panel-soft: #232930;
    --fill: #2a3038;
    --line-soft: #2c333b;
    --line: #3a424b;
    --line-strong: #7c8691;
    --ink: #e6e8eb;
    --ink-2: #cfd4da;
    --soft: #a9b1ba;
    --chrome: #0f1215;
    --on-chrome: #e6e8eb;
    --on-chrome-soft: #a9b1ba;
    --accent: #207a93;
    --accent-hover: #1a6577;
    --accent-ink: #6cc3d9;
    --accent-line: #3fa6c0;
    --accent-tint: #12313a;
    --accent-tint-2: #22525e;
    --on-accent: #ffffff;
    --on-accent-line: rgba(255, 255, 255, 0.3);
    --good: #6fcf7f;
    --good-strong: #9be2a6;
    --good-bg: #12301a;
    --good-line: #2f6b3a;
    --good-button: #2e7d32;
    --bad: #ff8a80;
    --bad-strong: #ffb4ab;
    --bad-bg: #3a1a1a;
    --bad-line: #6b2b2b;
    --danger: #d32f2f;
    --warn: #e6b74c;
    --warn-strong: #f5d98d;
    --warn-bg: #33290e;
    --warn-line: #6b5a1e;
    --warn-mark: #e0b400;
    --purple: #b9a6f0;
    --purple-bg: #2a2140;
    --purple-line: #4f3f80;
    --info: #8fb4f5;
    --info-bg: #142440;
    --info-line: #2f4a7a;
    --shadow-1: rgba(0, 0, 0, 0.4);
    --shadow-2: rgba(0, 0, 0, 0.55);
    --overlay: rgba(0, 0, 0, 0.6);
}

/* The Light, Dark and Same as computer choice in the account menu. */
.themeswitch { display: flex; gap: 4px; padding: 6px 12px; }
.themeswitch button { flex: 1; padding: 4px 6px; font-size: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 4px; cursor: pointer; }
.themeswitch button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Placeholder text in every box, measured as soft text on the panel in
   both themes; the browser's own grey fell to 3.44:1 in dark (v63). */
::placeholder { color: var(--soft); opacity: 1; }