/*
 * Radio Nukular design tokens: the shared token contract (docs/theming.md) plus
 * theme-private --rn-* tokens. In dark mode the brand yellow is darkened, black outlines
 * stay; surfaces and text switch.
 */
:root {
    color-scheme: light;

    /* Brand */
    --rn-yellow: #ffb800;
    --rn-yellow-shadow: #a67800;
    --rn-bar-bg: var(--rn-yellow); /* header bar, mobile menu, footer panel */
    --rn-coral: #e36f52;
    --rn-red: #d31141;
    --rn-ink: #000;
    --rn-page-bg: #007eb4;
    --rn-subnav-bg: #fff;
    --rn-subnav-text: #000;
    --rn-modnav-bg: #fcc;
    --rn-modnav-border: #800;
    --rn-modnav-text: #500;
    --rn-title-text: #fff;
    --rn-rule: #d6d6d6;
    --rn-row-alt: #f6f6f6;
    --rn-box-shadow: 0 2px 0 var(--rn-ink);

    /* Shared token contract */
    --bg: var(--rn-page-bg);
    --surface: #fff;
    --thead: #fff1c7;
    --code-bg: #f1f1f1;
    --text: #000;
    --text-muted: #555;
    --text-faint: #777;
    --error: var(--rn-red);
    --link: #005f8a;
    --link-hover: var(--rn-coral);
    --border: var(--rn-ink);
    --nav-border: var(--rn-ink);
    --input-bg: #fff;
    --input-border: var(--rn-ink);
    --button-bg: #fff;
    --button-border: var(--rn-ink);
    --flash-success-bg: #d9f2dc;
    --flash-success-text: #0f4d1a;
    --flash-error-bg: #fbd9df;
    --flash-error-text: #7a0a24;
    --flash-warning-bg: #fff1c7;
    --flash-warning-text: #5c4300;
    --category-header-bg: var(--rn-yellow);
    --category-header-text: #111;

    --font-body: Rubik, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    --radius: 5px;
    --radius-lg: 10px;
    --page-width: 1419px;
    --page-width-narrow: 60rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --rn-page-bg: #062a3b;
        --rn-yellow: #b38000; /* also the bar, category headers and accents (via var()) */
        --rn-yellow-shadow: #6b4d00; /* keeps the nav buttons' shadow visible on the darker bar */
        --rn-subnav-bg: #1d1f23;
        --rn-subnav-text: #e8e8ea;
        --rn-modnav-bg: #3d1b1f;
        --rn-modnav-border: #b33;
        --rn-modnav-text: #ffc9c9;
        --rn-rule: #3a3c42;
        --rn-row-alt: #24262b;

        --surface: #1d1f23;
        --thead: #33300f;
        --code-bg: #2a2c31;
        --text: #e8e8ea;
        --text-muted: #b0b3b8;
        --text-faint: #8a8d93;
        --error: #ff7a90;
        --link: #6cc4f0;
        --input-bg: #15171a;
        --button-bg: #2a2c31;
        --flash-success-bg: #1b3d2a;
        --flash-success-text: #a8e6c4;
        --flash-error-bg: #3d1b1f;
        --flash-error-text: #ffb4b0;
        --flash-warning-bg: #3d3520;
        --flash-warning-text: #ffe082;
    }
}