/* ==========================================================================
   AI-AGENTUS Theme Styles (Dark / Light Theme & Switcher)
   ========================================================================== */

/* Theme Toggle Button */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e5e5;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
    user-select: none;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 46, 0, 0.6);
    color: #FF2E00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 46, 0, 0.15);
}

.theme-toggle-btn:active {
    transform: translateY(0);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle-btn:hover svg {
    transform: rotate(20deg);
}

/* Default (Dark Mode): display Sun icon to switch to Light */
.theme-toggle-btn .icon-sun {
    display: block;
}
.theme-toggle-btn .icon-moon {
    display: none;
}

/* Light Mode Toggle Button overrides */
html.light .theme-toggle-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html.light .theme-toggle-btn:hover {
    background: #e2e8f0;
    border-color: #FF2E00;
    color: #FF2E00;
    box-shadow: 0 4px 12px rgba(255, 46, 0, 0.12);
}

html.light .theme-toggle-btn .icon-sun {
    display: none;
}
html.light .theme-toggle-btn .icon-moon {
    display: block;
}

/* ==========================================================================
   Light Mode Overrides (Applied when html has class "light")
   ========================================================================== */

html.light {
    color-scheme: light;
}

html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Background Canvas & Grid lines */
html.light .bg-canvas {
    background: #f8fafc !important;
    opacity: 0.15 !important;
}

html.light .grid-line {
    stroke: rgba(0, 0, 0, 0.05) !important;
}

/* Backgrounds replacement */
html.light .bg-black,
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/70,
html.light .bg-black\/80,
html.light .bg-black\/85,
html.light .bg-black\/90,
html.light .bg-dark,
html.light .bg-dark-900,
html.light .bg-dark-800,
html.light .bg-\[\#030303\],
html.light .bg-\[\#050505\],
html.light .bg-\[\#0a0a0a\],
html.light .bg-\[\#0F0F0F\],
html.light .bg-\[\#070707\],
html.light header.pt-36 {
    background-color: #ffffff !important;
}

html.light .bg-surface,
html.light .bg-surface\/50,
html.light .bg-slate-900,
html.light .bg-zinc-900,
html.light .bg-zinc-900\/50,
html.light .bg-gray-900 {
    background-color: #f1f5f9 !important;
}

/* Navigation bar */
html.light #main-nav,
html.light nav.fixed,
html.light header.header {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(16px) !important;
}

html.light #main-nav a.text-white,
html.light nav.fixed a.text-white,
html.light .header-container a.logo,
html.light .nav a {
    color: #0f172a !important;
}

html.light #main-nav a.text-gray-400,
html.light nav.fixed a.text-gray-400,
html.light nav.fixed a.text-zinc-400 {
    color: #475569 !important;
}

html.light #main-nav a:hover,
html.light nav.fixed a:hover,
html.light .nav a:hover {
    color: #FF2E00 !important;
}

/* Headings & general text */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
    color: #0f172a !important;
}

html.light .text-white,
html.light strong,
html.light b {
    color: #0f172a !important;
}

/* Overwrite inline text colors that were white */
html.light [style*="color: #fff"],
html.light [style*="color: #ffffff"],
html.light [style*="color: white"] {
    color: #0f172a !important;
}

/* Prevent text color overwrite inside buttons, badges and red containers */
html.light .btn-primary,
html.light .btn,
html.light .btn-primary *,
html.light .btn *,
html.light .bg-primary *,
html.light [class*="bg-primary"] .text-white,
html.light .bg-red-600 *,
html.light button[type="submit"],
html.light button[type="submit"] *,
html.light #submit-btn,
html.light #submit-btn *,
html.light .cta-button-header,
html.light .cta-button-header *,
html.light [style*="background: #dc2626"],
html.light [style*="background: #dc2626"] * {
    color: #ffffff !important;
}

html.light .text-gray-100,
html.light .text-gray-200,
html.light .text-gray-300,
html.light .text-gray-400,
html.light .text-zinc-400 {
    color: #475569 !important;
}

html.light .text-gray-500,
html.light .text-gray-600,
html.light .text-zinc-500 {
    color: #64748b !important;
}

/* Accent colors */
html.light .text-primary,
html.light .text-red-500,
html.light .text-red-600 {
    color: #FF2E00 !important;
}

/* Glass Panels & Cards */
html.light .glass,
html.light .glass-panel {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(226, 232, 240, 1) !important;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
    color: #1e293b !important;
}

html.light .glass:hover,
html.light .glass-panel:hover {
    background: #ffffff !important;
    border-color: rgba(255, 46, 0, 0.4) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

/* Details summary */
html.light details.glass-panel summary {
    color: #0f172a !important;
}

/* Borders */
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/20,
html.light .border-white\/30,
html.light .border-white,
html.light .border-zinc-800,
html.light .border-red-900\/30 {
    border-color: #e2e8f0 !important;
}

/* Badges / pills */
html.light .bg-white\/5,
html.light .bg-white\/10,
html.light .hover\:bg-white\/5:hover {
    background-color: #f1f5f9 !important;
}

/* Inputs & forms */
html.light input[type="text"],
html.light input[type="tel"],
html.light input[type="email"],
html.light textarea,
html.light select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

html.light input:focus,
html.light textarea:focus {
    border-color: #FF2E00 !important;
    box-shadow: 0 0 0 3px rgba(255, 46, 0, 0.15) !important;
    outline: none !important;
}

/* Footer */
html.light footer {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
}

html.light footer a {
    color: #475569 !important;
}

html.light footer a:hover {
    color: #FF2E00 !important;
}

/* Articles / Blog Prose */
html.light .prose {
    color: #334155 !important;
}

html.light .prose p,
html.light .prose li {
    color: #334155 !important;
}

html.light .prose strong,
html.light .prose b {
    color: #0f172a !important;
}

html.light .prose table {
    border-color: #e2e8f0 !important;
}

html.light .prose th {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

html.light .prose td {
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

html.light blockquote,
html.light blockquote.glass {
    background: #f1f5f9 !important;
    border-left: 4px solid #FF2E00 !important;
    color: #1e293b !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0.5rem !important;
}

/* Breadcrumbs */
html.light .breadcrumbs a,
html.light nav.breadcrumbs a {
    color: #64748b !important;
}

html.light .breadcrumbs a:hover,
html.light nav.breadcrumbs a:hover {
    color: #FF2E00 !important;
}

html.light .breadcrumbs span,
html.light nav.breadcrumbs span {
    color: #0f172a !important;
}

/* Fading gradients */
html.light .from-dark,
html.light .from-black {
    --tw-gradient-from: #f8fafc var(--tw-gradient-from-position) !important;
}

html.light #seo-gradient {
    background: linear-gradient(to top, #f8fafc, transparent) !important;
}

/* Cookie popup */
html.light #cookie-popup {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
}

/* Callout cards */
html.light .bg-red-900\/5 {
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

html.light .bg-green-900\/5 {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

/* Background visual effects in blog */
html.light .background-effect {
    opacity: 0.15 !important;
}