:root,
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0e1d1b;
--color-surface: #162926;       /* cards, sheets */
--color-surface-2: #1e3531;     /* inputs, subtle areas */
--color-border: #29443f;
--color-text: #e7f6f2;
--color-text-muted: #9cbab3;
--color-primary: #4fd1b8;       /* mint */
--color-primary-strong: #80e2cf;
--color-primary-soft: #1a3f38;
--color-on-primary: #052620;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #4fd1b8;  --fill-ink: #052620;  --fill-muted: #185248;  --fill-chip: #3a9f8c;  --fill-accent: #246e60;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="mint"] {
color-scheme: light;
--color-bg: #f4fbf9;
--color-surface: #ffffff;
--color-surface-2: #e8f6f2;
--color-border: #d3ece5;
--color-text: #10302a;
--color-text-muted: #4a6862;
--color-primary: #0b7a6b;
--color-primary-strong: #09665a;
--color-primary-soft: #d5f3ec;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #09584e;
--fill-bg: #09665a;  --fill-ink: #ffffff;  --fill-muted: #c6dcd9;  --fill-chip: #307e74;  --fill-accent: #90bab5;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(16, 48, 42, 0.06), 0 4px 16px rgba(16, 48, 42, 0.07);
--shadow-sheet: 0 -8px 32px rgba(16, 48, 42, 0.16);
--backdrop: rgba(10, 30, 26, 0.4);
}
[data-theme="blue"] {
color-scheme: light;
--color-bg: #f4f8fe;
--color-surface: #ffffff;
--color-surface-2: #e6f0fc;
--color-border: #d4e4f6;
--color-text: #12253c;
--color-text-muted: #4b5f77;
--color-primary: #1b6ec2;
--color-primary-strong: #15589c;
--color-primary-soft: #dbeafb;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #8a4f00;
--color-careful-soft: #ffecd6;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #0b6b53;
--color-good-soft: #d8f3ea;
--color-good: #0e7d62;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #0f4a85;
--fill-bg: #15589c;  --fill-ink: #ffffff;  --fill-muted: #c2d4e5;  --fill-chip: #3f76ae;  --fill-accent: #91b1d0;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(18, 37, 60, 0.06), 0 4px 16px rgba(18, 37, 60, 0.07);
--shadow-sheet: 0 -8px 32px rgba(18, 37, 60, 0.16);
--backdrop: rgba(12, 24, 40, 0.4);
}
[data-theme="dark-sky"] {
color-scheme: dark;
--color-bg: #0e1824;
--color-surface: #162434;
--color-surface-2: #1e3045;
--color-border: #2a4058;
--color-text: #e8f1fb;
--color-text-muted: #a2b8cf;
--color-primary: #7fbcf2;
--color-primary-strong: #a9d2f7;
--color-primary-soft: #1b3350;
--color-on-primary: #06213b;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #7fbcf2;  --fill-ink: #06213b;  --fill-muted: #244869;  --fill-chip: #5c8fbd;  --fill-accent: #386186;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="dark-blush"] {
color-scheme: dark;
--color-bg: #1b1416;
--color-surface: #261c1f;
--color-surface-2: #322529;
--color-border: #463237;
--color-text: #f8ecef;
--color-text-muted: #c7adb3;
--color-primary: #f2a7c0;       /* rose (a pink, never the coral-red of "overdue") */
--color-primary-strong: #f7c4d5;
--color-primary-soft: #45263a;
--color-on-primary: #3a0f22;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #f2a7c0;  --fill-ink: #3a0f22;  --fill-muted: #6c384d;  --fill-chip: #bd7b92;  --fill-accent: #895066;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="blush"] {
color-scheme: light;
--color-bg: #fdf6f8;
--color-surface: #ffffff;
--color-surface-2: #f9e8ee;
--color-border: #f0d5de;
--color-text: #3a1d29;
--color-text-muted: #6d4c58;
--color-primary: #b0396f;       /* deep rose (a pink, never the coral-red of "overdue") */
--color-primary-strong: #932d5c;
--color-primary-soft: #fbe0ec;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #852452;
--fill-bg: #932d5c;  --fill-ink: #ffffff;  --fill-muted: #e2c6d3;  --fill-chip: #aa597e;  --fill-accent: #cc9cb2;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(58, 29, 41, 0.06), 0 4px 16px rgba(58, 29, 41, 0.07);
--shadow-sheet: 0 -8px 32px rgba(58, 29, 41, 0.16);
--backdrop: rgba(40, 18, 28, 0.4);
}
[data-theme="dark-peach"] {
color-scheme: dark;
--color-bg: #1c1612;
--color-surface: #281f19;
--color-surface-2: #342820;
--color-border: #4a382c;
--color-text: #faeee6;
--color-text-muted: #cbb2a2;
--color-primary: #ffc38f;
--color-primary-strong: #ffd6b3;
--color-primary-soft: #4a3020;
--color-on-primary: #3a1d06;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #ffc38f;  --fill-ink: #3a1d06;  --fill-muted: #734d2e;  --fill-chip: #c69367;  --fill-accent: #916642;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="peach"] {
color-scheme: light;
--color-bg: #fff6ef;
--color-surface: #ffffff;
--color-surface-2: #fde8da;
--color-border: #f3d3bd;
--color-text: #3b2418;
--color-text-muted: #6e4f40;
--color-primary: #a4521c;       /* deep apricot (an orange, never the coral-red of "overdue") */
--color-primary-strong: #864215;
--color-primary-soft: #ffe3d1;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #7c3a10;
--fill-bg: #864215;  --fill-ink: #ffffff;  --fill-muted: #ddcabd;  --fill-chip: #9d6641;  --fill-accent: #c5a48f;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(59, 36, 24, 0.06), 0 4px 16px rgba(59, 36, 24, 0.07);
--shadow-sheet: 0 -8px 32px rgba(59, 36, 24, 0.16);
--backdrop: rgba(42, 24, 14, 0.4);
}
[data-theme="warm"] {
color-scheme: light;
--color-bg: #f6f0e7;
--color-surface: #fffcf7;
--color-surface-2: #f2eadf;
--color-border: #e6dccd;
--color-text: #2b241e;
--color-text-muted: #625548;
--color-primary: #0b6e60;       /* deep teal */
--color-primary-strong: #075a4f;
--color-primary-soft: #dcefe7;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #845400;
--color-careful-soft: #faefd5;
--color-overdue: #b0352a;
--color-overdue-soft: #fbe3dd;
--color-error: #a8352c;
--color-error-soft: #fbe9e5;
--color-good-strong: #07604f;
--color-good-soft: #dcefe7;
--color-good: #0b7a62;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #133f37;
--fill-bg: #075a4f;  --fill-ink: #ffffff;  --fill-muted: #b2ccc8;  --fill-chip: #3e7e76;  --fill-accent: #81aba5;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(60, 44, 28, 0.06), 0 6px 20px rgba(60, 44, 28, 0.07);
--shadow-sheet: 0 -8px 32px rgba(60, 44, 28, 0.16);
--backdrop: rgba(38, 28, 18, 0.4);
}
[data-theme="dark-warm"] {
color-scheme: dark;
--color-bg: #1a1714;
--color-surface: #25211d;
--color-surface-2: #2f2a25;
--color-border: #3d362f;
--color-text: #f4ede3;
--color-text-muted: #bdb0a2;
--color-primary: #63d6bd;       /* mint */
--color-primary-strong: #92e5d2;
--color-primary-soft: #1f3a33;
--color-on-primary: #062a23;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c879;
--color-careful-soft: #3a2f18;
--color-overdue: #ffa08f;
--color-overdue-soft: #48261f;
--color-error: #f2a9a1;
--color-error-soft: #3f2724;
--color-good-strong: #92e5d2;
--color-good-soft: #1f3a33;
--color-good: #63d6bd;
--color-on-good: #062a23;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #fff8ee;
--fill-bg: #63d6bd;  --fill-ink: #062a23;  --fill-muted: #1e574b;  --fill-chip: #48a490;  --fill-accent: #2d7264;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.22);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="evergreen"] {
color-scheme: light;
--color-bg: #f4f4ef;
--color-surface: #ffffff;
--color-surface-2: #eef1ec;
--color-border: #e3e7e0;
--color-text: #17201b;
--color-text-muted: #56635b;
--color-primary: #1f5a43;       /* deep forest green */
--color-primary-strong: #174634;
--color-primary-soft: #e4eee8;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #7a5300;
--color-careful-soft: #f7ecd3;
--color-overdue: #b0352a;
--color-overdue-soft: #fbe3dd;
--color-error: #a8352c;
--color-error-soft: #fbe9e5;
--color-good-strong: #174634;
--color-good-soft: #e4eee8;
--color-good: #1f6b4f;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #17402f;
--fill-bg: #1f5a43;  --fill-ink: #ffffff;  --fill-muted: #cfe4d8;  --fill-chip: #2c6e54;  --fill-accent: #a8dcc2;
--chart-1: #1f5a43;  --chart-2: #3f8466;  --chart-3: #78ae93;  --chart-4: #b3d2c1;  --chart-5: #d4e3da;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(23, 32, 27, 0.04), 0 8px 24px rgba(23, 32, 27, 0.05);
--shadow-sheet: 0 -8px 32px rgba(23, 32, 27, 0.14);
--backdrop: rgba(14, 22, 18, 0.4);
}
[data-theme="dark-evergreen"] {
color-scheme: dark;
--color-bg: #0e1310;
--color-surface: #171e1a;
--color-surface-2: #1f2924;
--color-border: #26312b;
--color-text: #edf3ef;
--color-text-muted: #a3b2a9;
--color-primary: #74c79f;
--color-primary-strong: #9fdcbf;
--color-primary-soft: #1c3128;
--color-on-primary: #08261a;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f0c878;
--color-careful-soft: #3a2f17;
--color-overdue: #ffa08f;
--color-overdue-soft: #48261f;
--color-error: #f2a9a1;
--color-error-soft: #3f2724;
--color-good-strong: #9fdcbf;
--color-good-soft: #1c3128;
--color-good: #74c79f;
--color-on-good: #08261a;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #1f5a43;  --fill-ink: #ffffff;  --fill-muted: #cfe4d8;  --fill-chip: #2c6e54;  --fill-accent: #a8dcc2;
--chart-1: #74c79f;  --chart-2: #4f9d7b;  --chart-3: #2f6b52;  --chart-4: #a7dcc3;  --chart-5: #3b5247;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}