/* ============================================
   AIVIRAL — TOGGLE SWITCH (ТУМБЛЕР)
   ============================================ */

.aiviral-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.aiviral-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.toggle-track {
    width: 48px;
    height: 26px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #71717a;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    color: #fff;
}

.toggle-icon-moon { display: none; line-height: 1; }
.toggle-icon-sun  { display: block; line-height: 1; }

/* Checked = light mode: thumb slides right */
.aiviral-toggle input:checked + .toggle-track {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.5);
}
.aiviral-toggle input:checked + .toggle-track .toggle-thumb {
    transform: translateX(22px);
    background: #8b5cf6;
}
.aiviral-toggle input:checked + .toggle-track .toggle-icon-sun  { display: none; }
.aiviral-toggle input:checked + .toggle-track .toggle-icon-moon { display: block; }

/* ============================================
   AIVIRAL — LIGHT THEME
   ============================================ */

html.light body {
    background-color: #f0f0f8 !important;
    color: #18181b !important;
}

/* Grid pattern */
html.light .bg-grid {
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}

/* Ambient glow blobs */
html.light .rounded-full.blur-\[180px\],
html.light .rounded-full.blur-\[150px\] {
    opacity: 0.04 !important;
}

/* Navbar */
html.light #navbar,
html.light nav {
    background-color: rgba(240, 240, 248, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Cards */
html.light .bg-brand-card {
    background-color: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}

/* ---- Text Colors ---- */
html.light .text-white            { color: #09090b !important; }
html.light .text-zinc-300         { color: #3f3f46 !important; }
html.light .text-zinc-400         { color: #52525b !important; }
html.light .text-zinc-500         { color: #71717a !important; }
html.light .text-zinc-600         { color: #52525b !important; }
html.light .text-zinc-700         { color: #3f3f46 !important; }

/* ---- Borders ---- */
html.light .border-white\/5       { border-color: rgba(0,0,0,0.07) !important; }
html.light .border-white\/10      { border-color: rgba(0,0,0,0.10) !important; }
html.light .border-white\/30      { border-color: rgba(0,0,0,0.22) !important; }
html.light .border-brand-border,
html.light [class*="border-brand-border"] { border-color: rgba(0,0,0,0.10) !important; }

/* ---- Backgrounds ---- */
html.light .bg-white\/5           { background-color: rgba(0,0,0,0.05) !important; }
html.light .bg-white\/\[0\.01\]   { background-color: rgba(0,0,0,0.01) !important; }
html.light .bg-zinc-900           { background-color: #e4e4ee !important; }
html.light .bg-zinc-900\/50       { background-color: rgba(228,228,238,0.65) !important; }

/* Fixed: # must be escaped as \# inside arbitrary value selectors */
html.light .bg-\[\#050505\]       { background-color: #f0f0f8 !important; }
html.light .bg-\[\#0a0a0c\]       { background-color: #ffffff !important; }

html.light footer                 { background-color: #e8e8f2 !important; }

/* Gradient separator lines */
html.light [class*="via-white/10"] {
    --tw-gradient-via: rgba(0,0,0,0.08) !important;
}

/* ---- Inputs ---- */
html.light textarea,
html.light input[type="text"] {
    color: #18181b !important;
}
html.light textarea::placeholder,
html.light input::placeholder {
    color: #a1a1aa !important;
}

/* ---- Prose (legal pages) ---- */
html.light .prose p      { color: #52525b !important; }
html.light .prose ul     { color: #52525b !important; }
html.light .prose h2     { color: #09090b !important; }
html.light .prose a      { color: #8b5cf6 !important; }
html.light .prose strong { color: #18181b !important; }

/* ---- Toggle in light mode ---- */
html.light .toggle-track {
    background: rgba(0,0,0,0.07);
    border-color: rgba(0,0,0,0.15);
}
html.light .toggle-thumb {
    background: #a1a1aa;
}
html.light .aiviral-toggle input:checked + .toggle-track {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.5);
}
html.light .aiviral-toggle input:checked + .toggle-track .toggle-thumb {
    background: #8b5cf6;
}

/* ---- Social icons in light mode ---- */
html.light .social-icon-yt:hover {
    background: rgba(200, 0, 0, 0.18) !important;
    box-shadow: 0 0 12px rgba(200, 0, 0, 0.15) !important;
    color: #c00000 !important;
}
html.light .social-icon-ig:hover {
    color: #fff !important;
}
html.light .social-icon-tt:hover {
    color: #fff !important;
}