/* The palette, and the only place either tier defines a colour.
 *
 * Loaded by index.html for the Vue app and by the four standalone pages. The
 * app reaches these through Tailwind colour names (bg-raised, text-ink-mute,
 * border-rule -- see tailwind.config.js); the standalone pages reach them
 * through legal.css. One file so the two tiers cannot drift apart.
 *
 * Two rules held throughout:
 *
 * Tokens are named for their ROLE, not their lightness. --sunk means recessed
 * and --raised means lifted, so a recessed panel is darker than the page in
 * both themes and every rule that uses --sunk keeps meaning the same thing.
 * Nothing inverts.
 *
 * The brand violet is three tokens, not one. Behind white text it has to stay
 * dark enough for contrast (--brand-fill); as text on the page ground it has
 * to be much lighter than that on a dark theme (--brand); and the tint behind
 * the step numbers is a third thing again. Collapsing them is what makes
 * hand-rolled dark modes look broken.
 *
 * Anything that is dark in BOTH themes -- the picture-tag panel, <pre> --
 * needs its own tokens and must never be written in terms of --ink, which
 * becomes near-white on the dark side.
 */

:root {
    color-scheme: light;

    /* surfaces */
    --paper:            #FBFAFD;   /* the page itself */
    --raised:           #FFFFFF;   /* cards, the masthead, tables */
    --sunk:             #F3F1F9;   /* recessed: code chips, placeholders */
    --sunk-soft:        #F7F5FC;   /* the same, one step shallower */

    /* Where an image is judged. Deliberately its own token: what surrounds a
     * photograph changes how compressed it looks, and this is a tool for
     * deciding whether a compressed photograph still looks right. */
    --stage:            #F3F1F9;

    /* rules, softest to strongest */
    --rule-soft:        #EFECF7;
    --rule:             #E4E0F2;
    --rule-strong:      #D6D0E8;

    /* text, darkest to faintest */
    --ink:              #1B1630;
    --ink-soft:         #4A4363;
    --ink-mute:         #6B6480;
    --ink-label:        #7A7391;   /* the uppercase micro-labels */
    --ink-faint:        #A49DB8;

    /* brand */
    --brand:            #4636B3;   /* as text or an icon on the page ground */
    --brand-over:       #2E2280;
    --brand-fill:       #4636B3;   /* as a fill behind --on-brand */
    --brand-fill-over:  #372A8C;
    --brand-tint:       #EDE9FA;   /* the wash behind step numbers */
    --on-brand:         #FFFFFF;
    --on-brand-fine:    rgba(255, 255, 255, 0.7);
    --footer-bg:        var(--brand-fill);

    /* the picture-tag panel and <pre>: dark in both themes */
    --code-bg:          #1B1630;
    --code-ink:         #E7E3F5;
    --code-label:       #A49DB8;
    --code-link:        #C9C2EE;

    --bad:              #AA3333;   /* what the old shorthand #A33 expanded to */
    --cta-shadow:       rgba(70, 54, 179, 0.22);
}

/* The dark set, twice over: once for a dark system with no explicit choice,
 * once for an explicit choice of dark. The two blocks are identical and have
 * to stay that way -- CSS has no way to share them, and duplicating thirty
 * declarations is a smaller price than making the palette depend on
 * JavaScript having run. */

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

        --paper:            #14111F;
        --raised:           #1E1A31;
        --sunk:             #0E0C17;
        --sunk-soft:        #17132A;

        --stage:            #2C2A3E;

        --rule-soft:        #262040;
        --rule:             #302A4A;
        --rule-strong:      #3C3558;

        --ink:              #EDEAF7;
        --ink-soft:         #C6C0DC;
        --ink-mute:         #A9A2C0;
        --ink-label:        #9A93B2;
        --ink-faint:        #837C9C;

        --brand:            #B4A6FF;
        --brand-over:       #CFC6FF;
        --brand-fill:       #6E5BE6;
        --brand-fill-over:  #8271F0;
        --brand-tint:       #2A2350;
        --on-brand:         #FFFFFF;
        --on-brand-fine:    rgba(255, 255, 255, 0.72);
        --footer-bg:        #1B1730;

        --code-bg:          #0B0914;
        --code-ink:         #DCD6F0;
        --code-label:       #8F88AD;
        --code-link:        #B9B1E4;

        --bad:              #FF8A8A;
        --cta-shadow:       rgba(0, 0, 0, 0.5);
    }
}

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

    --paper:            #14111F;
    --raised:           #1E1A31;
    --sunk:             #0E0C17;
    --sunk-soft:        #17132A;

    --stage:            #2C2A3E;

    --rule-soft:        #262040;
    --rule:             #302A4A;
    --rule-strong:      #3C3558;

    --ink:              #EDEAF7;
    --ink-soft:         #C6C0DC;
    --ink-mute:         #A9A2C0;
    --ink-label:        #9A93B2;
    --ink-faint:        #837C9C;

    --brand:            #B4A6FF;
    --brand-over:       #CFC6FF;
    --brand-fill:       #6E5BE6;
    --brand-fill-over:  #8271F0;
    --brand-tint:       #2A2350;
    --on-brand:         #FFFFFF;
    --on-brand-fine:    rgba(255, 255, 255, 0.72);
    --footer-bg:        #1B1730;

    --code-bg:          #0B0914;
    --code-ink:         #DCD6F0;
    --code-label:       #8F88AD;
    --code-link:        #B9B1E4;

    --bad:              #FF8A8A;
    --cta-shadow:       rgba(0, 0, 0, 0.5);
}