/* ══════════════════════════════════════════════════════════════════════════
   Color scheme ONLY. Load this AFTER style.css
   in index.html (a second <link>) to apply this palette. To make a new
   color scheme, copy this file, rename it (theme-<name>.css), and change
   only the values below — nothing else in the site needs to know about it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --tone-1: #132433ff;
    --tone-2: #095067ff;
    --tone-3: #007d9cff;
    --tone-4: #79d4fdff;
    --tone-5: #fddd00ff;

    --tone-1-rgb: 19, 36, 51;
    --tone-2-rgb: 9, 80, 103;
    --tone-3-rgb: 0, 125, 156;
    --tone-4-rgb: 121, 212, 253;
    --tone-5-rgb: 253, 221, 0;

    --tone-text: #f8fafcff;
    --tone-text-rgb: 248, 250, 252;

    --code-bg: #0b151eff;
    --code-bg-rgb: 11, 21, 30;

    --bg: var(--tone-1);
    --panel: var(--tone-3);
    --panel-rgb: var(--tone-3-rgb);
    --ink: var(--tone-text);
    --ink-rgb: var(--tone-text-rgb);
    --accent: var(--tone-5);
    --accent-rgb: var(--tone-5-rgb);

    --danger: #e46511ff;
    --danger-rgb: 255, 122, 34;
    --correct: #00d423ff;
    --correct-rgb: 0, 212, 110;
    --wrong: #d13d15ff;
    --wrong-rgb: 245, 84, 40;

    --h1-color: var(--tone-text);
    --h1-shadow: #095067ff;
    /* Updated to match --tone-2 for a better blue integration */
    --h1-outline: var(--code-bg);
}

h1 {
    color: var(--h1-color);

    text-shadow:
        -0.035em -0.035em 0 var(--code-bg),
        0.035em 0.035em 0 var(--code-bg),
        0px 0.04em 0 var(--h1-shadow),
        0px 0.06em 0 var(--h1-shadow),
        0px 0.08em 0 var(--h1-shadow),
        0px 0.10em 0 var(--h1-shadow);
}