/* === Dark theme (default) === */
html.dark {
--header-bg: #17212B;
--header-color: #fff;
--footer-bg: #17212B;
--footer-color: #fff;
--main-bg: #0E1621;
--main-bg-opaque: #0E1621;
--message-bg: #182633;
--message-color: #fff;
--input-color: #fff;
--input-invalid-val-color: red;
--menu-item-bg: #17212B;
--menu-item-bg-hover: #222E3C;
--menu-item-color: #fff;
--system-message-bg: #fff;
--text-color: #fff;
--text-button: #fff;
--win-btn: rgb(0 0 0 / 23%);
/* App UI */
--app-bg: #0E1621;
--app-outer-bg: #0a0f18;
--gradient-bg: linear-gradient(160deg, #3a6ea5 0%, #1a3a5c 40%, #0E1621 100%);
--gradient-glow-color: rgba(60,120,200,0.15);
--card-bg: #17212B;
--card-shadow: rgba(0,0,0,0.3);
--list-bg: #1e2d3d;
--list-shadow: rgba(0,0,0,0.2);
--list-item-active: #222E3C;
--list-item-name: #fff;
--list-item-sub: #8899aa;
--list-divider: #2a3a4a;
--chevron-color: #556677;
--section-label-color: #7a8a9a;
--see-all-color: #5a9fd4;
--book-gradient: linear-gradient(90deg, #3a6ea5 0%, #1a1a2e 100%);
--book-shadow: rgba(40,80,140,0.35);
--nav-bg: #17212B;
--nav-border: #1e2d3d;
--nav-inactive: #556677;
--nav-active: #5a9fd4;
--accent: #5a9fd4;
--accent-bg: rgba(90,159,212,0.1);
--accent-bg-hover: rgba(90,159,212,0.18);
--meta-color: rgba(255,255,255,0.6);
--meta-dim: rgba(255,255,255,0.4);
--hint-color: rgba(255,255,255,0.5);
--balance-dot: rgba(255,255,255,0.4);
--glass-bg: rgba(255,255,255,0.1);
--glass-border: rgba(255,255,255,0.2);
--theme-color: #0E1621;
--balance-negative: #e53935;
--cube-front: rgba(160,200,255,0.7);
--cube-side: rgba(130,170,230,0.6);
--cube-top: rgba(100,140,200,0.5);
/* Design tokens */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-card: 0 2px 12px var(--list-shadow);
--shadow-modal: 0 12px 48px rgba(0,0,0,0.35);
--shadow-btn: 0 4px 16px rgba(0,0,0,0.15);
--font-xs: 10px;
--font-sm: 12px;
--font-base: 14px;
--font-lg: 16px;
--font-xl: 18px;
--font-2xl: 28px;
}
/* === White theme === */
html.white {
--header-bg: #fff;
--header-color: #000;
--footer-bg: #fff;
--footer-color: #000;
--main-bg: #f7e8bf;
--main-bg-opaque: #f7e8bf;
--message-bg: #fff;
--message-color: #000;
--input-color: #000;
--input-invalid-val-color: red;
--menu-item-bg: #fff;
--menu-item-bg-hover: #f1f1f1;
--menu-item-color: #000;
--system-message-bg: #000;
--text-color: #000;
--text-button: #000;
--win-btn: #BEB293;
/* App UI */
--app-bg: #f7e8bf;
--app-outer-bg: #e8dab0;
--gradient-bg: linear-gradient(160deg, #d4a56a 0%, #b8863a 40%, #5c4a2a 100%);
--gradient-glow-color: rgba(212,165,106,0.18);
--card-bg: #fff;
--card-shadow: rgba(0,0,0,0.1);
--list-bg: #fff;
--list-shadow: rgba(0,0,0,0.06);
--list-item-active: #FFF5ED;
--list-item-name: #1A1A1A;
--list-item-sub: #9A9590;
--list-divider: #F2F0ED;
--chevron-color: #CCC8C4;
--section-label-color: #9A9590;
--see-all-color: #b8863a;
--book-gradient: linear-gradient(90deg, #d4a56a 0%, #5c4a2a 100%);
--book-shadow: rgba(180,130,50,0.35);
--nav-bg: #fff;
--nav-border: #EDEAE6;
--nav-inactive: #C0BBB5;
--nav-active: #b8863a;
--accent: #b8863a;
--accent-bg: rgba(184,134,58,0.07);
--accent-bg-hover: rgba(184,134,58,0.13);
--meta-color: rgba(255,255,255,0.6);
--meta-dim: rgba(255,255,255,0.4);
--hint-color: rgba(255,255,255,0.5);
--balance-dot: rgba(255,255,255,0.4);
--glass-bg: rgba(255,255,255,0.15);
--glass-border: rgba(255,255,255,0.25);
--theme-color: #f7e8bf;
--balance-negative: #c62828;
--cube-front: rgba(200,160,80,0.75);
--cube-side: rgba(180,140,60,0.65);
--cube-top: rgba(160,120,40,0.55);
/* Design tokens */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-card: 0 2px 12px var(--list-shadow);
--shadow-modal: 0 12px 48px rgba(0,0,0,0.25);
--shadow-btn: 0 4px 16px rgba(0,0,0,0.1);
--font-xs: 10px;
--font-sm: 12px;
--font-base: 14px;
--font-lg: 16px;
--font-xl: 18px;
--font-2xl: 28px;
}
/* === Summer theme === */
html.summer {
--header-bg: linear-gradient(90deg, #F0E68C 0%, #FFA07A 100%);
--header-color: #4A4A4A;
--footer-bg: linear-gradient(90deg, #F0E68C 0%, #FFA07A 100%);
--footer-color: #4A4A4A;
--main-bg: #FAFAEA;
--main-bg-opaque: rgba(250, 250, 234, 0.9);
--message-bg: #E6F3F5;
--message-color: #4A4A4A;
--input-color: #4A4A4A;
--input-invalid-val-color: #FF6347;
--menu-item-bg: #87CEEB;
--menu-item-bg-hover: #79B9D4;
--menu-item-color: #FFFFFF;
--system-message-bg: #676455;
--text-color: #4A4A4A;
--text-button: #87CEEB;
--win-btn: rgb(0 0 0 / 23%);
/* App UI */
--app-bg: #FAF8F5;
--app-outer-bg: #E8E0D8;
--gradient-bg: linear-gradient(160deg, #F2874A 0%, #E07030 40%, #2C2C2C 100%);
--gradient-glow-color: rgba(255,160,60,0.18);
--card-bg: #FAF8F5;
--card-shadow: rgba(0,0,0,0.12);
--list-bg: #fff;
--list-shadow: rgba(0,0,0,0.06);
--list-item-active: #FFF5F0;
--list-item-name: #1A1A1A;
--list-item-sub: #9A9590;
--list-divider: #F2F0ED;
--chevron-color: #CCC8C4;
--section-label-color: #9A9590;
--see-all-color: #F2874A;
--book-gradient: linear-gradient(90deg, #F2874A 0%, #2C2C2C 100%);
--book-shadow: rgba(232,101,15,0.35);
--nav-bg: #fff;
--nav-border: #EDEAE6;
--nav-inactive: #C0BBB5;
--nav-active: #F2874A;
--accent: #F2874A;
--accent-bg: rgba(242,135,74,0.07);
--accent-bg-hover: rgba(242,135,74,0.13);
--meta-color: rgba(255,255,255,0.6);
--meta-dim: rgba(255,255,255,0.4);
--hint-color: rgba(255,255,255,0.5);
--balance-dot: rgba(255,255,255,0.4);
--glass-bg: rgba(255,255,255,0.15);
--glass-border: rgba(255,255,255,0.25);
--theme-color: #FAFAEA;
--balance-negative: #d32f2f;
--cube-front: rgba(255,180,100,0.75);
--cube-side: rgba(240,150,70,0.65);
--cube-top: rgba(220,120,40,0.55);
/* Design tokens */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-card: 0 2px 12px var(--list-shadow);
--shadow-modal: 0 12px 48px rgba(0,0,0,0.25);
--shadow-btn: 0 4px 16px rgba(0,0,0,0.12);
--font-xs: 10px;
--font-sm: 12px;
--font-base: 14px;
--font-lg: 16px;
--font-xl: 18px;
--font-2xl: 28px;
}