/*
 * Light and dark theme for the fixed Tailwind colours the templates use (slate greys, white, the status tints):
 * templates keep writing plain light classes, and each is redefined here once as light-dark(Tailwind's light value,
 * its dark counterpart). <html data-theme="light|dark"> (static/js/theme.js) sets color-scheme, which picks the value
 * (static/css/tokens.css); printing is always light. Token classes (text-ink, bg-canvas, border-line, card...) need
 * nothing here. Using a new fixed colour in a template? Add it here (DarkThemeTests).
 */

/* Theme toggle icon (layout/base.html): show the one for the current choice */
.theme-icon { display: none; }
:root[data-theme-choice="system"] .theme-icon-system,
:root:not([data-theme-choice]) .theme-icon-system,
:root[data-theme-choice="light"] .theme-icon-light,
:root[data-theme-choice="dark"] .theme-icon-dark { display: inline-block; }

/* --- Components (src/main/frontend/tailwind.css) ------------------------------------------------------------------ */
.btn-secondary { color: var(--ink-2); }
.label { color: var(--ink-2); }
.input { border-color: var(--line-strong); }
.page-subtitle { color: var(--muted); }
.field-error { color: light-dark(#B91C1C, #FCA5A5); }
/* Row actions' focus ring: the lighter purple on dark surfaces, 6.4:1 (brand is 3:1) */
.row-action:focus-visible { --tw-ring-color: light-dark(var(--brand-purple), var(--brand-light)); }

/* --- Surfaces ------------------------------------------------------------------------------------------------------ */
.bg-white,
.focus\:bg-white:focus { background-color: var(--surface); }
.bg-white\/80 { background-color: color-mix(in srgb, var(--surface) 80%, transparent); }
.bg-slate-50,
.hover\:bg-slate-50:hover { background-color: var(--raised); }
.bg-slate-100,
.hover\:bg-slate-100:hover { background-color: var(--raised-2); }
.bg-slate-100\/80 { background-color: color-mix(in srgb, var(--raised-2) 80%, transparent); }
.bg-slate-200,
.hover\:bg-slate-200:hover { background-color: light-dark(#E2E8F0, #334155); }
.bg-slate-800 { background-color: light-dark(#1E293B, #334155); }
.hover\:bg-slate-900:hover { background-color: light-dark(#0F172A, #475569); }

/* --- Text ---------------------------------------------------------------------------------------------------------- */
.text-slate-900,
.hover\:text-slate-900:hover { color: light-dark(#0F172A, #F1F5F9); }
.text-slate-800 { color: light-dark(#1E293B, #E2E8F0); }
.text-slate-700,
.hover\:text-slate-700:hover { color: light-dark(#334155, #CBD5E1); }
.text-slate-600 { color: light-dark(#475569, #B4C0D0); }
.text-slate-500,
.hover\:text-slate-500:hover { color: light-dark(#64748B, #94A3B8); }
.text-slate-400 { color: light-dark(#94A3B8, #7C8AA0); }
.text-slate-300 { color: light-dark(#CBD5E1, #64748B); }
.text-slate-200 { color: light-dark(#E2E8F0, #475569); }
.placeholder\:text-slate-400::placeholder,
input::placeholder,
textarea::placeholder { color: light-dark(#94A3B8, #64748B); }

/* Navy surfaces (sidebar, sign-in and sign-up panels, shop header) are dark in both themes: their light text stays */
[class*="navy"].text-slate-200,
[class*="navy"] .text-slate-200 { color: #E2E8F0; }
[class*="navy"].text-slate-300,
[class*="navy"] .text-slate-300 { color: #CBD5E1; }
[class*="navy"].text-slate-400,
[class*="navy"] .text-slate-400 { color: #94A3B8; }
[class*="navy"] .text-slate-500 { color: #64748B; }

/* --- Lines --------------------------------------------------------------------------------------------------------- */
.border-slate-50 { border-color: light-dark(#F8FAFC, rgb(255 255 255 / .08)); }
.border-slate-100 { border-color: light-dark(#F1F5F9, rgb(255 255 255 / .08)); }
.border-slate-200 { border-color: light-dark(#E2E8F0, rgb(255 255 255 / .08)); }
.border-slate-300 { border-color: light-dark(#CBD5E1, rgb(255 255 255 / .14)); }
.divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: light-dark(#F8FAFC, rgb(255 255 255 / .06)); }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: light-dark(#F1F5F9, rgb(255 255 255 / .06)); }

/* --- Status tints (alerts, badges, buttons): translucent fills with light text on dark ------------------------------ */
.bg-emerald-50 { background-color: light-dark(#ECFDF5, rgb(16 185 129 / .15)); }
.bg-emerald-100,
.hover\:bg-emerald-100:hover { background-color: light-dark(#D1FAE5, rgb(16 185 129 / .15)); }
.bg-amber-50 { background-color: light-dark(#FFFBEB, rgb(245 158 11 / .15)); }
.bg-amber-100 { background-color: light-dark(#FEF3C7, rgb(245 158 11 / .15)); }
.bg-red-50,
.hover\:bg-red-50:hover { background-color: light-dark(#FEF2F2, rgb(239 68 68 / .15)); }
.bg-red-100,
.hover\:bg-red-100:hover { background-color: light-dark(#FEE2E2, rgb(239 68 68 / .15)); }
.bg-sky-100 { background-color: light-dark(#E0F2FE, rgb(14 165 233 / .15)); }

.text-emerald-500 { color: light-dark(#10B981, #6EE7B7); }
.text-emerald-600 { color: light-dark(#059669, #6EE7B7); }
.text-emerald-700,
.hover\:text-emerald-700:hover { color: light-dark(#047857, #6EE7B7); }
.text-amber-500 { color: light-dark(#F59E0B, #FCD34D); }
.text-amber-600,
.hover\:text-amber-600:hover { color: light-dark(#D97706, #FCD34D); }
.text-amber-700,
.hover\:text-amber-700:hover { color: light-dark(#B45309, #FCD34D); }
.text-amber-800 { color: light-dark(#92400E, #FCD34D); }
.text-red-500,
.hover\:text-red-500:hover { color: light-dark(#EF4444, #FCA5A5); }
.text-red-600 { color: light-dark(#DC2626, #FCA5A5); }
.text-red-700 { color: light-dark(#B91C1C, #FCA5A5); }
.text-sky-700 { color: light-dark(#0369A1, #7DD3FC); }

.border-emerald-200 { border-color: light-dark(#A7F3D0, rgb(16 185 129 / .35)); }
.border-amber-200 { border-color: light-dark(#FDE68A, rgb(245 158 11 / .35)); }
.border-red-200 { border-color: light-dark(#FECACA, rgb(239 68 68 / .35)); }

/* --- Form controls without classes (native selects, date pickers): zero specificity, so classes win -------------- */
:where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea) {
    background-color: var(--surface); color: var(--ink);
}
:where(option) { background-color: var(--surface); }

/* Charts: ApexCharts' own tooltip and menu surfaces */
.apexcharts-tooltip,
.apexcharts-menu { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.apexcharts-tooltip-title { background: var(--raised) !important; border-color: var(--line) !important; }