/* Theme palettes, applied via body[data-theme].
   osu!-inspired direction: deep near-black surfaces, a hot pink accent that
   carries every interactive element, and a soft glow instead of hard
   shadows. Each theme keeps the same variable contract, so the four
   original themes still work. */

body[data-theme="dark"] {
    --bg: #14090f;
    --bg-grad:
        radial-gradient(900px 520px at 82% -12%, rgba(255, 102, 170, 0.20) 0%, transparent 70%),
        radial-gradient(760px 480px at 8% 108%, rgba(120, 88, 255, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, #170b12 0%, #0f0810 100%);
    --surface: rgba(32, 19, 27, 0.86);
    --surface-alt: rgba(48, 29, 40, 0.9);
    --border: rgba(255, 255, 255, 0.10);
    --text: #f6ecf2;
    --text-dim: #b299a8;
    --accent: #ff66aa;
    --accent-hover: #ff89bf;
    --accent-soft: rgba(255, 102, 170, 0.16);
    --accent-2: #8b6cff;
    --correct: #56d98a;
    --wrong: #ff5f6d;
    --hint: #ffc861;
    --nav-bg: rgba(18, 9, 14, 0.82);
    --glow: 0 0 0 1px rgba(255, 102, 170, 0.18), 0 18px 48px -24px rgba(255, 102, 170, 0.45);
}

body[data-theme="light"] {
    --bg: #fff7fb;
    --bg-grad:
        radial-gradient(900px 520px at 82% -12%, rgba(255, 102, 170, 0.18) 0%, transparent 70%),
        radial-gradient(760px 480px at 8% 108%, rgba(120, 88, 255, 0.10) 0%, transparent 70%),
        linear-gradient(180deg, #fffdff 0%, #fbeef5 100%);
    --surface: rgba(255, 255, 255, 0.92);
    --surface-alt: #fdeef5;
    --border: rgba(60, 20, 40, 0.10);
    --text: #2a1622;
    --text-dim: #7d5e6d;
    --accent: #e3327f;
    --accent-hover: #c8226c;
    --accent-soft: rgba(227, 50, 127, 0.10);
    --accent-2: #6d4ae0;
    --correct: #18995a;
    --wrong: #d3313f;
    --hint: #b3771a;
    --nav-bg: rgba(255, 247, 251, 0.85);
    --glow: 0 0 0 1px rgba(227, 50, 127, 0.12), 0 18px 40px -26px rgba(227, 50, 127, 0.40);
}

body[data-theme="sakura"] {
    --bg: #fdf0f5;
    --bg-grad:
        radial-gradient(900px 520px at 82% -12%, rgba(255, 173, 205, 0.55) 0%, transparent 70%),
        radial-gradient(700px 460px at 6% 106%, rgba(255, 214, 230, 0.75) 0%, transparent 70%),
        linear-gradient(180deg, #fff6fa 0%, #fbe6ee 100%);
    --surface: rgba(255, 252, 253, 0.93);
    --surface-alt: #fbe3ec;
    --border: rgba(200, 120, 155, 0.20);
    --text: #57334a;
    --text-dim: #a1748a;
    --accent: #f2578f;
    --accent-hover: #ff7aa9;
    --accent-soft: rgba(242, 87, 143, 0.13);
    --accent-2: #b98cf0;
    --correct: #3aa76d;
    --wrong: #d94f5c;
    --hint: #cf9433;
    --nav-bg: rgba(253, 240, 245, 0.85);
    --glow: 0 0 0 1px rgba(242, 87, 143, 0.16), 0 18px 44px -26px rgba(242, 87, 143, 0.45);
}

body[data-theme="ocean"] {
    --bg: #071820;
    --bg-grad:
        radial-gradient(900px 520px at 82% -12%, rgba(46, 196, 182, 0.22) 0%, transparent 70%),
        radial-gradient(760px 480px at 8% 108%, rgba(64, 120, 255, 0.18) 0%, transparent 70%),
        linear-gradient(180deg, #0a2030 0%, #05121a 100%);
    --surface: rgba(16, 40, 53, 0.86);
    --surface-alt: rgba(24, 56, 72, 0.9);
    --border: rgba(255, 255, 255, 0.10);
    --text: #dcf1f7;
    --text-dim: #85a7b6;
    --accent: #2ee0c6;
    --accent-hover: #55f0d9;
    --accent-soft: rgba(46, 224, 198, 0.15);
    --accent-2: #4f9dff;
    --correct: #52c98b;
    --wrong: #ff6b76;
    --hint: #ffc861;
    --nav-bg: rgba(7, 24, 32, 0.82);
    --glow: 0 0 0 1px rgba(46, 224, 198, 0.18), 0 18px 48px -24px rgba(46, 224, 198, 0.40);
}