/* Forecents theme layer.
 *
 * The templates are written in the original dark utility classes; this file
 * REINTERPRETS those classes as a light palette whenever the <html> element
 * is NOT marked data-theme="dark". Dark mode is therefore the raw templates,
 * light mode is this mapping, and the toggle just flips one attribute.
 * (A full token refactor was traded away for shipping speed — if a class
 * looks wrong in light mode, add its mapping here, not in the template.)
 *
 * Chart colors live in app.js (chartColors()) and follow the same attribute.
 */

html:not([data-theme="dark"]) {
  color-scheme: light;
}

/* ---- page + cards ------------------------------------------------------ */
html:not([data-theme="dark"]) body {
  background: #f4f6fb !important;
  color: #0f172a;
}
html:not([data-theme="dark"]) .fc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -18px rgba(15, 23, 42, .18);
}
html:not([data-theme="dark"]) .fc-card:hover { border-color: #7dd3fc; }
html:not([data-theme="dark"]) .fc-label { color: #64748b; }

/* ---- slate structure --------------------------------------------------- */
html:not([data-theme="dark"]) .bg-slate-950 { background-color: #f4f6fb !important; }
html:not([data-theme="dark"]) .bg-slate-900 { background-color: #ffffff !important; }
html:not([data-theme="dark"]) .bg-slate-900\/70 { background-color: rgba(255,255,255,.88) !important; }
html:not([data-theme="dark"]) .bg-slate-900\/60,
html:not([data-theme="dark"]) .bg-slate-900\/50,
html:not([data-theme="dark"]) .bg-slate-900\/40 { background-color: rgba(255,255,255,.75) !important; }
html:not([data-theme="dark"]) .bg-slate-950\/40,
html:not([data-theme="dark"]) .bg-slate-950\/50,
html:not([data-theme="dark"]) .bg-slate-950\/60 { background-color: #eef2f8 !important; }
html:not([data-theme="dark"]) .bg-slate-950\/80,
html:not([data-theme="dark"]) .bg-slate-950\/90 { background-color: #ffffff !important; }
html:not([data-theme="dark"]) .bg-slate-800,
html:not([data-theme="dark"]) .bg-slate-800\/80 { background-color: #e6eaf2 !important; }
html:not([data-theme="dark"]) .bg-slate-800\/30 { background-color: rgba(230,234,242,.5) !important; }
html:not([data-theme="dark"]) .bg-slate-700 { background-color: #d9dfeb !important; }
html:not([data-theme="dark"]) .bg-slate-600 { background-color: #cbd3e1 !important; }
html:not([data-theme="dark"]) .hover\:bg-slate-700:hover { background-color: #d9dfeb !important; }
html:not([data-theme="dark"]) .hover\:bg-slate-600:hover { background-color: #cbd3e1 !important; }
html:not([data-theme="dark"]) .hover\:bg-slate-800\/30:hover { background-color: rgba(230,234,242,.6) !important; }

html:not([data-theme="dark"]) .text-slate-100 { color: #0f172a !important; }
html:not([data-theme="dark"]) .text-slate-200,
html:not([data-theme="dark"]) .text-slate-300 { color: #334155 !important; }
html:not([data-theme="dark"]) .text-slate-400 { color: #475569 !important; }
html:not([data-theme="dark"]) .text-slate-500 { color: #64748b !important; }
html:not([data-theme="dark"]) .text-slate-600 { color: #8a97ab !important; }
html:not([data-theme="dark"]) .hover\:text-white:hover { color: #0f172a !important; }
html:not([data-theme="dark"]) .hover\:text-slate-300:hover { color: #0f172a !important; }
html:not([data-theme="dark"]) .hover\:text-slate-400:hover { color: #475569 !important; }

html:not([data-theme="dark"]) .border-slate-700 { border-color: #cbd5e1 !important; }
html:not([data-theme="dark"]) .border-slate-800,
html:not([data-theme="dark"]) .border-slate-800\/60 { border-color: #e2e8f0 !important; }
html:not([data-theme="dark"]) .divide-slate-800\/70 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }

/* ---- sky (brand accents, info panels) ---------------------------------- */
html:not([data-theme="dark"]) .text-sky-400,
html:not([data-theme="dark"]) .text-sky-400\/80 { color: #0284c7 !important; }
html:not([data-theme="dark"]) .text-sky-400\/50 { color: rgba(2,132,199,.55) !important; }
html:not([data-theme="dark"]) .text-sky-300 { color: #0369a1 !important; }
html:not([data-theme="dark"]) .text-sky-200 { color: #075985 !important; }
html:not([data-theme="dark"]) .hover\:text-sky-300:hover { color: #0369a1 !important; }
html:not([data-theme="dark"]) .bg-sky-950\/80 { background-color: rgba(224,242,254,.95) !important; }
html:not([data-theme="dark"]) .bg-sky-950\/40,
html:not([data-theme="dark"]) .bg-sky-950\/20,
html:not([data-theme="dark"]) .bg-sky-950\/10 { background-color: #e8f4fd !important; }
html:not([data-theme="dark"]) .bg-sky-900\/80,
html:not([data-theme="dark"]) .bg-sky-900\/60 { background-color: #bae6fd !important; }
html:not([data-theme="dark"]) .hover\:bg-sky-800:hover { background-color: #bae6fd !important; }
html:not([data-theme="dark"]) .border-sky-900\/70,
html:not([data-theme="dark"]) .border-sky-900\/50,
html:not([data-theme="dark"]) .border-sky-800,
html:not([data-theme="dark"]) .border-sky-800\/60,
html:not([data-theme="dark"]) .border-sky-800\/70,
html:not([data-theme="dark"]) .border-sky-700 { border-color: #7dd3fc !important; }

/* ---- amber (nudges, warnings) ------------------------------------------ */
html:not([data-theme="dark"]) .text-amber-100,
html:not([data-theme="dark"]) .text-amber-200,
html:not([data-theme="dark"]) .text-amber-200\/70 { color: #92400e !important; }
html:not([data-theme="dark"]) .text-amber-300,
html:not([data-theme="dark"]) .text-amber-300\/90,
html:not([data-theme="dark"]) .text-amber-300\/80,
html:not([data-theme="dark"]) .text-amber-400,
html:not([data-theme="dark"]) .text-amber-400\/80 { color: #b45309 !important; }
html:not([data-theme="dark"]) .hover\:text-amber-300:hover,
html:not([data-theme="dark"]) .hover\:text-amber-200:hover { color: #92400e !important; }
html:not([data-theme="dark"]) .bg-amber-950\/60,
html:not([data-theme="dark"]) .bg-amber-950\/40,
html:not([data-theme="dark"]) .bg-amber-950\/30,
html:not([data-theme="dark"]) .bg-amber-950\/10 { background-color: #fef6e0 !important; }
html:not([data-theme="dark"]) .hover\:bg-amber-950\/60:hover { background-color: #fdeec2 !important; }
html:not([data-theme="dark"]) .bg-amber-900\/60 { background-color: #fde68a !important; }
html:not([data-theme="dark"]) .hover\:bg-amber-900\/30:hover { background-color: rgba(253,230,138,.55) !important; }
html:not([data-theme="dark"]) .border-amber-900\/70,
html:not([data-theme="dark"]) .border-amber-900\/60,
html:not([data-theme="dark"]) .border-amber-900\/50,
html:not([data-theme="dark"]) .border-amber-900\/40,
html:not([data-theme="dark"]) .border-amber-800\/60,
html:not([data-theme="dark"]) .border-amber-700,
html:not([data-theme="dark"]) .border-amber-600\/70 { border-color: #fcd34d !important; }

/* ---- emerald (good news) ----------------------------------------------- */
html:not([data-theme="dark"]) .text-emerald-200 { color: #065f46 !important; }
html:not([data-theme="dark"]) .text-emerald-300,
html:not([data-theme="dark"]) .text-emerald-300\/90 { color: #047857 !important; }
html:not([data-theme="dark"]) .text-emerald-400,
html:not([data-theme="dark"]) .text-emerald-400\/80,
html:not([data-theme="dark"]) .text-emerald-400\/70 { color: #059669 !important; }
html:not([data-theme="dark"]) .hover\:text-emerald-300:hover { color: #047857 !important; }
html:not([data-theme="dark"]) .bg-emerald-950\/50,
html:not([data-theme="dark"]) .bg-emerald-950\/40,
html:not([data-theme="dark"]) .bg-emerald-950\/30,
html:not([data-theme="dark"]) .bg-emerald-950\/20 { background-color: #e7f8f1 !important; }
html:not([data-theme="dark"]) .bg-emerald-900\/60 { background-color: #a7f3d0 !important; }
html:not([data-theme="dark"]) .hover\:bg-emerald-900\/50:hover { background-color: rgba(167,243,208,.6) !important; }
html:not([data-theme="dark"]) .border-emerald-900\/60,
html:not([data-theme="dark"]) .border-emerald-800,
html:not([data-theme="dark"]) .border-emerald-800\/70,
html:not([data-theme="dark"]) .border-emerald-700 { border-color: #6ee7b7 !important; }

/* ---- rose (danger, errors) --------------------------------------------- */
html:not([data-theme="dark"]) .text-rose-200 { color: #9f1239 !important; }
html:not([data-theme="dark"]) .text-rose-300,
html:not([data-theme="dark"]) .text-rose-300\/80 { color: #be123c !important; }
html:not([data-theme="dark"]) .text-rose-400 { color: #e11d48 !important; }
html:not([data-theme="dark"]) .hover\:text-rose-200:hover,
html:not([data-theme="dark"]) .hover\:text-rose-300:hover,
html:not([data-theme="dark"]) .hover\:text-rose-400:hover { color: #be123c !important; }
html:not([data-theme="dark"]) .bg-rose-950\/50,
html:not([data-theme="dark"]) .bg-rose-950\/40,
html:not([data-theme="dark"]) .bg-rose-950\/30,
html:not([data-theme="dark"]) .bg-rose-950\/10 { background-color: #ffeef0 !important; }
html:not([data-theme="dark"]) .hover\:bg-rose-950\/40:hover { background-color: #ffe0e4 !important; }
html:not([data-theme="dark"]) .bg-rose-900\/60 { background-color: #fecdd3 !important; }
html:not([data-theme="dark"]) .border-rose-900\/70,
html:not([data-theme="dark"]) .border-rose-900\/60,
html:not([data-theme="dark"]) .border-rose-900\/50,
html:not([data-theme="dark"]) .border-rose-800,
html:not([data-theme="dark"]) .border-rose-700 { border-color: #fda4af !important; }

/* Solid colored buttons (sky/amber/emerald/rose 400-700 backgrounds with
 * white or slate-950 text) read correctly on both themes — no overrides. */