:root,
[data-theme="balanced"],
[data-theme="color"] {
    --wl-bg: radial-gradient(circle at 8% 10%, rgba(192, 146, 62, 0.12) 0%, transparent 32%), linear-gradient(180deg, #eef0f4 0%, #f6f7fa 46%, #edf3f5 100%);
    --wl-surface: rgba(255, 255, 255, 0.9);
    --wl-surface-soft: rgba(255, 255, 255, 0.68);
    --wl-text: #1d232b;
    --wl-text-muted: #5f6774;
    --wl-accent: #bf923e;
    --wl-accent-soft: #e4c47c;
    --wl-border: rgba(31, 39, 50, 0.14);
    --wl-shadow: 0 18px 42px rgba(27, 33, 43, 0.14);
    --wl-loader-glow: rgba(191, 146, 62, 0.34);
    --wl-font-display: "Satoshi", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
    --wl-font-body: "Inter", "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    --wl-font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
}

[data-theme="light"] {
    --wl-bg: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
    --wl-surface: #ffffff;
    --wl-surface-soft: #f3f5f7;
    --wl-text: #181d24;
    --wl-text-muted: #66707d;
    --wl-accent: #b8882f;
    --wl-accent-soft: #e4c176;
    --wl-border: rgba(24, 29, 36, 0.12);
    --wl-shadow: 0 12px 32px rgba(17, 22, 29, 0.1);
    --wl-loader-glow: rgba(184, 136, 47, 0.25);
}

[data-theme="dark"] {
    --wl-bg: radial-gradient(circle at 15% 8%, rgba(191, 146, 62, 0.14) 0%, transparent 30%), linear-gradient(180deg, #0d1014 0%, #12171d 55%, #0f141a 100%);
    --wl-surface: #161c23;
    --wl-surface-soft: #1d242d;
    --wl-text: #eef2f6;
    --wl-text-muted: #b6bec9;
    --wl-accent: #d7a850;
    --wl-accent-soft: #f0ca86;
    --wl-border: rgba(230, 236, 244, 0.16);
    --wl-shadow: 0 18px 42px rgba(3, 5, 8, 0.45);
    --wl-loader-glow: rgba(215, 168, 80, 0.34);
}

/* AUTO THEME: Respect OS/browser preference with CSS media query fallback */
[data-theme="auto"] {
    /* Default to color theme, but CSS will override via prefers-color-scheme */
    --wl-bg: radial-gradient(circle at 8% 10%, rgba(192, 146, 62, 0.12) 0%, transparent 32%), linear-gradient(180deg, #eef0f4 0%, #f6f7fa 46%, #edf3f5 100%);
    --wl-surface: rgba(255, 255, 255, 0.9);
    --wl-surface-soft: rgba(255, 255, 255, 0.68);
    --wl-text: #1d232b;
    --wl-text-muted: #5f6774;
    --wl-accent: #bf923e;
    --wl-accent-soft: #e4c47c;
    --wl-border: rgba(31, 39, 50, 0.14);
    --wl-shadow: 0 18px 42px rgba(27, 33, 43, 0.14);
    --wl-loader-glow: rgba(191, 146, 62, 0.34);
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --wl-bg: radial-gradient(circle at 15% 8%, rgba(191, 146, 62, 0.14) 0%, transparent 30%), linear-gradient(180deg, #0d1014 0%, #12171d 55%, #0f141a 100%);
        --wl-surface: #161c23;
        --wl-surface-soft: #1d242d;
        --wl-text: #eef2f6;
        --wl-text-muted: #b6bec9;
        --wl-accent: #d7a850;
        --wl-accent-soft: #f0ca86;
        --wl-border: rgba(230, 236, 244, 0.16);
        --wl-shadow: 0 18px 42px rgba(3, 5, 8, 0.45);
        --wl-loader-glow: rgba(215, 168, 80, 0.34);
    }
}

@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --wl-bg: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
        --wl-surface: #ffffff;
        --wl-surface-soft: #f3f5f7;
        --wl-text: #181d24;
        --wl-text-muted: #66707d;
        --wl-accent: #b8882f;
        --wl-accent-soft: #e4c176;
        --wl-border: rgba(24, 29, 36, 0.12);
        --wl-shadow: 0 12px 32px rgba(17, 22, 29, 0.1);
        --wl-loader-glow: rgba(184, 136, 47, 0.25);
    }
}

body[data-theme="light"],
body[data-theme="dark"],
body[data-theme="balanced"],
body[data-theme="color"],
body[data-theme="auto"],
body {
    color: var(--wl-text);
    font-family: var(--wl-font-body);
}