:root {
    --bg-color: #ebeef3;
    --accent-blue: #1e85a8;
    --accent-glow: color-mix(in srgb, var(--accent-blue) 30%, transparent);
    --text-primary: #182530;
    --text-secondary: #52687a;
    --text-main: #182530;
    --bg-surface: #ffffff;
    --bg-main: #f8fafc;
    --border-color: #e2e8f0;
    --text-muted: #64748b;
    --staff-line: rgba(24, 37, 48, 0.82);
    --staff-note: rgba(24, 37, 48, 0.95);
    --staff-note-fill: #ffffff;
    --staff-paper: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
    --header-bg: linear-gradient(135deg, #5c90b4 0%, #6da2c2 100%);
    --header-text: #fff;
    --header-sub: rgba(255, 255, 255, 0.72);
    --header-divider: rgba(255, 255, 255, 0.28);
    --header-icon-fill: rgba(255, 255, 255, 0.75);
    --header-btn-bg: rgba(255, 255, 255, 0.14);
    --header-btn-border: rgba(255, 255, 255, 0.18);
    --wood-gradient: linear-gradient(90deg, #503120 0%, #6e4c37 50%, #503120 100%);
    --glass-border: rgba(0, 0, 0, 0.06);
    --panel-bg-top: rgba(230, 234, 242, 0.97);
    --panel-bg-bot: rgba(212, 220, 232, 1);
    --pie-color: #b5c3d2;
    --pie-center: rgba(230, 234, 242, 0.97);
    --btn-bg: rgba(255, 255, 255, 0.55);
    --btn-border: rgba(0, 0, 0, 0.08);
    --play-fab-bg: linear-gradient(135deg, #26a0c9 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #2cb0dd 0%, #208fad 100%);
    --font-main: "Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
    --font-ui: "Outfit", sans-serif;
}

body.skin-ash-rose {
    --bg-color: #edeaed;
    --accent-blue: #b3596e;
    --text-primary: #2a1e28;
    --text-secondary: #6e5a68;
    --text-main: #2a1e28;
    --bg-surface: #ffffff;
    --bg-main: #faf8fa;
    --border-color: #ebdce2;
    --text-muted: #857280;
    --staff-line: rgba(42, 30, 40, 0.82);
    --staff-note: rgba(42, 30, 40, 0.95);
    --staff-paper: linear-gradient(180deg, #fff 0%, #fbf9fb 100%);
    --header-bg: linear-gradient(135deg, #a66a7b 0%, #b87a8b 100%);
    --panel-bg-top: rgba(238, 232, 237, 0.97);
    --panel-bg-bot: rgba(222, 214, 222, 1);
    --pie-color: #cdc2ca;
    --pie-center: rgba(238, 232, 237, 0.97);
    --glass-border: rgba(0, 0, 0, 0.07);
    --play-fab-bg: linear-gradient(135deg, #bf6b80 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #cc788e 0%, #a24b5f 100%);
    --dot-light: #e68ca1;
    --dot-dark: #823447;
    --dot-border: rgba(70, 20, 30, 0.4);
}

body.skin-forest-sage {
    --bg-color: #e6ede9;
    --accent-blue: #23946e;
    --text-primary: #1a2e25;
    --text-secondary: #4e6e5e;
    --text-main: #1a2e25;
    --bg-surface: #ffffff;
    --bg-main: #f5f9f7;
    --border-color: #dce6e0;
    --text-muted: #6e8e7e;
    --staff-line: rgba(26, 46, 37, 0.82);
    --staff-note: rgba(26, 46, 37, 0.95);
    --staff-paper: linear-gradient(180deg, #fff 0%, #f7fbf9 100%);
    --header-bg: linear-gradient(135deg, #519e81 0%, #63b395 100%);
    --panel-bg-top: rgba(225, 238, 230, 0.97);
    --panel-bg-bot: rgba(205, 222, 212, 1);
    --pie-color: #b5ccbf;
    --pie-center: rgba(225, 238, 230, 0.97);
    --glass-border: rgba(0, 0, 0, 0.07);
    --play-fab-bg: linear-gradient(135deg, #37a882 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #44b891 0%, #177a59 100%);
    --dot-light: #5cedbf;
    --dot-dark: #0f6145;
    --dot-border: rgba(10, 60, 45, 0.4);
}

body.skin-autumn-amber {
    --bg-color: #eceae4;
    --accent-blue: #b0822b;
    --text-primary: #2a2518;
    --text-secondary: #6e6450;
    --text-main: #2a2518;
    --bg-surface: #ffffff;
    --bg-main: #f9f8f5;
    --border-color: #e6e2d6;
    --text-muted: #8c826b;
    --staff-line: rgba(42, 37, 24, 0.82);
    --staff-note: rgba(42, 37, 24, 0.95);
    --staff-paper: linear-gradient(180deg, #fff 0%, #fbfaf8 100%);
    --header-bg: linear-gradient(135deg, #a88442 0%, #ba9653 100%);
    --panel-bg-top: rgba(238, 234, 225, 0.97);
    --panel-bg-bot: rgba(222, 216, 205, 1);
    --pie-color: #cdc5b3;
    --pie-center: rgba(238, 234, 225, 0.97);
    --glass-border: rgba(0, 0, 0, 0.07);
    --play-fab-bg: linear-gradient(135deg, #bc923d 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #cba14d 0%, #8f671c 100%);
    --dot-light: #e8bd64;
    --dot-dark: #6e4f13;
    --dot-border: rgba(80, 50, 10, 0.4);
}

body.skin-smoky-plum {
    --bg-color: #efe9f1;
    --accent-blue: #7c48a3;
    --text-primary: #2a1d34;
    --text-secondary: #6b597a;
    --text-main: #2a1d34;
    --bg-surface: #ffffff;
    --bg-main: #faf7fc;
    --border-color: #e6d9ec;
    --text-muted: #877495;
    --staff-line: rgba(42, 29, 52, 0.82);
    --staff-note: rgba(42, 29, 52, 0.95);
    --staff-paper: linear-gradient(180deg, #fff 0%, #f8f3fc 100%);
    --header-bg: linear-gradient(135deg, #9161b3 0%, #a472c7 100%);
    --panel-bg-top: rgba(234, 226, 241, 0.97);
    --panel-bg-bot: rgba(218, 208, 230, 1);
    --pie-color: #cbbbd8;
    --pie-center: rgba(234, 226, 241, 0.97);
    --glass-border: rgba(0, 0, 0, 0.07);
    --play-fab-bg: linear-gradient(135deg, #9562bd 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #a774d1 0%, #5e317d 100%);
    --dot-light: #c295eb;
    --dot-dark: #4e266b;
    --dot-border: rgba(50, 20, 70, 0.4);
}

body.skin-mist-gray {
    --bg-color: #eef1f4;
    --accent-blue: #64748b;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-main: #1e293b;
    --bg-surface: #ffffff;
    --bg-main: #f8fafc;
    --border-color: #cbd5e1;
    --text-muted: #64748b;
    --staff-line: rgba(30, 41, 59, 0.82);
    --staff-note: rgba(30, 41, 59, 0.95);
    --staff-paper: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
    --header-bg: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    --panel-bg-top: rgba(238, 242, 246, 0.97);
    --panel-bg-bot: rgba(226, 232, 240, 1);
    --pie-color: #cbd5e1;
    --pie-center: rgba(238, 242, 246, 0.97);
    --glass-border: rgba(0, 0, 0, 0.07);
    --play-fab-bg: linear-gradient(135deg, #8292a8 0%, var(--accent-blue) 100%);
    --play-fab-hover: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
    --dot-light: #94a3b8;
    --dot-dark: #334155;
    --dot-border: rgba(51, 65, 85, 0.4);
}

.theme-swatch--default {
    background: linear-gradient(135deg, #5c90b4, #1e85a8);
}

.theme-swatch--ash-rose {
    background: linear-gradient(135deg, #a66a7b, #b3596e);
}

.theme-swatch--forest-sage {
    background: linear-gradient(135deg, #519e81, #23946e);
}

.theme-swatch--autumn-amber {
    background: linear-gradient(135deg, #a88442, #b0822b);
}

.theme-swatch--smoky-plum {
    background: linear-gradient(135deg, #9161b3, #7c48a3);
}

.theme-swatch--mist-gray {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}