/* Audio Trainer: the global theme (light, sepia or dark) chosen in the selector or in the cabinet.
   The page sets most of its surfaces inline, and the browser writes what the script set as rgb(...), while the
   markup keeps the hex form. So each light value is matched in both forms. Backgrounds are matched by the
   "background" prefix only: white text on the accent buttons must keep its accent background. */

:root[data-theme="dark"] {
    --bg-color: #0f172a;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --glass-bg: rgba(30, 41, 59, 0.72);
    --glass-border: rgba(148, 163, 184, 0.22);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme="sepia"] {
    --bg-color: #f4ead6;
    --text-main: #3d2e1a;
    --text-muted: #7a6248;
    --glass-bg: rgba(251, 245, 232, 0.82);
    --glass-border: #d8c49d;
    --glass-shadow: 0 8px 24px rgba(93, 64, 55, 0.12);
}

[data-theme="dark"] body {
    background-image: radial-gradient(circle at top right, rgba(139, 92, 246, 0.22), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.14), transparent 40%);
}

[data-theme="sepia"] body {
    background-image: radial-gradient(circle at top right, rgba(180, 83, 9, 0.12), transparent 40%),
                      radial-gradient(circle at bottom left, rgba(217, 119, 6, 0.1), transparent 40%);
}

/* ================= dark ================= */

[data-theme="dark"] [style*="background:#f8fafc" i],
[data-theme="dark"] [style*="background: #f8fafc" i],
[data-theme="dark"] [style*="background: rgb(248, 250, 252)" i],
[data-theme="dark"] [style*="background:#fff;" i],
[data-theme="dark"] [style*="background: #fff;" i],
[data-theme="dark"] [style*="background:#ffffff" i],
[data-theme="dark"] [style*="background: #ffffff" i],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)" i] {
    background-color: #1e293b !important;
}

[data-theme="dark"] [style*="background:#f1f5f9" i],
[data-theme="dark"] [style*="background: #f1f5f9" i],
[data-theme="dark"] [style*="background: rgb(241, 245, 249)" i] {
    background-color: #273449 !important;
}

[data-theme="dark"] [style*="background:#eef2ff" i],
[data-theme="dark"] [style*="background: #eef2ff" i],
[data-theme="dark"] [style*="background: rgb(238, 242, 255)" i] {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] [style*="background:#e2e8f0" i],
[data-theme="dark"] [style*="background: #e2e8f0" i],
[data-theme="dark"] [style*="background: rgb(226, 232, 240)" i] {
    background-color: #334155 !important;
}

[data-theme="dark"] [style*="#e2e8f0" i],
[data-theme="dark"] [style*="rgb(226, 232, 240)" i] {
    border-color: rgba(148, 163, 184, 0.3) !important;
}

[data-theme="dark"] [style*="color:#1e293b" i],
[data-theme="dark"] [style*="color: #1e293b" i],
[data-theme="dark"] [style*="color: rgb(30, 41, 59)" i],
[data-theme="dark"] [style*="color:#0f172a" i],
[data-theme="dark"] [style*="color: #0f172a" i],
[data-theme="dark"] [style*="color: rgb(15, 23, 42)" i] {
    color: #f1f5f9 !important;
}

[data-theme="dark"] [style*="color:#475569" i],
[data-theme="dark"] [style*="color: #475569" i],
[data-theme="dark"] [style*="color: rgb(71, 85, 105)" i] {
    color: #cbd5e1 !important;
}

[data-theme="dark"] [style*="color:#64748b" i],
[data-theme="dark"] [style*="color: #64748b" i],
[data-theme="dark"] [style*="color: rgb(100, 116, 139)" i] {
    color: #94a3b8 !important;
}

[data-theme="dark"] [style*="color:#6366f1" i],
[data-theme="dark"] [style*="color: #6366f1" i],
[data-theme="dark"] [style*="color: rgb(99, 102, 241)" i],
[data-theme="dark"] [style*="color:#4f46e5" i],
[data-theme="dark"] [style*="color: #4f46e5" i],
[data-theme="dark"] [style*="color: rgb(79, 70, 229)" i] {
    color: #a5b4fc !important;
}

[data-theme="dark"] [style*="color:#15803d" i],
[data-theme="dark"] [style*="color: #15803d" i],
[data-theme="dark"] [style*="color: rgb(21, 128, 61)" i] {
    color: #86efac !important;
}

[data-theme="dark"] [style*="color:#b45309" i],
[data-theme="dark"] [style*="color: #b45309" i],
[data-theme="dark"] [style*="color: rgb(180, 83, 9)" i] {
    color: #fcd34d !important;
}

/* form controls: native white fields would stay white on a dark page */
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.3);
}

/* ================= sepia ================= */

[data-theme="sepia"] [style*="background:#f8fafc" i],
[data-theme="sepia"] [style*="background: #f8fafc" i],
[data-theme="sepia"] [style*="background: rgb(248, 250, 252)" i],
[data-theme="sepia"] [style*="background:#fff;" i],
[data-theme="sepia"] [style*="background: #fff;" i],
[data-theme="sepia"] [style*="background:#ffffff" i],
[data-theme="sepia"] [style*="background: #ffffff" i],
[data-theme="sepia"] [style*="background: rgb(255, 255, 255)" i] {
    background-color: #fbf5e8 !important;
}

[data-theme="sepia"] [style*="background:#f1f5f9" i],
[data-theme="sepia"] [style*="background: #f1f5f9" i],
[data-theme="sepia"] [style*="background: rgb(241, 245, 249)" i] {
    background-color: #f4ead6 !important;
}

[data-theme="sepia"] [style*="background:#eef2ff" i],
[data-theme="sepia"] [style*="background: #eef2ff" i],
[data-theme="sepia"] [style*="background: rgb(238, 242, 255)" i] {
    background-color: #f3e3c3 !important;
}

[data-theme="sepia"] [style*="background:#e2e8f0" i],
[data-theme="sepia"] [style*="background: #e2e8f0" i],
[data-theme="sepia"] [style*="background: rgb(226, 232, 240)" i] {
    background-color: #e8d9bb !important;
}

[data-theme="sepia"] [style*="#e2e8f0" i],
[data-theme="sepia"] [style*="rgb(226, 232, 240)" i] {
    border-color: #d8c49d !important;
}

[data-theme="sepia"] [style*="color:#1e293b" i],
[data-theme="sepia"] [style*="color: #1e293b" i],
[data-theme="sepia"] [style*="color: rgb(30, 41, 59)" i],
[data-theme="sepia"] [style*="color:#0f172a" i],
[data-theme="sepia"] [style*="color: #0f172a" i],
[data-theme="sepia"] [style*="color: rgb(15, 23, 42)" i] {
    color: #3d2e1a !important;
}

[data-theme="sepia"] [style*="color:#475569" i],
[data-theme="sepia"] [style*="color: #475569" i],
[data-theme="sepia"] [style*="color: rgb(71, 85, 105)" i] {
    color: #6b5540 !important;
}

[data-theme="sepia"] [style*="color:#64748b" i],
[data-theme="sepia"] [style*="color: #64748b" i],
[data-theme="sepia"] [style*="color: rgb(100, 116, 139)" i] {
    color: #7a6248 !important;
}

[data-theme="sepia"] [style*="color:#6366f1" i],
[data-theme="sepia"] [style*="color: #6366f1" i],
[data-theme="sepia"] [style*="color: rgb(99, 102, 241)" i],
[data-theme="sepia"] [style*="color:#4f46e5" i],
[data-theme="sepia"] [style*="color: #4f46e5" i],
[data-theme="sepia"] [style*="color: rgb(79, 70, 229)" i] {
    color: #9a3412 !important;
}

[data-theme="sepia"] select,
[data-theme="sepia"] input[type="text"],
[data-theme="sepia"] input[type="search"],
[data-theme="sepia"] textarea {
    background-color: #fbf5e8;
    color: #3d2e1a;
    border-color: #d8c49d;
}