/* Version three's theme: every colour, face and size the shared sheets read.

   The frame and the general components come from paxmap/ui (static/css/ui/,
   copied by `make ui-sync`, never edited here). This sheet is the only place
   v3's colour lives, in paxmap/ui's vocabulary (`paxui tokens` lists each
   role). v3.css, loaded last, holds what only Am I Funded has.

   The palette since 30 October (owner: "grey, black and white and one
   accent"): ink, greys and white, and BRASS as the one colour. Brass marks
   the answer, never good or bad: the ratio, the years already paid for,
   the move a market makes. A short or negative figure is ink with its
   minus sign and the word "short"; there is no red and no green. The
   good/warn/danger/info roles paxmap/ui's components read all map onto
   brass or greys, so nothing from the shared sheets brings a third colour.
   `--answer` is brass as text, `--answer-fill` as bars. The PRO palette
   (PALETTE.md, "Brass on graphite") is v2's; this is v3's own brass. Light by default,
   dark when the device asks and the reader has not chosen light, or when the
   reader has chosen dark (theme.js sets data-theme before first paint).

   `make ui-check` measures every pair below; the accent is the ink, so the
   primary button is the ink with the ground's colour on it, as before. */
:root {
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-num: ui-monospace, SFMono-Regular, Menlo, monospace;
    --step-base: 16px;
    --radius-sm: 7px;

    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #eceef2;
    --rail: #ffffff;
    --hero: #ffffff;
    --line: #d9dce3;
    --line-soft: #e6e8ed;
    --line-rail: #e6e8ed;

    --text: #16181d;
    --body: #2b2f37;
    --dim: #5b616e;
    --muted: #6f7582;

    --accent: #16181d;
    --on-accent: #ffffff;
    --accent-muted: #b8862b;
    --link: #16181d;
    --link-hover: #000000;

    --good-fg: #8a5a0b;
    --good-bg: #f6eedf;
    --warn: #6f7582;
    --warn-fg: #5b616e;
    --warn-bg: #eceef2;
    --danger: #16181d;
    --danger-fg: #16181d;
    --danger-bg: #eceef2;
    --info-fg: #5b616e;
    --info-bg: #eceef2;
    --answer: #8a5a0b;
    --answer-fill: #b8862b;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #111316;
        --surface: #1a1d22;
        --surface-2: #23272e;
        --rail: #15181c;
        --hero: #1a1d22;
        --line: #2f343d;
        --line-soft: #262a31;
        --line-rail: #23272e;

        --text: #e9eaee;
        --body: #d0d3d9;
        --dim: #9aa1ae;
        --muted: #858c99;

        --accent: #e9eaee;
        --on-accent: #111316;
        --accent-muted: #d99a3c;
        --link: #e9eaee;
        --link-hover: #ffffff;

        --good-fg: #e0a648;
        --good-bg: #2e2614;
        --warn: #858c99;
        --warn-fg: #9aa1ae;
        --warn-bg: #23272e;
        --danger: #e9eaee;
        --danger-fg: #e9eaee;
        --danger-bg: #23272e;
        --info-fg: #9aa1ae;
        --info-bg: #23272e;
        --answer: #e0a648;
        --answer-fill: #d99a3c;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #111316;
    --surface: #1a1d22;
    --surface-2: #23272e;
    --rail: #15181c;
    --hero: #1a1d22;
    --line: #2f343d;
    --line-soft: #262a31;
    --line-rail: #23272e;

    --text: #e9eaee;
    --body: #d0d3d9;
    --dim: #9aa1ae;
    --muted: #858c99;

    --accent: #e9eaee;
    --on-accent: #111316;
    --accent-muted: #d99a3c;
    --link: #e9eaee;
    --link-hover: #ffffff;

    --good-fg: #e0a648;
    --good-bg: #2e2614;
    --warn: #858c99;
    --warn-fg: #9aa1ae;
    --warn-bg: #23272e;
    --danger: #e9eaee;
    --danger-fg: #e9eaee;
    --danger-bg: #23272e;
    --info-fg: #9aa1ae;
    --info-bg: #23272e;
    --answer: #e0a648;
    --answer-fill: #d99a3c;
    color-scheme: dark;
}