/* ============================================================
   Light theme — opt-in via the sun/moon button in the footer
   (footer.js). The site is authored dark; this file only
   re-colours it when <html data-theme="light"> is set. The
   attribute is set before first paint by a one-line script in
   every page's <head>, so a light visitor never sees a dark flash.

   Every rule is prefixed with html[data-theme="light"], which
   outranks both the prebuilt Tailwind utilities and the pages'
   own <style> blocks without !important.

   Adding a new colour class or a new page-level style that
   hard-codes a dark colour? Give it a light counterpart here.
============================================================ */

html[data-theme="light"] {
    color-scheme: light;
    --primary: #0d9488;    /* teal-600: teal-400 is unreadable on white */
    --secondary: #d97706;  /* amber-600 */
}

html[data-theme="light"] body { background-color: #f4f7fb; color: #0f172a; }

html[data-theme="light"] .mesh-bg {
    background:
        radial-gradient(60rem 60rem at 15% -10%, rgba(45,212,191,0.16), transparent 60%),
        radial-gradient(50rem 50rem at 100% 10%, rgba(245,158,11,0.12), transparent 55%);
}

html[data-theme="light"] .glass {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(15, 23, 42, 0.09);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .nav-scrolled { box-shadow: 0 8px 30px -14px rgba(15,23,42,0.25); }
html[data-theme="light"] .lift:hover { box-shadow: 0 18px 40px -22px rgba(13,148,136,0.45); }

/* ---- Tailwind utilities: text ------------------------------- */
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 { color: #0f172a; }
html[data-theme="light"] .text-slate-300 { color: #1e293b; }
html[data-theme="light"] .text-slate-400 { color: #475569; }
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-600 { color: #64748b; }
html[data-theme="light"] .text-slate-700 { color: #cbd5e1; }   /* used for the "·" separators */
/* text-slate-900 stays: it is the dark label on teal buttons */
html[data-theme="light"] .text-white:not([class*="bg-"]),
html[data-theme="light"] .hover\:text-white:hover { color: #0f172a; }

html[data-theme="light"] .text-teal-200 { color: #115e59; }
html[data-theme="light"] .text-teal-300 { color: #0f766e; }
html[data-theme="light"] .text-teal-400,
html[data-theme="light"] .hover\:text-teal-400:hover { color: #0d9488; }
html[data-theme="light"] .text-teal-400\/70 { color: rgba(13,148,136,0.75); }
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-amber-400\/90 { color: #d97706; }
html[data-theme="light"] .text-amber-500 { color: #b45309; }
html[data-theme="light"] .text-orange-400 { color: #ea580c; }
html[data-theme="light"] .text-rose-300 { color: #e11d48; }
html[data-theme="light"] .text-rose-500 { color: #be123c; }

/* ---- Tailwind utilities: backgrounds & borders --------------- */
html[data-theme="light"] .bg-slate-800 { background-color: #e2e8f0; }
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(226,232,240,0.6); }
html[data-theme="light"] .bg-slate-900\/60 { background-color: rgba(255,255,255,0.85); }
html[data-theme="light"] .bg-slate-900\/40 { background-color: rgba(241,245,249,0.8); }
html[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(15,23,42,0.45); }  /* modal backdrop */
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #cbd5e1; }
html[data-theme="light"] .bg-teal-500\/15 { background-color: rgba(20,184,166,0.13); }

html[data-theme="light"] .border-slate-700 { border-color: #cbd5e1; }
html[data-theme="light"] .border-slate-700\/50 { border-color: rgba(203,213,225,0.7); }
html[data-theme="light"] .border-slate-800 { border-color: #e2e8f0; }

/* ---- shared page-level styles ------------------------------- */
html[data-theme="light"] .active-tab { background-color: #e2e8f0 !important; }
html[data-theme="light"] mark { background: rgba(20,184,166,0.22); color: #0f766e; }
html[data-theme="light"] select { background-color: #ffffff; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f4f7fb; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-color: #f4f7fb; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* prose pages (impressum, datenschutz, konzept, alltag) */
html[data-theme="light"] .lead,
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose ul,
html[data-theme="light"] .prose li { color: #334155; }
html[data-theme="light"] .lead strong,
html[data-theme="light"] .prose strong,
html[data-theme="light"] .prose h2,
html[data-theme="light"] h2.sec { color: #0f172a; }
html[data-theme="light"] .prose code { background: rgba(20,184,166,0.12); color: #0f766e; }

/* alltag.htm */
html[data-theme="light"] .phrase { border-bottom-color: rgba(15,23,42,0.07); }
html[data-theme="light"] .phrase .u { color: #0f766e; }
html[data-theme="light"] .phrase .d { color: #475569; }

/* konzept.htm */
html[data-theme="light"] .itable th,
html[data-theme="light"] .itable td { border-bottom-color: rgba(15,23,42,0.08); }
html[data-theme="light"] .itable thead th { color: #64748b; }
html[data-theme="light"] .itable td.num,
html[data-theme="light"] .itable td.pct { color: #0f766e; }
html[data-theme="light"] .itable td.inf { color: #b45309; }
html[data-theme="light"] .itable tr.sum td { border-top-color: rgba(15,23,42,0.2); color: #0f172a; }
html[data-theme="light"] .itable tr.sum td.num,
html[data-theme="light"] .itable tr.sum td.inf { color: #b45309; }

/* videos.htm (the lightbox stays dark on purpose: it frames a video) */
html[data-theme="light"] .vcard,
html[data-theme="light"] .vskel { background: rgba(255,255,255,0.85); border-color: rgba(15,23,42,0.09); }
html[data-theme="light"] .vthumb { background: #e2e8f0; }
html[data-theme="light"] .vtitle { color: #1e293b; }
html[data-theme="light"] .vchip { color: #334155; background: rgba(255,255,255,0.85); border-color: rgba(15,23,42,0.1); }
html[data-theme="light"] .vchip:hover,
html[data-theme="light"] .vchip.on { color: #0f766e; }
html[data-theme="light"] .vchip.on .n { color: #0d9488; }
html[data-theme="light"] .vsec-h { color: #0f172a; }
html[data-theme="light"] .vsearch { background: rgba(255,255,255,0.9); border-color: rgba(15,23,42,0.12); color: #0f172a; }
html[data-theme="light"] .vskel .sk-thumb::after,
html[data-theme="light"] .vskel .sk-line {
    background: linear-gradient(100deg, rgba(100,116,139,0.08) 40%, rgba(100,116,139,0.18) 50%, rgba(100,116,139,0.08) 60%);
    background-size: 200% 100%;
}