/*
 * Design tokens.
 *
 * Every colour gets its LIGHT value here on bare :root, so a token always has a
 * definition even when no media query and no [data-theme] block matches. The two
 * blocks below only ever REDEFINE tokens, never introduce them.
 *
 * Precedence, lowest to highest:
 *   1. :root                                        light, the baseline
 *   2. prefers-color-scheme: dark, unless data-theme="light"   the system default
 *   3. [data-theme="dark"] / [data-theme="light"]   an explicit choice by the reader
 */

:root {
    color-scheme: light;

    /* brand -- unchanged from the Materialize build: red 700 and orange 400 */
    --brand: #d32f2f;
    --brand-hover: #b71c1c;
    --on-brand: #fff;
    --accent: #ffa726;
    --accent-strong: #fb8c00;
    /* white on #ffa726 is about 2:1, so accent buttons take dark ink instead */
    --on-accent: #3b2200;

    --header-bg: var(--brand);
    --header-text: #fff;
    --header-muted: #f6cccc;
    --footer-bg: var(--brand);
    --footer-text: #fff;
    --footer-muted: #f6cccc;

    /* surfaces */
    --bg: #f6f9fc;
    --surface: #fff;
    --surface-2: #f2f4f7;
    --surface-hover: #f7f9fb;
    --border: #e4e7ec;
    --border-strong: #cfd4dc;

    /* ink */
    --text: #212121;
    --text-muted: #757575;
    --text-subtle: #9e9e9e;

    /* stats page accents */
    --stat: #f57c00;
    --cover-bg: #455a64;
    --overlay-bg: #424242;

    /* gauge */
    --gauge-track: #ececec;
    --gauge-fill: var(--brand);

    /* the lightness every indicator stripe is normalised to, per theme */
    --stripe-lightness: 0.55;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --shadow-2: 0 4px 14px rgba(16, 24, 40, .10);

    --focus: #1b6ef3;

    --radius: 10px;
    --radius-sm: 6px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* one knob for every transition, so prefers-reduced-motion can zero it out */
    --speed: 180ms;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand: #ef5350;
        --brand-hover: #ff7a75;
        --on-brand: #2a0606;
        --accent: #ffb74d;
        --accent-strong: #ffa726;
        --on-accent: #241400;

        --header-bg: #8c2020;
        --header-text: #fff;
        --header-muted: #f0c4c4;
        --footer-bg: #8c2020;
        --footer-text: #fff;
        --footer-muted: #f0c4c4;

        --bg: #14161a;
        --surface: #1c1f24;
        --surface-2: #23272e;
        --surface-hover: #262a31;
        --border: #333941;
        --border-strong: #454c56;

        --text: #e8eaed;
        --text-muted: #a8b0ba;
        --text-subtle: #8b939d;

        --stat: #ffb74d;
        --cover-bg: #263238;
        --overlay-bg: #101216;

        --gauge-track: #2c313a;

        --stripe-lightness: 0.74;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
        --shadow-2: 0 6px 18px rgba(0, 0, 0, .45);

        --focus: #7aa7ff;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand: #ef5350;
    --brand-hover: #ff7a75;
    --on-brand: #2a0606;
    --accent: #ffb74d;
    --accent-strong: #ffa726;
    --on-accent: #241400;

    --header-bg: #8c2020;
    --header-text: #fff;
    --header-muted: #f0c4c4;
    --footer-bg: #8c2020;
    --footer-text: #fff;
    --footer-muted: #f0c4c4;

    --bg: #14161a;
    --surface: #1c1f24;
    --surface-2: #23272e;
    --surface-hover: #262a31;
    --border: #333941;
    --border-strong: #454c56;

    --text: #e8eaed;
    --text-muted: #a8b0ba;
    --text-subtle: #8b939d;

    --stat: #ffb74d;
    --cover-bg: #263238;
    --overlay-bg: #101216;

    --gauge-track: #2c313a;

    --stripe-lightness: 0.74;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, .45);

    --focus: #7aa7ff;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --speed: 1ms;
    }
}