/* ==========================================================================
   Light Template Design System & Theme Engine
   Proliferates across all pages, subdomains & links
   ========================================================================== */

/* ── 1. Root Tokens for Light Theme ── */
html.light-theme,
body.light-theme {
    --bg-color: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    /* Light Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(15, 23, 42, 0.12);
    --glass-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    
    /* Steel & Straw Man Palette for Light Surface */
    --steel-color: #0284c7;
    --steel-border: rgba(2, 132, 199, 0.35);
    --steel-bg: rgba(2, 132, 199, 0.1);
    
    --straw-color: #d97706;
    --straw-border: rgba(217, 119, 6, 0.35);
    --straw-bg: rgba(217, 119, 6, 0.1);
    
    --action-color: #059669;
    --action-border: rgba(5, 150, 105, 0.35);
    --action-bg: rgba(5, 150, 105, 0.1);
    
    --region-color: #7c3aed;
    --nation-color: #2563eb;
    --state-color: #ea580c;
}

/* ── 2. Background Glow Shapes (Soft Light Aesthetics) ── */
html.light-theme .bg-shape {
    opacity: 0.35;
    filter: blur(120px);
}
html.light-theme .shape1 {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, rgba(241, 245, 249, 0) 70%);
}
html.light-theme .shape2 {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(241, 245, 249, 0) 70%);
}
html.light-theme .shape3 {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(241, 245, 249, 0) 70%);
}

/* ── 3. Header & Navigation ── */
html.light-theme .glass-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

html.light-theme .main-nav a {
    color: #475569 !important;
}
html.light-theme .main-nav a:hover,
html.light-theme .main-nav a.active {
    color: #ef4444 !important;
}
html.light-theme .main-nav a.hmm-link {
    color: #d97706 !important;
}
html.light-theme .main-nav a.hmm-link.active,
html.light-theme .main-nav a.hmm-link:hover {
    color: #b45309 !important;
}
html.light-theme .main-nav a.hub-link {
    color: #0284c7 !important;
}

/* Form Controls & Dropdowns in Nav */
html.light-theme select.glass-select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
html.light-theme select.glass-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* ── 4. Theme Toggle Button ── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0;
    font-size: 1.05rem;
    box-shadow: var(--glass-shadow);
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
}
.theme-toggle-btn:active {
    transform: translateY(0) scale(0.96);
}

/* Icon visibility */
.theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun { display: inline-block; color: #f59e0b; }

html.light-theme .theme-toggle-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
html.light-theme .theme-toggle-btn:hover {
    border-color: #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}
html.light-theme .theme-toggle-btn .icon-sun { display: none; }
html.light-theme .theme-toggle-btn .icon-moon { display: inline-block; color: #475569; }
html.light-theme .theme-toggle-btn:hover .icon-moon { color: #0284c7; }

/* ── 5. Main Index / News Aggregator Overrides ── */
html.light-theme .hero-title {
    background: linear-gradient(135deg, #0f172a 20%, #334155 70%, #ef4444 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html.light-theme .hero-subtitle {
    color: #475569 !important;
}
html.light-theme .news-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}
html.light-theme .news-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
html.light-theme .card-title {
    color: #0f172a !important;
}
html.light-theme .card-description,
html.light-theme .card-summary {
    color: #475569 !important;
}
html.light-theme .card-meta {
    color: #64748b !important;
}
html.light-theme .perspective-btn {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
}
html.light-theme .perspective-btn:hover,
html.light-theme .perspective-btn.active {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
html.light-theme .perspective-card.steel {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}
html.light-theme .perspective-card.straw {
    background: rgba(217, 119, 6, 0.08) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
}
html.light-theme .perspective-content {
    color: #1e293b !important;
}

/* Modals */
html.light-theme .modal-content,
html.light-theme .modal-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2) !important;
    color: #0f172a !important;
}
html.light-theme .modal-header h2,
html.light-theme .modal-header h3 {
    color: #0f172a !important;
}
html.light-theme .modal-body,
html.light-theme .modal-description {
    color: #475569 !important;
}
html.light-theme .glass-input,
html.light-theme .glass-textarea {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-theme .glass-input:focus,
html.light-theme .glass-textarea:focus {
    background: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ── 6. Conversation / Hmm.. Overrides ── */
html.light-theme .conv-hero h1 {
    background: linear-gradient(135deg, #0f172a 20%, #334155 60%, #b45309 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
html.light-theme .conv-hero .subtitle {
    color: #475569 !important;
}
html.light-theme .conv-kicker {
    background: rgba(217, 119, 6, 0.12) !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    color: #b45309 !important;
}

/* Stepper Navigation */
html.light-theme .stepper-bar {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .step-item {
    color: #64748b !important;
}
html.light-theme .step-item.active {
    color: #0f172a !important;
}
html.light-theme .step-num {
    background: #e2e8f0 !important;
    color: #475569 !important;
}
html.light-theme .step-item.active .step-num {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Topic Bar & Mode Toggles */
html.light-theme .topic-nav,
html.light-theme .conv-controls {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
html.light-theme .topic-btn {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
}
html.light-theme .topic-btn.active,
html.light-theme .topic-btn:hover {
    background: #ffffff !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
html.light-theme .mode-pill {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
}
html.light-theme .mode-pill.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Chat Speech Bubbles */
html.light-theme .speech-bubble {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    color: #1e293b !important;
}
html.light-theme .bubble-straw {
    border-left: 4px solid #d97706 !important;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.6), #ffffff) !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
}
html.light-theme .bubble-steel {
    border-left: 4px solid #0284c7 !important;
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.6), #ffffff) !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
}
html.light-theme .bubble-arbiter {
    border-left: 4px solid #059669 !important;
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.6), #ffffff) !important;
    border-color: rgba(5, 150, 105, 0.25) !important;
}
html.light-theme .bubble-speaker {
    color: #0f172a !important;
}
html.light-theme .bubble-text {
    color: #334155 !important;
}
html.light-theme .bubble-takeaway {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #334155 !important;
}

/* Side-by-Side Comparison */
html.light-theme .comp-col.straw-col {
    background: rgba(254, 243, 199, 0.5) !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    color: #1e293b !important;
}
html.light-theme .comp-col.steel-col {
    background: rgba(224, 242, 254, 0.5) !important;
    border: 1px solid rgba(2, 132, 199, 0.3) !important;
    color: #1e293b !important;
}

/* Mayor Spotlight & Scorecard */
html.light-theme .bv-mayor-spotlight,
html.light-theme .spotlight-card,
html.light-theme .candidate-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}
html.light-theme .scorecard-table th {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
html.light-theme .scorecard-table td {
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Representatives Directory */
html.light-theme .rep-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .rep-card:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
}
html.light-theme .rep-name {
    color: #0f172a !important;
}
html.light-theme .rep-role {
    color: #64748b !important;
}
html.light-theme .rep-detail {
    color: #334155 !important;
}
html.light-theme .filter-pill {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}
html.light-theme .filter-pill.active {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}
html.light-theme .rep-search-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-theme .rep-search-input:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Floating Dock */
html.light-theme .floating-dock {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.15) !important;
}
html.light-theme .dock-btn {
    color: #475569 !important;
}
html.light-theme .dock-btn:hover {
    color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
}

/* ── 7. Research Hub Overrides ── */
html.light-theme .rh-hero h1 {
    background: linear-gradient(120deg, #0f172a 0%, #334155 55%, #ea580c 120%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
html.light-theme .rh-hero p {
    color: #475569 !important;
}
html.light-theme .rh-pill {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}
html.light-theme .rh-pill strong {
    color: #0f172a !important;
}

html.light-theme .rh-scope {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html.light-theme .rh-scope:hover {
    border-color: rgba(15, 23, 42, 0.25) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07) !important;
}
html.light-theme .rh-scope.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, #ffffff), #ffffff) !important;
}
html.light-theme .rh-scope small {
    color: #64748b !important;
}

html.light-theme .rh-toolbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .rh-search input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-theme .rh-search input:focus {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18) !important;
}
html.light-theme .rh-chip {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}
html.light-theme .rh-chip:hover {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}
html.light-theme .rh-chip.active {
    background: rgba(234, 88, 12, 0.12) !important;
    border-color: #ea580c !important;
    color: #ea580c !important;
    font-weight: 600 !important;
}

html.light-theme .rh-card,
html.light-theme .rh-prop-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
    color: #1e293b !important;
}
html.light-theme .rh-card:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}
html.light-theme .rh-card-title {
    color: #0f172a !important;
}
html.light-theme .rh-card-title a {
    color: #0f172a !important;
}
html.light-theme .rh-card-title a:hover {
    color: #ea580c !important;
}
html.light-theme .rh-excerpt {
    color: #475569 !important;
}
html.light-theme .rh-meta {
    color: #64748b !important;
}
html.light-theme .rh-col-straw {
    background: rgba(254, 243, 199, 0.5) !important;
    border-left: 3px solid #d97706 !important;
    color: #78350f !important;
}
html.light-theme .rh-col-steel {
    background: rgba(224, 242, 254, 0.5) !important;
    border-left: 3px solid #0284c7 !important;
    color: #0c4a6e !important;
}
html.light-theme .rh-col-action {
    background: rgba(209, 250, 229, 0.5) !important;
    border-left: 3px solid #059669 !important;
    color: #064e3b !important;
}

/* ── 8. Footer ── */
html.light-theme .glass-footer {
    background: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
}
html.light-theme .footer-info p,
html.light-theme .footer-info a {
    color: #475569 !important;
}
html.light-theme .footer-contact-link,
html.light-theme .footer-gallery-link {
    color: #475569 !important;
}
html.light-theme .footer-contact-link:hover,
html.light-theme .footer-gallery-link:hover {
    color: #0f172a !important;
}

html.light-theme .footer-pill-link {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
html.light-theme .footer-pill-link:hover {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}
html.light-theme .footer-pill-link.social-link {
    color: #059669 !important;
    border-color: rgba(5, 150, 105, 0.25) !important;
    background: rgba(5, 150, 105, 0.06) !important;
}
html.light-theme .footer-pill-link.gallery-link {
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    background: rgba(37, 99, 235, 0.06) !important;
}
html.light-theme .footer-pill-link.hub-link {
    color: #0284c7 !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
    background: rgba(2, 132, 199, 0.06) !important;
}
html.light-theme .footer-pill-link.hmm-link {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
    background: rgba(217, 119, 6, 0.06) !important;
}
html.light-theme .footer-pill-link.contact-pill-btn {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    background: rgba(220, 38, 38, 0.08) !important;
}
html.light-theme .footer-pill-link.contact-pill-btn:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}
html.light-theme .contact-modal-footer {
    border-top-color: rgba(15, 23, 42, 0.1) !important;
    color: #64748b !important;
}
html.light-theme .contact-modal-footer a {
    color: #0f172a !important;
}