/* ======================================================================
* Темы daisyUI, адаптированные под capiera.
* Источник: github.com/saadeghi/daisyui (MIT).
*
* Каждая тема задаёт переменные daisyUI (--color-base-*, --color-primary и т.д.)
* и маппит их на переменные capiera (--bg-*, --text-*, --accent).
*
* Использует oklch() — поддержка: Chrome 111+, Safari 16.4+, Firefox 113+.
* color-scheme применяется через :root[data-theme=...] чтобы нативные элементы
* (скроллбары, ) перекрашивались автоматически.
*
* Селекторы — [data-theme="..."], потому что applyTheme() в app.js ставит атрибут
* и на , и на (см. CLAUDE.md, секция «Theme system»).
* ====================================================================== */
/* Дефолты daisyUI для компонентов (на случай темы без явного значения). */
:root {
--radius-selector: 0.5rem;
--radius-field: 0.5rem;
--radius-box: 0.75rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--depth: 0;
--noise: 0;
}
/* Контрастный текст для элементов на фоне --accent (активная вкладка, кнопки,
бейджи и т.п.). daisyUI-темы задают --color-primary-content (тёмный текст к
пастельному праймери); light/dark его не задают → fallback white, поведение
как раньше. Одним правилом закрываем все темы (в т.ч. будущие). */
[data-theme] {
--accent-content: var(--color-primary-content, white);
}
/* ===================== 1. Dracula (dark, purple/pink) ===================== */
[data-theme="dracula"] {
color-scheme: dark;
--color-base-100: oklch(28.822% 0.022 277.508);
--color-base-200: oklch(26.805% 0.02 277.508);
--color-base-300: oklch(24.787% 0.019 277.508);
--color-base-content: oklch(97.747% 0.007 106.545);
--color-primary: oklch(75.461% 0.183 346.812);
--color-primary-content: oklch(15.092% 0.036 346.812);
--color-secondary: oklch(74.202% 0.148 301.883);
--color-secondary-content: oklch(14.84% 0.029 301.883);
--color-accent: oklch(83.392% 0.124 66.558);
--color-accent-content: oklch(16.678% 0.024 66.558);
--color-info: oklch(88.263% 0.093 212.846);
--color-success: oklch(87.099% 0.219 148.024);
--color-warning: oklch(95.533% 0.134 112.757);
--color-error: oklch(68.22% 0.206 24.43);
--color-info-content: oklch(17.652% 0.018 212.846);
--color-success-content: oklch(17.419% 0.043 148.024);
--color-warning-content: oklch(19.106% 0.026 112.757);
--color-error-content: oklch(13.644% 0.041 24.43);
/* capiera mapping */
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 80%, white);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ===================== 2. Cupcake (light, pastel cyan) ===================== */
[data-theme="cupcake"] {
color-scheme: light;
--color-base-100: oklch(97.788% 0.004 56.375);
--color-base-200: oklch(93.982% 0.007 61.449);
--color-base-300: oklch(91.586% 0.006 53.44);
--color-base-content: oklch(23.574% 0.066 313.189);
--color-primary: oklch(85% 0.138 181.071);
--color-primary-content: oklch(43% 0.078 188.216);
--color-secondary: oklch(89% 0.061 343.231);
--color-secondary-content: oklch(45% 0.187 3.815);
--color-accent: oklch(90% 0.076 70.697);
--color-accent-content: oklch(47% 0.157 37.304);
--color-info: oklch(68% 0.169 237.323);
--color-success: oklch(69% 0.17 162.48);
--color-warning: oklch(79% 0.184 86.047);
--color-error: oklch(64% 0.246 16.439);
--color-info-content: oklch(29% 0.066 243.157);
--color-success-content: oklch(26% 0.051 172.552);
--color-warning-content: oklch(28% 0.066 53.813);
--color-error-content: oklch(27% 0.105 12.094);
--radius-field: 2rem;
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
}
/* ===================== 3. Synthwave (dark, neon pink) ===================== */
[data-theme="synthwave"] {
color-scheme: dark;
--color-base-100: oklch(15% 0.09 281.288);
--color-base-200: oklch(20% 0.09 281.288);
--color-base-300: oklch(25% 0.09 281.288);
--color-base-content: oklch(78% 0.115 274.713);
--color-primary: oklch(71% 0.202 349.761);
--color-primary-content: oklch(28% 0.109 3.907);
--color-secondary: oklch(82% 0.111 230.318);
--color-secondary-content: oklch(29% 0.066 243.157);
--color-accent: oklch(75% 0.183 55.934);
--color-accent-content: oklch(26% 0.079 36.259);
--color-info: oklch(74% 0.16 232.661);
--color-success: oklch(77% 0.152 181.912);
--color-warning: oklch(90% 0.182 98.111);
--color-error: oklch(73.7% 0.121 32.639);
--color-info-content: oklch(29% 0.066 243.157);
--color-success-content: oklch(27% 0.046 192.524);
--color-warning-content: oklch(42% 0.095 57.708);
--color-error-content: oklch(23.501% 0.096 290.329);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 80%, white);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ===================== 4. Retro (light, warm cream) ===================== */
[data-theme="retro"] {
color-scheme: light;
--color-base-100: oklch(91.637% 0.034 90.515);
--color-base-200: oklch(88.272% 0.049 91.774);
--color-base-300: oklch(84.133% 0.065 90.856);
--color-base-content: oklch(41% 0.112 45.904);
--color-primary: oklch(80% 0.114 19.571);
--color-primary-content: oklch(39% 0.141 25.723);
--color-secondary: oklch(92% 0.084 155.995);
--color-secondary-content: oklch(44% 0.119 151.328);
--color-accent: oklch(68% 0.162 75.834);
--color-accent-content: oklch(41% 0.112 45.904);
--color-info: oklch(58% 0.158 241.966);
--color-success: oklch(51% 0.096 186.391);
--color-warning: oklch(64% 0.222 41.116);
--color-error: oklch(70% 0.191 22.216);
--color-info-content: oklch(96% 0.059 95.617);
--color-success-content: oklch(96% 0.059 95.617);
--color-warning-content: oklch(96% 0.059 95.617);
--color-error-content: oklch(40% 0.123 38.172);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(70, 35, 0, 0.08);
--shadow-md: 0 4px 12px rgba(70, 35, 0, 0.1);
--shadow-lg: 0 20px 60px rgba(70, 35, 0, 0.2);
}
/* ===================== 5. Cyberpunk (light, neon yellow) ===================== */
[data-theme="cyberpunk"] {
color-scheme: light;
--color-base-100: oklch(94.51% 0.179 104.32);
--color-base-200: oklch(91.51% 0.179 104.32);
--color-base-300: oklch(85.51% 0.179 104.32);
--color-base-content: oklch(0% 0 0);
--color-primary: oklch(74.22% 0.209 6.35);
--color-primary-content: oklch(14.844% 0.041 6.35);
--color-secondary: oklch(83.33% 0.184 204.72);
--color-secondary-content: oklch(16.666% 0.036 204.72);
--color-accent: oklch(71.86% 0.217 310.43);
--color-accent-content: oklch(14.372% 0.043 310.43);
--color-info: oklch(72.06% 0.191 231.6);
--color-success: oklch(64.8% 0.15 160);
--color-warning: oklch(84.71% 0.199 83.87);
--color-error: oklch(71.76% 0.221 22.18);
--color-info-content: oklch(0% 0 0);
--color-success-content: oklch(0% 0 0);
--color-warning-content: oklch(0% 0 0);
--color-error-content: oklch(0% 0 0);
--radius-selector: 0rem;
--radius-field: 0rem;
--radius-box: 0rem;
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* ===================== 6. Nord (light, cool blue-gray) ===================== */
[data-theme="nord"] {
color-scheme: light;
--color-base-100: oklch(95.127% 0.007 260.731);
--color-base-200: oklch(93.299% 0.01 261.788);
--color-base-300: oklch(89.925% 0.016 262.749);
--color-base-content: oklch(32.437% 0.022 264.182);
--color-primary: oklch(59.435% 0.077 254.027);
--color-primary-content: oklch(11.887% 0.015 254.027);
--color-secondary: oklch(69.651% 0.059 248.687);
--color-secondary-content: oklch(13.93% 0.011 248.687);
--color-accent: oklch(77.464% 0.062 217.469);
--color-accent-content: oklch(15.492% 0.012 217.469);
--color-info: oklch(69.207% 0.062 332.664);
--color-success: oklch(76.827% 0.074 131.063);
--color-warning: oklch(85.486% 0.089 84.093);
--color-error: oklch(60.61% 0.12 15.341);
--color-info-content: oklch(13.841% 0.012 332.664);
--color-success-content: oklch(15.365% 0.014 131.063);
--color-warning-content: oklch(17.097% 0.017 84.093);
--color-error-content: oklch(12.122% 0.024 15.341);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(46, 52, 64, 0.08);
--shadow-md: 0 4px 12px rgba(46, 52, 64, 0.1);
--shadow-lg: 0 20px 60px rgba(46, 52, 64, 0.18);
}
/* ===================== 7. Night (dark, blue) ===================== */
[data-theme="night"] {
color-scheme: dark;
--color-base-100: oklch(20.768% 0.039 265.754);
--color-base-200: oklch(19.314% 0.037 265.754);
--color-base-300: oklch(17.86% 0.034 265.754);
--color-base-content: oklch(84.153% 0.007 265.754);
--color-primary: oklch(75.351% 0.138 232.661);
--color-primary-content: oklch(15.07% 0.027 232.661);
--color-secondary: oklch(68.011% 0.158 276.934);
--color-secondary-content: oklch(13.602% 0.031 276.934);
--color-accent: oklch(72.36% 0.176 350.048);
--color-accent-content: oklch(14.472% 0.035 350.048);
--color-info: oklch(68.455% 0.148 237.251);
--color-success: oklch(78.452% 0.132 181.911);
--color-warning: oklch(83.242% 0.139 82.95);
--color-error: oklch(71.785% 0.17 13.118);
--color-info-content: oklch(0% 0 0);
--color-success-content: oklch(15.69% 0.026 181.911);
--color-warning-content: oklch(16.648% 0.027 82.95);
--color-error-content: oklch(14.357% 0.034 13.118);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 80%, white);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ===================== 8. Coffee (dark, warm brown) ===================== */
[data-theme="coffee"] {
color-scheme: dark;
--color-base-100: oklch(24% 0.023 329.708);
--color-base-200: oklch(21% 0.021 329.708);
--color-base-300: oklch(16% 0.019 329.708);
--color-base-content: oklch(72.354% 0.092 79.129);
--color-primary: oklch(71.996% 0.123 62.756);
--color-primary-content: oklch(14.399% 0.024 62.756);
--color-secondary: oklch(34.465% 0.029 199.194);
--color-secondary-content: oklch(86.893% 0.005 199.194);
--color-accent: oklch(42.621% 0.074 224.389);
--color-accent-content: oklch(88.524% 0.014 224.389);
--color-info: oklch(79.49% 0.063 184.558);
--color-success: oklch(74.722% 0.072 131.116);
--color-warning: oklch(88.15% 0.14 87.722);
--color-error: oklch(77.318% 0.128 31.871);
--color-info-content: oklch(15.898% 0.012 184.558);
--color-success-content: oklch(14.944% 0.014 131.116);
--color-warning-content: oklch(17.63% 0.028 87.722);
--color-error-content: oklch(15.463% 0.025 31.871);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 80%, white);
--shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ===================== 9. Corporate (light, clean business) ===================== */
[data-theme="corporate"] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(22.389% 0.031 278.072);
--color-primary: oklch(58% 0.158 241.966);
--color-primary-content: oklch(100% 0 0);
--color-secondary: oklch(55% 0.046 257.417);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(60% 0.118 184.704);
--color-accent-content: oklch(100% 0 0);
--color-info: oklch(60% 0.126 221.723);
--color-success: oklch(62% 0.194 149.214);
--color-warning: oklch(85% 0.199 91.936);
--color-error: oklch(70% 0.191 22.216);
--color-info-content: oklch(100% 0 0);
--color-success-content: oklch(100% 0 0);
--color-warning-content: oklch(0% 0 0);
--color-error-content: oklch(0% 0 0);
--radius-selector: 0.25rem;
--radius-field: 0.25rem;
--radius-box: 0.25rem;
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
}
/* ===================== 10. Emerald (light, fresh green) ===================== */
[data-theme="emerald"] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(35.519% 0.032 262.988);
--color-primary: oklch(76.662% 0.135 153.45);
--color-primary-content: oklch(33.387% 0.04 162.24);
--color-secondary: oklch(61.302% 0.202 261.294);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(72.772% 0.149 33.2);
--color-accent-content: oklch(0% 0 0);
--color-info: oklch(72.06% 0.191 231.6);
--color-success: oklch(64.8% 0.15 160);
--color-warning: oklch(84.71% 0.199 83.87);
--color-error: oklch(71.76% 0.221 22.18);
--color-info-content: oklch(0% 0 0);
--color-success-content: oklch(0% 0 0);
--color-warning-content: oklch(0% 0 0);
--color-error-content: oklch(0% 0 0);
--bg-app: var(--color-base-200);
--bg-card: var(--color-base-100);
--bg-soft: var(--color-base-200);
--bg-softer: var(--color-base-300);
--text-primary: var(--color-base-content);
--text-secondary: color-mix(in oklab, var(--color-base-content) 80%, transparent);
--text-muted: color-mix(in oklab, var(--color-base-content) 60%, transparent);
--text-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
--border: var(--color-base-300);
--border-soft: var(--color-base-200);
--accent: var(--color-primary);
--accent-hover: color-mix(in oklab, var(--color-primary) 85%, black);
--shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
}