:root {
    /* Light theme: soft lavender-white surfaces, deep violet brand */
    --color-bg: #f6f5fb;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #ece9f7;
    --color-bg-sunken: #ece9f5;
    --color-text: #14121f;
    --color-text-muted: #5b5770;
    --color-border: #e0dcf1;

    --color-primary: #6d28d9;
    --color-primary-strong: #4c1d95;
    --color-primary-soft: #ede9fe;
    --color-on-primary: #ffffff;

    --color-error: #dc2626;
    --color-on-error: #ffffff;
    --color-success: #16a34a;

    --shadow-sm: 0 1px 2px rgba(20, 15, 40, 0.06);
    --shadow-md: 0 4px 16px rgba(20, 15, 40, 0.1);
    --shadow-lg: 0 12px 32px rgba(20, 15, 40, 0.16);
    --shadow-primary: 0 6px 20px rgba(109, 40, 217, 0.3);

    /* Difficulty tiers: same hues in both themes, tuned for contrast with white text */
    --tier-extreme: #dc2626;
    --tier-insane: #9333ea;
    --tier-hard: #ea580c;
    --tier-medium: #2563eb;
    --tier-easy: #16a34a;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
}

body.dark,
main.dark,
header.dark {
    color-scheme: dark;

    /* Dark theme: near-black surfaces, vivid light-violet brand for contrast */
    --color-bg: #0b0a13;
    --color-bg-elevated: #15131f;
    --color-bg-hover: #201d2f;
    --color-bg-sunken: #1a1826;
    --color-text: #f2f0fa;
    --color-text-muted: #a39dbd;
    --color-border: #2b2740;

    --color-primary: #a78bfa;
    --color-primary-strong: #c4b5fd;
    --color-primary-soft: #241f38;
    --color-on-primary: #1a1030;

    --color-error: #f87171;
    --color-on-error: #200a0a;
    --color-success: #4ade80;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 6px 24px rgba(167, 139, 250, 0.3);
}