/* ==========================================================================
   TeloStack Global - Light & Dark Mode High-Contrast Theme System
   ========================================================================== */

/* Smooth Transition across theme switches */
html, body, header, footer, article, section, div, span, p, a, button, input, textarea {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease, box-shadow 0.2s ease;
}

/* ==========================================================================
   LIGHT MODE (Applied when <html class="light">)
   High-contrast, crystal clear, modern SaaS typography & card aesthetics
   ========================================================================== */

html.light {
    color-scheme: light;
}

html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* 1. Hide Muddy Dark Glow Orbs in Light Mode */
html.light .glow-orb {
    display: none !important;
}

/* 2. Crisp Light Grid Background */
html.light .grid-bg-pattern {
    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;
    background-color: #f8fafc !important;
}

/* 3. Header & Navigation */
html.light header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
}

html.light header nav a {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light header nav a:hover {
    color: #4f46e5 !important;
}

html.light header .text-slate-400 {
    color: #475569 !important;
}

/* 4. Deep Contrast Typography Overrides */
html.light .text-white {
    color: #0f172a !important;
}

html.light .text-slate-100 {
    color: #0f172a !important;
}

html.light .text-slate-200 {
    color: #1e293b !important;
}

html.light .text-slate-300 {
    color: #334155 !important;
}

html.light .text-slate-400 {
    color: #475569 !important;
}

html.light .text-slate-500 {
    color: #64748b !important;
}

/* High-Contrast Gradient Texts */
html.light .text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #be185d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

html.light .text-gradient-gold {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

html.light .text-gradient-emerald {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 5. Hero Dynamic Badge & Badges */
html.light .bg-indigo-950\/80,
html.light .bg-indigo-950\/50,
html.light .bg-indigo-950\/40,
html.light .bg-indigo-950\/30 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

html.light .text-indigo-300,
html.light .text-indigo-400 {
    color: #4338ca !important;
    font-weight: 700 !important;
}

html.light .border-indigo-500\/40,
html.light .border-indigo-500\/30,
html.light .border-indigo-500\/20 {
    border-color: #c7d2fe !important;
}

/* 6. Section Backgrounds & Alternating Strips */
html.light .bg-dark-950\/60,
html.light .bg-dark-950\/80,
html.light .bg-dark-950 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light .bg-dark-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02) !important;
}

html.light .gradient-dark-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
}

/* 7. Borders */
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-700,
html.light .border-slate-700\/80 {
    border-color: #e2e8f0 !important;
}

/* 8. Secondary Buttons, Pills & Tags */
html.light .bg-slate-800,
html.light .bg-slate-800\/90,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/50 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.light .bg-slate-800:hover,
html.light .bg-slate-800\/90:hover,
html.light .bg-slate-800\/80:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Primary Action Buttons stay vibrant with white text */
html.light .gradient-primary,
html.light .gradient-primary *,
html.light .btn-shine,
html.light .btn-shine * {
    color: #ffffff !important;
}

/* 9. Interactive Sandbox (Chat Simulator) in Light Mode */
html.light .gradient-glow-border {
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.08), 0 8px 10px -6px rgba(99, 102, 241, 0.04) !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* Buyer Window (Light Mode) */
html.light .bg-sky-950\/40,
html.light .bg-sky-950\/80 {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
}

html.light #demoBuyerMsg {
    color: #0369a1 !important;
    font-weight: 600 !important;
}

html.light #demoBuyerTag {
    color: #0284c7 !important;
    font-weight: 700 !important;
}

html.light #labelTransToAgent {
    color: #0284c7 !important;
    font-weight: 700 !important;
}

html.light #demoBuyerTrans {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Agent Window (Light Mode) */
html.light .bg-indigo-950\/40,
html.light .bg-indigo-950\/80 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

html.light #demoAgentMsg {
    color: #3730a3 !important;
    font-weight: 700 !important;
}

html.light #labelTransToBuyer {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}

html.light #demoAgentTrans {
    color: #334155 !important;
    font-weight: 600 !important;
}

html.light .scenario-dot.bg-slate-700 {
    background-color: #cbd5e1 !important;
}

/* 10. Pain Points Comparison Section in Light Mode */
html.light .bg-rose-500\/10 {
    background-color: #ffe4e6 !important;
    border-color: #fecdd3 !important;
}

html.light .text-rose-400 {
    color: #e11d48 !important;
}

html.light .text-rose-300\/80,
html.light .text-rose-300 {
    color: #be123c !important;
    font-weight: 500 !important;
}

html.light .bg-amber-500\/10 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}

html.light .text-amber-400 {
    color: #d97706 !important;
}

html.light .text-amber-300\/80,
html.light .text-amber-300 {
    color: #b45309 !important;
    font-weight: 500 !important;
}

html.light .bg-sky-500\/10 {
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
}

html.light .text-sky-400 {
    color: #0284c7 !important;
}

html.light .text-sky-300\/80,
html.light .text-sky-300 {
    color: #0369a1 !important;
    font-weight: 500 !important;
}

html.light .text-emerald-400,
html.light .text-emerald-300 {
    color: #047857 !important;
    font-weight: 600 !important;
}

/* 11. Feature Cards Icons in Light Mode */
html.light .bg-indigo-600\/20 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4f46e5 !important;
}

html.light .bg-emerald-600\/20 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
}

html.light .bg-sky-600\/20 {
    background-color: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
}

html.light .bg-purple-600\/20 {
    background-color: #faf5ff !important;
    border-color: #e9d5ff !important;
    color: #7c3aed !important;
}

html.light .bg-amber-600\/20 {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #d97706 !important;
}

html.light .bg-rose-600\/20 {
    background-color: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #e11d48 !important;
}

/* 12. Solution Scenario Tags in Light Mode */
html.light span[data-i18n^="sol_"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* 13. Pricing Section in Light Mode */
html.light #pricing .p-7.rounded-3xl.bg-dark-900 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
}

html.light #pricing .bg-gradient-to-b.from-indigo-950\/80 {
    background: #ffffff !important;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.15), 0 8px 10px -6px rgba(99, 102, 241, 0.08) !important;
}

html.light #pricing .text-indigo-200 {
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

html.light #pricing li {
    color: #1e293b !important;
    font-weight: 500 !important;
}

html.light #pricing li i {
    color: #059669 !important;
}

/* 14. Partner Program Banner in Light Mode */
html.light #partner .bg-gradient-to-r {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fffbeb 100%) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 30px -10px rgba(15, 23, 42, 0.08) !important;
}

html.light #partner .bg-white\/10 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

html.light #partner .bg-white\/10:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

html.light #partner .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

/* 15. FAQ Section in Light Mode */
html.light .faq-item {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

html.light .faq-question span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light .faq-answer {
    color: #334155 !important;
    border-color: #f1f5f9 !important;
    font-weight: 500 !important;
}

/* 16. Dropdown & Mobile Menus in Light Mode */
html.light #langDropdownMenu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

html.light #langDropdownMenu button {
    color: #334155 !important;
}

html.light #langDropdownMenu button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light #mobileMenu {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

html.light #mobileMenu a {
    color: #1e293b !important;
}

/* 17. Footer in Light Mode */
html.light footer {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html.light footer a {
    color: #334155 !important;
    font-weight: 600 !important;
}

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

html.light footer .border-slate-800\/80 {
    border-color: #e2e8f0 !important;
}

/* 18. Blog Pages in Light Mode */
html.light .prose-dark p,
html.light .prose-dark ul,
html.light .prose-dark li {
    color: #334155 !important;
}

html.light .prose-dark h1,
html.light .prose-dark h2 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html.light .prose-dark h3 {
    color: #1e293b !important;
    font-weight: 700 !important;
}

html.light .prose-dark strong {
    color: #0f172a !important;
}

html.light .prose-dark .bg-indigo-950\/40 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

html.light .prose-dark .bg-indigo-950\/40 p {
    color: #312e81 !important;
    font-weight: 500 !important;
}

html.light .prose-dark .bg-dark-950 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==================== 顶部官方咨询下拉在浅色模式下的美化 ==================== */
html.light #supportNavDropdown > div {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
}

html.light #supportNavDropdown a:hover {
    background-color: #f1f5f9 !important;
}