/* ================================================================
   NovZon light theme — hand-written layer.
   Loads after theme-light.generated.css (scripts/build_light_theme.py),
   so rules here win. Everything is scoped to html[data-theme="light"];
   the dark theme is untouched.

   Tailwind utilities written for the dark design (text-white,
   text-gray-*, bg-white/5, border-white/10, dark arbitrary hexes) are
   remapped to the light tokens from style.css. Text that sits on its own
   coloured, image or scrim surface keeps its light colour: those
   surfaces are listed once in the :is() below. Mark any other element
   that must stay dark with data-keep-dark.
   ================================================================ */

html[data-theme="light"] {
    --lt-ink: #111827;
    --lt-ink-2: #1f2937;
    --lt-ink-3: #374151;
    --lt-ink-4: #4b5563;
    --lt-ink-5: #5b6472;
    --lt-line: rgba(17, 24, 39, 0.1);
    --lt-line-soft: rgba(17, 24, 39, 0.07);
    --lt-line-strong: rgba(17, 24, 39, 0.16);
    --lt-hover: rgba(17, 24, 39, 0.06);
    --lt-card: #ffffff;
    --lt-bar: rgba(255, 255, 255, 0.92);
    /* style.css ships gray-400 as muted, too faint on white (2.5:1) */
    --text-muted: #6b7280;
    color-scheme: light;
}

/* ---------- text ---------- */
html[data-theme="light"] :is(.text-white, .text-gray-50, .text-gray-100, .text-gray-200, .text-zinc-100, .text-zinc-200, .text-slate-100, .text-slate-200, .text-stone-100, .text-stone-200, .text-neutral-100, .text-neutral-200):not(:is(
    [class*="bg-gradient"], [class*="bg-purple-"], [class*="bg-violet-"], [class*="bg-indigo-"],
    [class*="bg-blue-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"],
    [class*="bg-fuchsia-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"],
    [class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-amber-"], [class*="bg-orange-"],
    [class*="bg-yellow-"], [class*="bg-black"], [class*="bg-primary"], [class*="bg-accent"],
    [data-keep-dark], .btn-primary, .btn-read, .btn-login-nav
)):not(:is(
    [class*="bg-gradient"], [class*="bg-purple-"], [class*="bg-violet-"], [class*="bg-indigo-"],
    [class*="bg-blue-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"],
    [class*="bg-fuchsia-"], [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-teal-"],
    [class*="bg-cyan-"], [class*="bg-sky-"], [class*="bg-amber-"], [class*="bg-orange-"],
    [class*="bg-yellow-"], [class*="bg-black"], [class*="bg-primary"], [class*="bg-accent"],
    [data-keep-dark], .btn-primary, .btn-read, .btn-login-nav
) *) {
    color: var(--lt-ink);
}

html[data-theme="light"] :is(.text-gray-300, .text-zinc-300, .text-slate-300, .text-stone-300, .text-neutral-300):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) {
    color: var(--lt-ink-3);
}

html[data-theme="light"] :is(.text-gray-400, .text-zinc-400, .text-slate-400, .text-stone-400, .text-neutral-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) {
    color: var(--lt-ink-4);
}

html[data-theme="light"] :is(.text-gray-500, .text-zinc-500, .text-slate-500, .text-stone-500, .text-neutral-500):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) {
    color: var(--lt-ink-5);
}

html[data-theme="light"] :is(.text-white\/90, .text-white\/80, .text-white\/70):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) {
    color: var(--lt-ink-2);
}

html[data-theme="light"] :is(.text-white\/60, .text-white\/50, .text-white\/40, .text-white\/30):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) {
    color: var(--lt-ink-5);
}

/* light accent text (300/400 shades) is unreadable on white: use the 700 shade */
html[data-theme="light"] :is(.text-purple-200, .text-purple-300, .text-purple-400, .text-violet-300, .text-violet-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #6d28d9; }
html[data-theme="light"] :is(.text-indigo-300, .text-indigo-400, .text-blue-300, .text-blue-400, .text-sky-300, .text-sky-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #1d4ed8; }
html[data-theme="light"] :is(.text-cyan-300, .text-cyan-400, .text-teal-300, .text-teal-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #0f766e; }
html[data-theme="light"] :is(.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #047857; }
html[data-theme="light"] :is(.text-yellow-300, .text-yellow-400, .text-amber-300, .text-amber-400, .text-yellow-500, .text-amber-500):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #b45309; }
html[data-theme="light"] :is(.text-orange-300, .text-orange-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #c2410c; }
html[data-theme="light"] :is(.text-red-300, .text-red-400, .text-rose-300, .text-rose-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #be123c; }
html[data-theme="light"] :is(.text-pink-300, .text-pink-400, .text-fuchsia-300, .text-fuchsia-400):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #be185d; }

html[data-theme="light"] :is(.text-purple-500, .text-violet-500, .text-purple-600):not(:is([class*="bg-black"], [class*="bg-gradient"], [data-keep-dark]) *) { color: #7e22ce; }

/* home editorial tokens: accent darkened so kickers/links read on paper */
html[data-theme="light"] .nhx-experience {
    --nhx-accent: #6b4fb3;
    --nhx-accent-soft: rgba(107, 79, 179, 0.12);
}

html[data-theme="light"] :is(.hover\:text-white, .group:hover .group-hover\:text-white):hover,
html[data-theme="light"] .group:hover .group-hover\:text-white {
    color: var(--lt-ink);
}

html[data-theme="light"] :is(.placeholder-gray-500, .placeholder-gray-600)::placeholder {
    color: var(--lt-ink-5);
}

/* ---------- surfaces ---------- */
html[data-theme="light"] :is(.bg-white\/\[0\.02\], .bg-white\/\[0\.03\], .bg-white\/\[0\.04\], .bg-white\/5, .bg-gray-900, .bg-gray-900\/50, .bg-gray-800\/30, .bg-gray-800\/50, .bg-zinc-900, .bg-neutral-900):not([data-keep-dark], [data-keep-dark] *) {
    background-color: var(--lt-card);
}

html[data-theme="light"] :is(.bg-white\/10, .bg-white\/\[0\.06\], .bg-white\/\[0\.08\], .bg-gray-800, .bg-gray-700, .bg-gray-600, .bg-zinc-800, .bg-zinc-700):not([data-keep-dark], [data-keep-dark] *) {
    background-color: var(--lt-hover);
}

html[data-theme="light"] :is(.hover\:bg-white\/5, .hover\:bg-white\/10, .hover\:bg-white\/\[0\.06\], .hover\:bg-white\/\[0\.08\], .hover\:bg-white\/18):hover {
    background-color: var(--lt-hover);
}

/* dark arbitrary panels: bg-[#0..] / bg-[#1..] with or without /opacity */
html[data-theme="light"] :is([class*="bg-[#0"], [class*="bg-[#1"]):not([data-keep-dark], [data-keep-dark] *) {
    background-color: var(--lt-card);
}

html[data-theme="light"] :is(.border-white\/5, .border-white\/\[0\.06\], .border-white\/\[0\.04\]):not([data-keep-dark], [data-keep-dark] *) { border-color: var(--lt-line-soft); }
html[data-theme="light"] :is(.border-white\/10, .border-gray-800, .border-gray-700\/30, .border-gray-800\/50, .border-zinc-800):not([data-keep-dark], [data-keep-dark] *) { border-color: var(--lt-line); }
html[data-theme="light"] :is(.border-white\/15, .border-white\/20, .border-gray-700, .border-zinc-700):not([data-keep-dark], [data-keep-dark] *) { border-color: var(--lt-line-strong); }
html[data-theme="light"] :is([class*="border-[#0"], [class*="border-[#1"]):not([data-keep-dark], [data-keep-dark] *) { border-color: var(--lt-line); }
html[data-theme="light"] :is(.divide-white\/5, .divide-white\/10) > * + * { border-color: var(--lt-line-soft); }

/* ---------- global chrome: top bar, mobile tab bar, drawers ---------- */
html[data-theme="light"] .navbar,
html[data-theme="light"] .global-navbar-sticky-wrapper > nav.navbar {
    background: var(--lt-bar) !important;
    border-bottom-color: var(--lt-line);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

html[data-theme="light"] .mobile-bottom-nav:not([data-keep-dark], [data-keep-dark] *),
html[data-theme="light"] [class*="bg-[#0D0D12]"]:not([data-keep-dark], [data-keep-dark] *) {
    background-color: var(--lt-bar);
    border-top-color: var(--lt-line);
}

html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .shadow-xl {
    --tw-shadow-color: rgba(17, 24, 39, 0.12);
}

/* Inputs: many carry inline dark fills and white text from the dark design */
html[data-theme="light"] :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [data-keep-dark] *) {
    color: var(--lt-ink) !important;
}

html[data-theme="light"] :is(input, textarea, select):is([style*="rgba(0,0,0"], [style*="rgba(0, 0, 0"], [style*="background: #0"], [style*="background:#0"], [style*="background: #1"], [style*="background:#1"], [style*="rgba(255,255,255,0.0"], [style*="rgba(255, 255, 255, 0.0"]):not([data-keep-dark] *) {
    background: var(--lt-card) !important;
    border-color: var(--lt-line-strong) !important;
}

/* ---------- inline styles from the dark design ----------
   Inline color:white / dark hex fills, unless the element (or an ancestor)
   paints its own accent, gradient or image surface. */
html[data-theme="light"] :is([style*="color: white" i], [style*="color:white" i], [style*="color: #fff" i], [style*="color:#fff" i], [style*="color: rgba(255,255,255" i], [style*="color: rgba(255, 255, 255" i], [style*="color:rgba(255,255,255" i]):not([style*="gradient"], [style*="--accent"], [style*="--primary"], [style*="url"], [style*="background: #7"], [style*="background: #8"], [style*="background: #9"], [style*="background:#7"], [style*="background:#8"], [style*="background:#9"], [style*="background: rgb("]):not(:is(
    [class*="bg-gradient"], [class*="bg-purple-"], [class*="bg-violet-"], [class*="bg-indigo-"],
    [class*="bg-blue-"], [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"],
    [class*="bg-emerald-"], [class*="bg-green-"], [class*="bg-amber-"], [class*="bg-orange-"],
    [class*="bg-black"], [style*="gradient"], [style*="--accent"], [style*="url"],
    .btn-primary, .btn-read, .author-tag, [data-keep-dark]
) *):not(.author-tag, .btn-primary, .btn-read) {
    color: var(--lt-ink) !important;
}

html[data-theme="light"] :is([style*="background: #0"], [style*="background:#0"], [style*="background-color: #0"], [style*="background: #1"], [style*="background:#1"], [style*="background-color: #1"], [style*="background: rgba(15"], [style*="background: rgba(17"], [style*="background: rgba(20"], [style*="background: rgba(22"], [style*="background: rgba(255,255,255,0.0"], [style*="background: rgba(255, 255, 255, 0.0"]):not([data-keep-dark], [data-keep-dark] *) {
    background: var(--lt-card) !important;
}

html[data-theme="light"] :is([style*="border: 1px solid rgba(255,255,255"], [style*="border: 1px solid rgba(255, 255, 255"], [style*="border-color: rgba(255"]):not([data-keep-dark], [data-keep-dark] *) {
    border-color: var(--lt-line) !important;
}

/* ---------- dark islands ----------
   Anything marked data-keep-dark (home hero and brand showcases, ZON Market
   "Göksel Arşiv", dark reader themes) is skipped by every rule above and by
   the generated layer. */
html[data-theme="light"] [data-keep-dark]:not(body) {
    /* style.css dark tokens, so token-based children stay dark too (the
       reader body carries its own reader-theme tokens) */
    --bg-body: #0f1115;
    --bg-main: #0f1115;
    --bg-card: #16181d;
    --bg-overlay: rgba(22, 24, 29, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(17, 24, 39, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --glass-inner-bg: rgba(31, 41, 55, 0.5);
    --glass-inner-border: rgba(255, 255, 255, 0.05);
    --text-main: #ffffff;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --accent: #8b5cf6;
    --accent-hover: #7c3aed;
    --accent-glow: rgba(139, 92, 246, 0.4);
    color-scheme: dark;
}

/* islands that rely on the dark body behind them */
html[data-theme="light"] .profile-wrapper[data-keep-dark] {
    /* profile.html's own [data-theme="dark"] tokens */
    --bg-dark: #0f1115;
    --card-bg: #16181d;
    --glass-bg: rgba(22, 24, 29, 0.95);
    --text-muted: #94a3b8;
    background-color: #0f1115;
    color: #ffffff;
}

/* Brand showcases on the home page (AniZon, ComiZon, OriZon, ZonNews) keep
   their own dark identity: restore the dark editorial tokens inside them. */
html[data-theme="light"] .nhx-eco-section {
    --nhx-canvas: #000000;
    --nhx-canvas-soft: #000000;
    --nhx-surface: #000000;
    --nhx-surface-solid: #000000;
    --nhx-ink: #f4f1eb;
    --nhx-muted: rgba(233, 230, 223, 0.64);
    --nhx-faint: rgba(233, 230, 223, 0.38);
    --nhx-line: rgba(255, 255, 255, 0.11);
    --nhx-line-strong: rgba(255, 255, 255, 0.2);
    --nhx-accent: #9478cf;
    --nhx-accent-soft: rgba(148, 120, 207, 0.22);
    --nhx-paper: #d9d2c5;
    background: #000000;
    color: #f4f1eb;
    color-scheme: dark;
}

/* ---------- novel detail ---------- */
html[data-theme="light"] .novel-detail-banner .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, rgba(243, 244, 246, 0), rgba(243, 244, 246, 0.6) 50%, var(--bg-main));
}

/* category/series chips carry inline color:white from the dark design */
html[data-theme="light"] .meta-tags .meta-tag:not(.author-tag) {
    color: var(--lt-ink-2) !important;
}

/* the author chip keeps its accent fill: its inline color:white stays */
html[data-theme="light"] .meta-tags .meta-tag.author-tag {
    color: #ffffff !important;
}

html[data-theme="light"] .meta-tags .meta-tag.series-tag {
    color: #6d28d9 !important;
}

html[data-theme="light"] .meta-tags .rating-widget-container {
    color: #b45309 !important;
}

/* the home hero inherited its white text from the dark .home-page */
html[data-theme="light"] .hero-section[data-keep-dark] {
    color: #ffffff;
}

/* Solid accent buttons and chips (bg-purple-600 text-white ...) keep white
   text even where a generated page rule recoloured their links. */
html[data-theme="light"] .text-white:is([class*="bg-purple-5"], [class*="bg-purple-6"], [class*="bg-purple-7"], [class*="bg-violet-5"], [class*="bg-violet-6"], [class*="bg-indigo-5"], [class*="bg-indigo-6"], [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-red-5"], [class*="bg-red-6"], [class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-pink-5"], [class*="bg-pink-6"], [class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-gradient"]),
html[data-theme="light"] .text-white:is([class*="bg-purple-5"], [class*="bg-purple-6"], [class*="bg-purple-7"], [class*="bg-violet-5"], [class*="bg-violet-6"], [class*="bg-indigo-5"], [class*="bg-indigo-6"], [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-red-5"], [class*="bg-red-6"], [class*="bg-rose-5"], [class*="bg-rose-6"], [class*="bg-pink-5"], [class*="bg-pink-6"], [class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-gradient"]) :is(i, svg, span) {
    color: #ffffff !important;
}