/**
 * skylark-theme-final.css — Final cascade authority.
 * Owns: forcing ALL legacy CSS variables to canonical --sk-* tokens, plus
 *       direct element overrides that beat inline styles.
 * Does NOT own: canonical token definitions (those live in skylark-theme.css).
 *
 * Load order: skylark-theme.css → page inline <style> → [this file] (LAST)
 * This file MUST be the last <link> in <head> on every page.
 *
 * Root cause this solves: previous versions only aliased 23 of ~85 CSS
 * variables actually used across the 37 HTML pages. The other 62+ variables
 * (--yellow, --orange, admin's --bg/--text namespace, --bg-surface, --error,
 * --font-*, etc.) were invisible to the theme system. Additionally, 610+
 * hardcoded hex colors in inline style="" attributes were never overridden.
 * This file fixes both: complete variable aliasing + direct element selectors.
 */

/* ══════════════════════════════════════════════════════════════════════════════
 * STANDARD THEME — Complete legacy variable aliasing
 * ══════════════════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="standard"] {
  /* ── Backgrounds ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-card-hover:    var(--sk-bg-hover) !important;
  --bg-input:         var(--sk-bg-surface) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg:               var(--sk-bg-primary) !important;

  /* ── Accent / Gold ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --gold-light:       rgba(245, 184, 46, 0.18) !important;
  --gold2:            var(--sk-gold) !important;
  --yellow:           var(--sk-gold) !important;
  --amber:            var(--sk-amber) !important;
  --orange:           #f97316 !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --border-gold:      var(--sk-border-gold) !important;
  --border-accent:    var(--sk-border-gold) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --blue:             var(--sk-blue-soft) !important;
  --purple:           var(--sk-purple-soft) !important;
  --red:              var(--sk-stop) !important;
  --green:            #30d158 !important;
  --go:               var(--sk-go) !important;
  --caution:          var(--sk-caution) !important;
  --stop:             var(--sk-stop) !important;
  --error:            var(--sk-stop) !important;
  --teal:             #14b8a6 !important;
  --copper:           #d97706 !important;
  --pink:             #ec4899 !important;
  --neon:             #39ff14 !important;
  --accent2:          var(--sk-blue-soft) !important;

  /* ── Typography ── */
  --font-display:     'Space Grotesk', -apple-system, sans-serif !important;
  --font-body:        'Space Grotesk', -apple-system, sans-serif !important;
  --font-mono:        'DM Mono', 'Courier New', monospace !important;
  --sans:             'Space Grotesk', -apple-system, sans-serif !important;
  --mono:             'DM Mono', 'Courier New', monospace !important;

  /* ── Chart-specific semantic colors (untouched by theme for data integrity) ── */
  --overlay-color:    rgba(14, 165, 255, 0.08) !important;
  --spread-color:     var(--sk-gold) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * INSTITUTIONAL THEME — Complete legacy variable aliasing (deep navy + gold)
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="institutional"] {
  /* ── Backgrounds (deep navy) ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-card-hover:    var(--sk-bg-hover) !important;
  --bg-input:         var(--sk-bg-surface) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg:               var(--sk-bg-primary) !important;

  /* ── Accent / Gold ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --gold-light:       rgba(245, 184, 46, 0.22) !important;
  --gold2:            var(--sk-gold) !important;
  --yellow:           var(--sk-gold) !important;
  --amber:            var(--sk-amber) !important;
  --orange:           #d89b22 !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --border-gold:      var(--sk-border-gold) !important;
  --border-accent:    var(--sk-border-gold) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --blue:             var(--sk-blue-soft) !important;
  --red:              var(--sk-stop) !important;
  --green:            #30d158 !important;
  --go:               var(--sk-go) !important;
  --caution:          var(--sk-caution) !important;
  --stop:             var(--sk-stop) !important;
  --error:            var(--sk-stop) !important;
  --teal:             #0ea5ff !important;
  --accent2:          var(--sk-blue) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * ADMIN THEME — Complete legacy variable aliasing
 * Bridges the admin --bg/--text namespace into --sk-* tokens
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] {
  /* ── Backgrounds ── */
  --bg-deep:          var(--sk-bg-primary) !important;
  --bg-card:          var(--sk-bg-card) !important;
  --bg-elevated:      var(--sk-bg-elevated) !important;
  --bg-hover:         var(--sk-bg-hover) !important;
  --bg:               var(--sk-bg-primary) !important;
  --bg2:              var(--sk-bg-card) !important;
  --bg3:              var(--sk-bg-elevated) !important;
  --bg-surface:       var(--sk-bg-surface) !important;
  --bg-input:         var(--sk-bg-surface) !important;

  /* ── Accent (admin purple) ── */
  --accent:           var(--sk-accent) !important;
  --accent-dim:       var(--sk-accent-dim) !important;
  --accent-glow:      var(--sk-accent-glow) !important;
  --accent2:          #6366f1 !important;
  --gold:             var(--sk-gold) !important;
  --gold-dim:         var(--sk-gold-dim) !important;
  --gold-glow:        var(--sk-gold-glow) !important;
  --yellow:           #f59e0b !important;

  /* ── Text ── */
  --text-primary:     var(--sk-text-primary) !important;
  --text-secondary:   var(--sk-text-secondary) !important;
  --text-muted:       var(--sk-text-muted) !important;
  --text:             var(--sk-text-primary) !important;
  --text2:            var(--sk-text-secondary) !important;
  --text3:            var(--sk-text-muted) !important;

  /* ── Borders ── */
  --border:           var(--sk-border) !important;
  --grid-line:        var(--sk-grid-line) !important;

  /* ── Semantic colors ── */
  --red:              #ef4444 !important;
  --green:            #22c55e !important;
  --blue:             var(--sk-blue-soft) !important;
  --orange:           #f97316 !important;
  --error:            #ef4444 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * GLOBAL ELEMENT OVERRIDES — Force theme on all elements
 * These use !important to beat inline <style> blocks and style="" attributes
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── Body / HTML — the base canvas ── */
html, body {
  background: var(--sk-bg-primary) !important;
  color: var(--sk-text-primary) !important;
}

/* ── Standard body gets subtle depth ── */
html[data-theme="standard"] body {
  background: #05070c !important;
}

/* ── Institutional body gets deep navy ── */
html[data-theme="institutional"],
html[data-theme="institutional"] body {
  background: #030914 !important;
  color: #f0f4fc !important;
}

/* ── Admin body ── */
html[data-theme="admin"] body {
  background: #06060e !important;
}

/* ── Navigation (all themes) ── */
nav,
#sky-nav,
.navbar,
.nav-bar {
  background: rgba(5, 7, 12, 0.92) !important;
  border-bottom: 1px solid var(--sk-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html[data-theme="institutional"] nav,
html[data-theme="institutional"] #sky-nav {
  background: rgba(3, 9, 20, 0.95) !important;
  border-bottom-color: rgba(245, 184, 46, 0.12) !important;
}

/* ── Logo ── */
.logo,
.sky-nav-logo {
  color: var(--sk-text-primary) !important;
}
html[data-theme="institutional"] .logo,
html[data-theme="institutional"] .sky-nav-logo {
  color: var(--sk-gold) !important;
}

/* ── Nav links ── */
.nav-link {
  color: var(--sk-text-muted) !important;
  border-color: var(--sk-border) !important;
}
.nav-link:hover {
  color: var(--sk-text-primary) !important;
  border-color: var(--sk-text-muted) !important;
}
.nav-link.accent {
  color: var(--sk-gold) !important;
  border-color: var(--sk-accent-dim) !important;
}
.nav-link.accent:hover {
  background: var(--sk-accent-dim) !important;
  border-color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * HOMEPAGE HERO — Cyan highlights per mockup
 * The mockup shows "liquidity cycles" highlighted in cyan, not gold.
 * This is the most visible change and makes the theme transformation obvious.
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="standard"] .hero-eyebrow {
  color: #00e5ff !important;
}
html[data-theme="standard"] .hero-eyebrow::before {
  background: linear-gradient(90deg, #00e5ff, var(--sk-gold)) !important;
}
html[data-theme="standard"] .hero h1 .highlight {
  color: #00e5ff !important;
}

/* Hero glow orbs — blue/cyan cool tone */
html[data-theme="standard"] .glow-orb {
  background: radial-gradient(circle, rgba(14, 165, 255, 0.12) 0%, transparent 70%) !important;
}
html[data-theme="standard"] .glow-orb-1 {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, transparent 70%) !important;
}

/* ── Stat values ── */
.stat-value,
.nowcast-stat-value {
  color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * ALL CARDS — Force theme backgrounds globally
 * These selectors cover every card variant found across all 37 pages.
 * Uses !important to beat inline <style> block definitions.
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-card,
.chart-wrapper,
.value-card,
.timeline-item,
.trust-item,
.indicator-card,
.plan-card,
.chart-card,
.info-card,
.data-card,
.module-card,
.analysis-card,
.access-card,
.scatter-card,
.gbc-card,
.gfc-card,
.flp-card,
.bmi-card,
.report-section,
.metric-box,
.intel-card,
.sk-card {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}

/* Card hover states */
.nowcast-card:hover,
.indicator-card:hover,
.plan-card:hover,
.timeline-item:hover,
.trust-item:hover,
.chart-card:hover,
.info-card:hover,
.data-card:hover,
.intel-card:hover {
  border-color: rgba(245, 184, 46, 0.20) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Card accent top lines — gold gradient */
.nowcast-card::before,
.indicator-card::before,
.chart-card::before {
  background: linear-gradient(90deg, var(--sk-gold) 0%, rgba(14, 165, 255, 0.3) 50%, transparent 100%) !important;
}

/* Featured cards */
.value-card.featured,
.plan-card.featured {
  border-color: rgba(245, 184, 46, 0.25) !important;
}
.value-card.featured::before,
.plan-card.featured::before {
  background: linear-gradient(90deg, var(--sk-gold) 0%, var(--sk-blue-soft) 50%, var(--sk-purple-soft) 100%) !important;
}

/* ── Admin card overrides ── */
html[data-theme="admin"] .card,
html[data-theme="admin"] .stat-card,
html[data-theme="admin"] .modal {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}
html[data-theme="admin"] .card:hover {
  border-color: rgba(167, 139, 250, 0.22) !important;
}
html[data-theme="admin"] .snippet-block {
  background: var(--sk-bg-elevated) !important;
  border-color: var(--sk-border) !important;
}
html[data-theme="admin"] header h1,
html[data-theme="admin"] .stat-value,
html[data-theme="admin"] .modal h2 {
  color: var(--sk-text-primary) !important;
}
html[data-theme="admin"] .stat-label,
html[data-theme="admin"] .form-label,
html[data-theme="admin"] .section-title {
  color: var(--sk-text-muted) !important;
}
html[data-theme="admin"] .form-input,
html[data-theme="admin"] .form-textarea,
html[data-theme="admin"] .form-select {
  background: var(--sk-bg-elevated) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BUTTONS — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.plan-btn.primary,
.sk-btn,
.sk-btn-primary {
  background: var(--sk-gold) !important;
  color: #030914 !important;
}
.btn-primary:hover,
.plan-btn.primary:hover,
.sk-btn:hover,
.sk-btn-primary:hover {
  background: #ffc940 !important;
  color: #030914 !important;
}

/* Outline / secondary buttons */
.btn-outline,
.sk-btn-outline,
.plan-btn.secondary {
  border-color: var(--sk-border) !important;
  color: var(--sk-text-secondary) !important;
}

/* Export / action buttons */
.btn-export,
.access-btn {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}
.btn-export:hover,
.access-btn:hover {
  background: rgba(245, 184, 46, 0.18) !important;
  border-color: rgba(245, 184, 46, 0.45) !important;
}

/* Admin btn-primary uses purple gradient */
html[data-theme="admin"] .btn-primary {
  background: linear-gradient(135deg, var(--sk-accent), #6366f1) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * FORM INPUTS — Force theme on all input elements
 * ══════════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  background: var(--sk-bg-surface) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-text-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(245, 184, 46, 0.40) !important;
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.10) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * EYEBROW / SECTION LABELS — Force theme colors
 * These are used on almost every page and are highly visible.
 * ══════════════════════════════════════════════════════════════════════════════ */

.value-eyebrow,
.trust-eyebrow,
.pricing-eyebrow,
.sk-eyebrow {
  color: var(--sk-gold) !important;
}
.value-eyebrow::before,
.trust-eyebrow::before,
.pricing-eyebrow::before,
.sk-eyebrow::before {
  background: var(--sk-gold) !important;
}

/* Section labels get gold treatment */
.section-label,
.sk-section-label {
  color: var(--sk-text-muted) !important;
}
.section-label::after,
.sk-section-label::after {
  background: var(--sk-border) !important;
}

/* Tier labels */
.value-tier-label.premium,
.plan-label.premium,
.indicator-card-label {
  color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TEXT COLOR OVERRIDES — Force theme on common text elements
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-label,
.stat-label,
.timeline-date,
.timeline-signal,
.trust-label,
.value-tier-label,
.plan-label,
.hero-inst-note,
.timestamp-meta,
.nowcast-stat-label {
  color: var(--sk-text-muted) !important;
}

.nowcast-note,
.value-item,
.timeline-note,
.hero-sub,
.plan-features li,
.indicator-card-description,
.btn-secondary-link,
.page-subtitle {
  color: var(--sk-text-secondary) !important;
}

.trust-value,
.plan-price {
  color: var(--sk-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TAB NAVIGATION — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.tab-nav {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: var(--sk-border) !important;
}
.tab-btn {
  color: var(--sk-text-secondary) !important;
}
.tab-btn:hover {
  color: var(--sk-text-primary) !important;
}
.tab-btn.active {
  background: var(--sk-accent-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * LOADING STATES / SPINNERS — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.loading-spinner,
.spinner {
  border-color: var(--sk-border) !important;
  border-top-color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BADGES — Force theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.inst-badge {
  color: var(--sk-gold) !important;
  background: var(--sk-gold-dim) !important;
  border-color: rgba(245, 184, 46, 0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * TABLE OVERRIDES
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] .sub-table th {
  color: var(--sk-text-muted) !important;
  border-bottom-color: var(--sk-border) !important;
}
html[data-theme="admin"] .sub-table td {
  color: var(--sk-text-secondary) !important;
  border-bottom-color: var(--sk-border-soft, rgba(255,255,255,0.04)) !important;
}
html[data-theme="admin"] .tabs {
  border-bottom-color: var(--sk-border) !important;
}
html[data-theme="admin"] .tab {
  color: var(--sk-text-muted) !important;
}
html[data-theme="admin"] .tab.active {
  color: var(--sk-accent) !important;
  border-bottom-color: var(--sk-accent) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * PLAN DEAL BADGE
 * ══════════════════════════════════════════════════════════════════════════════ */

.plan-deal {
  color: var(--sk-blue-soft) !important;
  background: rgba(124, 147, 238, 0.1) !important;
  border-color: rgba(124, 147, 238, 0.2) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BORDER OVERRIDES — Force all visible borders to theme colors
 * ══════════════════════════════════════════════════════════════════════════════ */

.stats-bar {
  border-color: var(--sk-border) !important;
}

/* Chart header bar */
.chart-header-bar {
  border-bottom-color: var(--sk-border) !important;
}
.chart-header-bar a {
  color: var(--sk-gold) !important;
  border-color: var(--sk-accent-dim) !important;
}
.chart-header-bar a:hover {
  background: var(--sk-accent-dim) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * INSTITUTIONAL DASHBOARD — Deep navy + gold card treatment
 * ══════════════════════════════════════════════════════════════════════════════ */

/* Page shell */
html[data-theme="institutional"] .page {
  background: transparent !important;
}

/* Page header elements */
html[data-theme="institutional"] .page-eyebrow {
  color: var(--sk-gold) !important;
}
html[data-theme="institutional"] .page-eyebrow::before {
  background: var(--sk-gold) !important;
}

html[data-theme="institutional"] .page-title {
  background: linear-gradient(135deg, #f0f4fc 0%, var(--sk-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html[data-theme="institutional"] .page-subtitle {
  color: var(--sk-text-secondary) !important;
}

/* Institutional badge */
html[data-theme="institutional"] .inst-badge {
  color: var(--sk-gold) !important;
  background: var(--sk-gold-dim) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* Section labels — gold on institutional */
html[data-theme="institutional"] .section-label {
  color: var(--sk-gold) !important;
}
html[data-theme="institutional"] .section-label::after {
  background: rgba(245, 184, 46, 0.15) !important;
}

/* ── Dash cards grid ───────────────────────────── */
html[data-theme="institutional"] .dash-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(14, 165, 255, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(7, 24, 45, 0.96), rgba(3, 9, 20, 0.98)) !important;
  border: 1px solid rgba(245, 184, 46, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 36px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="institutional"] .dash-card:hover {
  border-color: rgba(245, 184, 46, 0.50) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px rgba(14, 165, 255, 0.12), 0 0 0 1px rgba(245, 184, 46, 0.15) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="institutional"] .dash-card::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(245, 184, 46, 0.9), rgba(14, 165, 255, 0.35), transparent) !important;
}

html[data-theme="institutional"] .dash-card-icon {
  color: var(--sk-blue) !important;
  filter: drop-shadow(0 0 8px rgba(14, 165, 255, 0.3)) !important;
}

html[data-theme="institutional"] .dash-card-title {
  color: var(--sk-text-primary) !important;
}

html[data-theme="institutional"] .dash-card-desc {
  color: var(--sk-text-secondary) !important;
}

/* ── Light mode institutional card text overrides ─────────────────────────── */
html[data-theme="institutional"][data-color-mode="light"] .dash-card-title {
  color: var(--sk-text-primary) !important;
}

html[data-theme="institutional"][data-color-mode="light"] .dash-card-desc {
  color: var(--sk-text-secondary) !important;
}

html[data-theme="institutional"][data-color-mode="light"] .dash-card-icon {
  opacity: 0.95 !important;
}

/* ── Highlight cards (top 3) ── */
html[data-theme="institutional"] .highlight-card {
  background:
    radial-gradient(circle at 30% 0%, rgba(14, 165, 255, 0.08), transparent 40%),
    linear-gradient(180deg, var(--sk-bg-card), var(--sk-bg-primary)) !important;
  border-color: rgba(245, 184, 46, 0.24) !important;
}

html[data-theme="institutional"] .highlight-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

html[data-theme="institutional"] .highlight-card:hover {
  border-color: rgba(245, 184, 46, 0.45) !important;
  box-shadow: 0 8px 32px rgba(14, 165, 255, 0.10) !important;
}

/* ── Access card ── */
html[data-theme="institutional"] .access-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(14, 165, 255, 0.08), transparent 50%),
    var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] .access-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

/* ── Intel card ── */
html[data-theme="institutional"] .intel-card {
  background: var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] .intel-card:hover {
  border-color: rgba(245, 184, 46, 0.25) !important;
}

/* ── Tab navigation (institutional) ── */
html[data-theme="institutional"] .tab-nav {
  background: rgba(14, 165, 255, 0.04) !important;
  border-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] .tab-btn.active {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* ── Ranking table (institutional) ── */
html[data-theme="institutional"] .rank-table th {
  background: rgba(14, 165, 255, 0.04) !important;
  border-bottom-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] .rank-table th.sort-active {
  color: var(--sk-gold) !important;
}

html[data-theme="institutional"] .rank-table tbody tr:hover td {
  background: rgba(14, 165, 255, 0.06) !important;
}

html[data-theme="institutional"] .rank-table tbody tr.expanded td {
  background: rgba(245, 184, 46, 0.04) !important;
}

/* ── Control buttons (institutional) ── */
html[data-theme="institutional"] .ctrl-btn.active {
  background: var(--sk-gold-dim) !important;
  color: var(--sk-gold) !important;
  border-color: rgba(245, 184, 46, 0.28) !important;
}

/* ── Header meta ── */
html[data-theme="institutional"] .header-meta {
  color: var(--sk-text-muted) !important;
}

/* ── ALL institutional card types — deep navy + blue radial gradient ── */
html[data-theme="institutional"] .nowcast-card,
html[data-theme="institutional"] .chart-card,
html[data-theme="institutional"] .chart-wrapper,
html[data-theme="institutional"] .info-card,
html[data-theme="institutional"] .data-card,
html[data-theme="institutional"] .module-card,
html[data-theme="institutional"] .analysis-card,
html[data-theme="institutional"] .indicator-card,
html[data-theme="institutional"] .inst-module,
html[data-theme="institutional"] .scatter-card,
html[data-theme="institutional"] .gbc-card,
html[data-theme="institutional"] .gfc-card,
html[data-theme="institutional"] .flp-card,
html[data-theme="institutional"] .bmi-card,
html[data-theme="institutional"] .report-section,
html[data-theme="institutional"] .timeline-item,
html[data-theme="institutional"] .metric-box,
html[data-theme="institutional"] .value-card,
html[data-theme="institutional"] .plan-card,
html[data-theme="institutional"] .trust-item,
html[data-theme="institutional"] .sk-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(14, 165, 255, 0.06), transparent 35%),
    var(--sk-bg-card) !important;
  border-color: rgba(14, 165, 255, 0.09) !important;
}

html[data-theme="institutional"] .nowcast-card:hover,
html[data-theme="institutional"] .chart-card:hover,
html[data-theme="institutional"] .info-card:hover,
html[data-theme="institutional"] .data-card:hover,
html[data-theme="institutional"] .indicator-card:hover,
html[data-theme="institutional"] .timeline-item:hover,
html[data-theme="institutional"] .trust-item:hover,
html[data-theme="institutional"] .value-card:hover,
html[data-theme="institutional"] .plan-card:hover {
  border-color: rgba(245, 184, 46, 0.28) !important;
  box-shadow: 0 6px 28px rgba(14, 165, 255, 0.10) !important;
}

/* Accent top lines on institutional cards */
html[data-theme="institutional"] .nowcast-card::before,
html[data-theme="institutional"] .chart-card::before,
html[data-theme="institutional"] .indicator-card::before,
html[data-theme="institutional"] .highlight-card::before {
  background: linear-gradient(90deg, var(--sk-gold), rgba(14, 165, 255, 0.4), transparent) !important;
}

/* Institutional glow orbs — blue tint */
html[data-theme="institutional"] .glow-orb {
  background: radial-gradient(circle, rgba(14, 165, 255, 0.08) 0%, transparent 70%) !important;
}

/* Institutional grid-bg — blue tint */
html[data-theme="institutional"] .grid-bg {
  background-image:
    linear-gradient(rgba(14, 165, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 255, 0.03) 1px, transparent 1px) !important;
}

/* ── Institutional nav/status/ticker ── */
html[data-theme="institutional"] #sky-system-status {
  background: rgba(6, 20, 38, 0.96) !important;
  border-bottom-color: rgba(14, 165, 255, 0.15) !important;
}

html[data-theme="institutional"] #sky-market-ticker {
  background: #030914 !important;
  border-bottom-color: rgba(14, 165, 255, 0.12) !important;
}

html[data-theme="institutional"] #sky-intel-rail,
html[data-theme="institutional"] #sky-intel-rail-panel {
  background: rgba(3, 9, 20, 0.97) !important;
  border-left-color: rgba(245, 184, 46, 0.15) !important;
}

/* Institutional form inputs — deeper navy */
html[data-theme="institutional"] input[type="text"],
html[data-theme="institutional"] input[type="email"],
html[data-theme="institutional"] input[type="password"],
html[data-theme="institutional"] input[type="number"],
html[data-theme="institutional"] input[type="search"],
html[data-theme="institutional"] select,
html[data-theme="institutional"] textarea {
  background: var(--sk-bg-surface) !important;
  border-color: rgba(14, 165, 255, 0.10) !important;
}

html[data-theme="institutional"] input:focus,
html[data-theme="institutional"] select:focus,
html[data-theme="institutional"] textarea:focus {
  border-color: rgba(245, 184, 46, 0.40) !important;
  box-shadow: 0 0 0 2px rgba(245, 184, 46, 0.10) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * GLOBAL LINK COLOR
 * ══════════════════════════════════════════════════════════════════════════════ */

a {
  color: inherit;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * FOOTER — Force theme
 * ══════════════════════════════════════════════════════════════════════════════ */

footer,
.footer,
.site-footer {
  background: var(--sk-bg-primary) !important;
  border-top-color: var(--sk-border) !important;
  color: var(--sk-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * MODAL / OVERLAY OVERRIDES
 * ══════════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}
.modal {
  background: var(--sk-bg-card) !important;
  border-color: var(--sk-border) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * ADMIN NOTICES — Force theme semantic colors
 * ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="admin"] .notice-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}
html[data-theme="admin"] .notice-warn {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
}
html[data-theme="admin"] .notice-err {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}
html[data-theme="admin"] .notice-ok {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
  color: #86efac !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * SEMANTIC REGIME COLOR PRESERVATION
 * Chart colors for financial data must remain correct regardless of theme.
 * ══════════════════════════════════════════════════════════════════════════════ */

.nowcast-indicator.go {
  background: rgba(0, 229, 160, 0.15) !important;
  border-color: rgba(0, 229, 160, 0.3) !important;
}
.nowcast-indicator.caution {
  background: rgba(245, 184, 46, 0.15) !important;
  border-color: rgba(245, 184, 46, 0.3) !important;
}
.nowcast-indicator.stop {
  background: rgba(255, 95, 87, 0.15) !important;
  border-color: rgba(255, 95, 87, 0.3) !important;
}

.timeline-dot.go { background: #00e5a0 !important; }
.timeline-dot.caution { background: var(--sk-gold) !important; }
.timeline-dot.stop { background: #ff5f57 !important; }


/* ══════════════════════════════════════════════════════════════════════════════
 * CHATBOT OVERRIDE — Ensure chatbot widget respects theme
 * ══════════════════════════════════════════════════════════════════════════════ */

#chatbot-container,
#chatbot-toggle {
  /* Chatbot bubble uses gold accent */
  border-color: var(--sk-gold) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * LIGHT MODE TEXT CONTRAST FIX
 * Root cause: inline <style> blocks on each page hardcode dark hex colors
 * (#e8eaf0, #8a8fa8, #565b73, etc.) that are never overridden in light mode.
 * These rules use [data-color-mode="light"] attribute selectors which have
 * higher specificity (0,2,0) than body{color:#e8eaf0} (0,1,0) and beat them.
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Base canvas override ── */
[data-color-mode="light"] html,
[data-color-mode="light"] body {
  background: #f5f6f8 !important;
  color: #0f1220 !important;
}

/* ── 2. Dark-mode-only CSS variable overrides for light mode ── */
[data-color-mode="light"] {
  --text-primary: #0f1220 !important;
  --text-secondary: #4a5270 !important;
  --text-muted: #7a86a8 !important;
  --text: #0f1220 !important;
  --text2: #4a5270 !important;
  --text3: #7a86a8 !important;
  --bg-deep: #f5f6f8 !important;
  --bg-card: #ffffff !important;
  --bg-elevated: #f0f2f7 !important;
  --bg-hover: #e8ebf4 !important;
  --bg-surface: #e0e3ec !important;
  --bg: #f5f6f8 !important;
  --bg2: #ffffff !important;
  --bg3: #f0f2f7 !important;
  --bg-card-hover: #e8ebf4 !important;
}

/* ── 3. Nav chrome in light mode ── */
[data-color-mode="light"] nav,
[data-color-mode="light"] .navbar,
[data-color-mode="light"] .nav-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
[data-color-mode="light"] .btn-nav {
  color: #4a5270 !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
[data-color-mode="light"] .btn-nav:hover {
  color: #0f1220 !important;
  border-color: rgba(0, 0, 0, 0.20) !important;
}
[data-color-mode="light"] .btn-nav.accent {
  color: #c88a14 !important;
  border-color: rgba(200, 138, 20, 0.30) !important;
  background: rgba(200, 138, 20, 0.06) !important;
}

/* ── 4. Common page text classes (hardcoded in page inline <style>) ── */
[data-color-mode="light"] .cc-title,
[data-color-mode="light"] .chart-title,
[data-color-mode="light"] .card-title,
[data-color-mode="light"] .tv-title,
[data-color-mode="light"] .macro-table td,
[data-color-mode="light"] .timeline-name,
[data-color-mode="light"] .report-name,
[data-color-mode="light"] .resource-name,
[data-color-mode="light"] .gfc-link-title,
[data-color-mode="light"] .crypto-intel-title,
[data-color-mode="light"] .indicator-card-name,
[data-color-mode="light"] .crypto-tile-value {
  color: #0f1220 !important;
}

[data-color-mode="light"] .cc-sub,
[data-color-mode="light"] .chart-subtitle,
[data-color-mode="light"] .card-subtitle,
[data-color-mode="light"] .nowcast-note,
[data-color-mode="light"] .toggle-btn,
[data-color-mode="light"] .macro-table td,
[data-color-mode="light"] .timeline-note,
[data-color-mode="light"] .report-content,
[data-color-mode="light"] .resource-desc,
[data-color-mode="light"] .gfc-link-sub,
[data-color-mode="light"] .crypto-intel-sub,
[data-color-mode="light"] .indicator-card-desc,
[data-color-mode="light"] .crypto-tile-secondary {
  color: #4a5270 !important;
}

[data-color-mode="light"] .nowcast-label,
[data-color-mode="light"] .nowcast-stat-label,
[data-color-mode="light"] .chart-subtitle,
[data-color-mode="light"] .macro-table th,
[data-color-mode="light"] .timeline-date,
[data-color-mode="light"] .timeline-signal,
[data-color-mode="light"] .report-meta,
[data-color-mode="light"] .resource-desc,
[data-color-mode="light"] .upgrade-wall-feature,
[data-color-mode="light"] .interpretive-note,
[data-color-mode="light"] .why-it-matters,
[data-color-mode="light"] .crypto-intel-footer,
[data-color-mode="light"] .crypto-intel-live,
[data-color-mode="light"] .indicator-card-sublabel,
[data-color-mode="light"] .indicator-card-footnote,
[data-color-mode="light"] .nowcast-interpretive,
[data-color-mode="light"] .crypto-tile-label,
[data-color-mode="light"] .terminology-def,
[data-color-mode="light"] .terminology-intro,
[data-color-mode="light"] .compliance-footer,
[data-color-mode="light"] .macro-desc-cell {
  color: #7a86a8 !important;
}

/* ── 5. Stat/metric value classes (gold = accent, override for legibility) ── */
[data-color-mode="light"] .nowcast-stat-value,
[data-color-mode="light"] .nowcast-regime,
[data-color-mode="light"] .corr-value,
[data-color-mode="light"] .macro-score-num {
  color: #c88a14 !important;
}

/* ── 6. Ticker in light mode ── */
[data-color-mode="light"] #sky-market-ticker {
  background: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

/* ── 7. Inline <style> dark hex overrides (command-center + other pages) ── */
/* .weekly-flp-legend-item hardcodes color:#cfd3e6 — invisible on white */
[data-color-mode="light"] .weekly-flp-legend-item {
  color: #2d3748 !important;
}
/* .weekly-flp-spread-title hardcodes color:#8a8fa8 — dark enough, leave */
/* .zoom-reset-btn hardcodes color:#8a8fa8 — passes WCAG, leave */
/* .macro-expand-icon hardcodes color:#8a8fa8 — passes WCAG, leave */
/* .recession-toggle-btn hardcodes color:#ff5f57 — semantic red, leave */
/* Regime dots hardcode #00e5a0/#febc2e/#ff5f57 — semantic, leave */

/* ── 8. Chart canvas + card body text in light mode ── */
[data-color-mode="light"] .chart-card,
[data-color-mode="light"] .card,
[data-color-mode="light"] .nowcast-card,
[data-color-mode="light"] .macro-table-card,
[data-color-mode="light"] .upgrade-wall,
[data-color-mode="light"] .tv-card,
[data-color-mode="light"] .indicator-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ── 9. Scrollbar in light mode ── */
[data-color-mode="light"] .timeline-grid::-webkit-scrollbar-thumb,
[data-color-mode="light"] .reports-scroll::-webkit-scrollbar-thumb,
[data-color-mode="light"] .report-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}
[data-color-mode="light"] .timeline-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
 * LIGHT MODE — Full override for institutional + standard pages
 * Activated by theme-init.js setting data-color-scheme="light" or theme-light class
 * Must beat <style id="sky-critical"> on institutional pages (higher specificity)
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── Root token override (beats sky-critical :root definitions) ── */
html[data-color-scheme="light"],
html.theme-light,
[data-color-mode="light"] {
  --sk-bg-primary: #f5f6f8 !important;
  --sk-bg-secondary: #eef0f5 !important;
  --sk-bg-panel: #f0f1f6 !important;
  --sk-bg-card: #ffffff !important;
  --sk-bg-surface: #f7f8fb !important;
  --sk-bg-elevated: #f0f2f7 !important;
  --sk-bg-hover: #e8ebf4 !important;
  --sk-text-primary: #080b12 !important;
  --sk-text-secondary: #273044 !important;
  --sk-text-muted: #5f6b82 !important;
  --sk-border: rgba(8, 11, 18, 0.08) !important;
  --sk-grid-line: rgba(8, 11, 18, 0.04) !important;
  --sk-blue-soft: #4f8ef7 !important;
  --sk-purple-soft: #7c6fec !important;
  --sk-go: #16a34a !important;
  --sk-caution: #b8860b !important;
  --sk-stop: #dc2626 !important;

  /* Also update legacy tokens */
  --bg-deep: #f5f6f8 !important;
  --bg-card: #ffffff !important;
  --bg-elevated: #f0f2f7 !important;
  --bg-hover: #e8ebf4 !important;
  --bg-surface: #f7f8fb !important;
  --bg: #f5f6f8 !important;
  --bg2: #ffffff !important;
  --bg3: #f0f2f7 !important;
  --bg-card-hover: #e8ebf4 !important;
  --text-primary: #080b12 !important;
  --text-secondary: #273044 !important;
  --text-muted: #5f6b82 !important;
  --text: #080b12 !important;
  --text2: #273044 !important;
  --text3: #5f6b82 !important;
}

/* ── High-specificity body override (beats sky-critical html,body rule) ── */
html[data-color-scheme="light"] html,
html[data-color-scheme="light"] body,
html.theme-light html,
html.theme-light body,
[data-color-mode="light"] html,
[data-color-mode="light"] body {
  background: #f5f6f8 !important;
  color: #080b12 !important;
}

/* ── All text elements in light mode ── */
html[data-color-scheme="light"] body,
html[data-color-scheme="light"] p,
html[data-color-scheme="light"] .subtitle,
html[data-color-scheme="light"] .eyebrow,
html[data-color-scheme="light"] .section-label,
html[data-color-scheme="light"] .kicker,
html[data-color-scheme="light"] .card-title,
html[data-color-scheme="light"] .card-subtitle,
html[data-color-scheme="light"] .module-title,
html[data-color-scheme="light"] .module-subtitle,
html[data-color-scheme="light"] .tool-title,
html[data-color-scheme="light"] .tool-copy,
html[data-color-scheme="light"] .hero-copy,
html[data-color-scheme="light"] .hero-subtitle,
html[data-color-scheme="light"] .form-label,
html[data-color-scheme="light"] label,
html.theme-light body,
html.theme-light p,
html.theme-light .subtitle,
html.theme-light .eyebrow {
  color: #080b12 !important;
}

/* ── Large institutional headings (currently white/cream on light bg) ── */
html[data-color-scheme="light"] h1,
html[data-color-scheme="light"] h2,
html[data-color-scheme="light"] h3,
html[data-color-scheme="light"] .hero-title,
html[data-color-scheme="light"] .page-title,
html[data-color-scheme="light"] .institutional-title,
html[data-color-scheme="light"] .institutional-hero h1,
html[data-color-scheme="light"] .backtests-hero h1,
html[data-color-scheme="light"] .gbc-hero h1,
html[data-color-scheme="light"] .bmi-hero h1,
html[data-color-scheme="light"] .correlation-hero h1,
html.theme-light h1,
html.theme-light h2,
html.theme-light h3 {
  color: #080b12 !important;
  text-shadow: none !important;
}

/* ── Page title gradient text in light mode ── */
html[data-color-scheme="light"] .page-title,
html.theme-light .page-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: #080b12 !important;
}

/* ── Gold accent preservation (only as true accent, not low-contrast text) ── */
html[data-color-scheme="light"] .gold,
html[data-color-scheme="light"] .accent,
html[data-color-scheme="light"] .section-kicker,
html[data-color-scheme="light"] .institutional-kicker,
html.theme-light .gold,
html.theme-light .accent {
  color: #b8860b !important;
}

/* ── SkylarkOS nav logo in light mode (SKY dark, OS gold) ── */
html[data-color-scheme="light"] #sky-global-nav,
html.theme-light #sky-global-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: rgba(8, 11, 18, 0.08) !important;
}

html[data-color-scheme="light"] #sky-global-nav .sky-nav-logo-text,
html.theme-light #sky-global-nav .sky-nav-logo-text {
  color: #080b12 !important;
}

html[data-color-scheme="light"] #sky-global-nav .sky-nav-logo-text span,
html.theme-light #sky-global-nav .sky-nav-logo-text span {
  color: rgba(8, 11, 18, 0.35) !important;
}

/* ── Nav buttons in light mode ── */
html[data-color-scheme="light"] #sky-search-nav-btn,
html.theme-light #sky-search-nav-btn {
  color: rgba(8, 11, 18, 0.5) !important;
  border-color: rgba(8, 11, 18, 0.12) !important;
}

html[data-color-scheme="light"] #sky-search-nav-btn:hover,
html.theme-light #sky-search-nav-btn:hover {
  color: rgba(8, 11, 18, 0.9) !important;
  border-color: rgba(8, 11, 18, 0.25) !important;
  background: rgba(8, 11, 18, 0.04) !important;
}

html[data-color-scheme="light"] #sky-hamburger-btn,
html.theme-light #sky-hamburger-btn {
  color: rgba(8, 11, 18, 0.6) !important;
  border-color: rgba(8, 11, 18, 0.12) !important;
}

html[data-color-scheme="light"] #sky-hamburger-btn:hover,
html.theme-light #sky-hamburger-btn:hover {
  color: rgba(8, 11, 18, 0.9) !important;
  border-color: rgba(8, 11, 18, 0.25) !important;
  background: rgba(8, 11, 18, 0.04) !important;
}

/* ── Nav menu in light mode ── */
html[data-color-scheme="light"] #sky-nav-menu,
html.theme-light #sky-nav-menu {
  background: #ffffff !important;
  border-color: rgba(8, 11, 18, 0.08) !important;
}

html[data-color-scheme="light"] .sky-menu-item,
html.theme-light .sky-menu-item {
  color: rgba(8, 11, 18, 0.6) !important;
}

html[data-color-scheme="light"] .sky-menu-item:hover,
html.theme-light .sky-menu-item:hover {
  color: rgba(8, 11, 18, 0.9) !important;
  background: rgba(8, 11, 18, 0.04) !important;
}

html[data-color-scheme="light"] .sky-section-label,
html.theme-light .sky-section-label {
  color: rgba(8, 11, 18, 0.3) !important;
}

/* ── Institutional signup form labels in light mode ── */
html[data-color-scheme="light"] .signup-card label,
html[data-color-scheme="light"] .signup-card .form-label,
html[data-color-scheme="light"] .institutional-signup label,
html[data-color-scheme="light"] .institutional-signup .form-label,
html[data-color-scheme="light"] .institutional-report-signup label,
html[data-color-scheme="light"] .institutional-report-signup .form-label,
html[data-color-scheme="light"] label[for],
html[data-color-scheme="light"] .input-label,
html.theme-light .signup-card label,
html.theme-light .signup-card .form-label {
  color: #080b12 !important;
  opacity: 1 !important;
}

/* ── Form inputs in light mode ── */
html[data-color-scheme="light"] .signup-card input,
html[data-color-scheme="light"] .signup-card textarea,
html[data-color-scheme="light"] .signup-card select,
html[data-color-scheme="light"] input[type="text"],
html[data-color-scheme="light"] input[type="email"],
html[data-color-scheme="light"] input[type="password"],
html[data-color-scheme="light"] input[type="number"],
html[data-color-scheme="light"] input[type="search"],
html[data-color-scheme="light"] select,
html[data-color-scheme="light"] textarea,
html.theme-light input,
html.theme-light textarea,
html.theme-light select {
  color: #080b12 !important;
  background: #f7f8fb !important;
  border-color: rgba(8, 11, 18, 0.16) !important;
}

html[data-color-scheme="light"] input::placeholder,
html[data-color-scheme="light"] textarea::placeholder,
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #6d7890 !important;
  opacity: 1 !important;
}

/* ── Cards in light mode ── */
html[data-color-scheme="light"] .glass-card,
html[data-color-scheme="light"] .institutional-card,
html[data-color-scheme="light"] .module-card,
html[data-color-scheme="light"] .tool-card,
html[data-color-scheme="light"] .signup-card,
html[data-color-scheme="light"] .report-signup-card,
html[data-color-scheme="light"] .dash-card,
html[data-color-scheme="light"] .report-card,
html[data-color-scheme="light"] .intel-card,
html[data-color-scheme="light"] .access-card,
html[data-color-scheme="light"] .card,
html.theme-light .glass-card,
html.theme-light .institutional-card,
html.theme-light .module-card,
html.theme-light .signup-card,
html.theme-light .card {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #080b12 !important;
  border-color: rgba(8, 11, 18, 0.10) !important;
}

/* ── Override hardcoded institutional card text overrides (these were forcing white text) ── */
html[data-color-scheme="light"] .dash-card-title,
html.theme-light .dash-card-title {
  color: #080b12 !important;
}

html[data-color-scheme="light"] .dash-card-desc,
html.theme-light .dash-card-desc {
  color: #273044 !important;
}

/* ── Muted/secondary text in light mode ── */
html[data-color-scheme="light"] .muted,
html[data-color-scheme="light"] .text-muted,
html[data-color-scheme="light"] small,
html[data-color-scheme="light"] .meta,
html[data-color-scheme="light"] .loading,
html[data-color-scheme="light"] .card-meta,
html[data-color-scheme="light"] .page-subtitle,
html[data-color-scheme="light"] .timestamp-meta,
html.theme-light .muted,
html.theme-light .text-muted {
  color: #4e5a70 !important;
}

/* ── Page eyebrow/kicker in light mode ── */
html[data-color-scheme="light"] .page-eyebrow,
html.theme-light .page-eyebrow {
  color: #b8860b !important;
}

/* ── Stat/regime values in light mode (gold accent stays) ── */
html[data-color-scheme="light"] .nowcast-stat-value,
html[data-color-scheme="light"] .nowcast-regime,
html[data-color-scheme="light"] .stat-value,
html.theme-light .nowcast-stat-value,
html.theme-light .stat-value {
  color: #b8860b !important;
}

/* ── Nav backdrop in light mode ── */
html[data-color-scheme="light"] #sky-nav-backdrop,
html.theme-light #sky-nav-backdrop {
  background: rgba(8, 11, 18, 0.3) !important;
}

/* ── Market ticker in light mode ── */
html[data-color-scheme="light"] #sky-market-ticker,
html.theme-light #sky-market-ticker {
  background: #ffffff !important;
  border-bottom-color: rgba(8, 11, 18, 0.07) !important;
}

/* ── Intel rail in light mode ── */
html[data-color-scheme="light"] #sky-intel-rail,
html[data-color-scheme="light"] #sky-intel-rail-panel,
html.theme-light #sky-intel-rail {
  background: rgba(255, 255, 255, 0.97) !important;
  border-left-color: rgba(8, 11, 18, 0.06) !important;
}

/* ── System status in light mode ── */
html[data-color-scheme="light"] #sky-system-status,
html.theme-light #sky-system-status {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(8, 11, 18, 0.06) !important;
}

/* ── Footer in light mode ── */
html[data-color-scheme="light"] footer,
html[data-color-scheme="light"] .footer,
html[data-color-scheme="light"] .site-footer,
html.theme-light footer,
html.theme-light .footer {
  background: #e8ebf4 !important;
  border-top-color: rgba(8, 11, 18, 0.08) !important;
  color: #4e5a70 !important;
}

/* ── Tab navigation in light mode ── */
html[data-color-scheme="light"] .tab-nav,
html.theme-light .tab-nav {
  background: rgba(8, 11, 18, 0.04) !important;
  border-color: rgba(8, 11, 18, 0.08) !important;
}

html[data-color-scheme="light"] .tab-btn,
html.theme-light .tab-btn {
  color: #273044 !important;
}

html[data-color-scheme="light"] .tab-btn:hover,
html.theme-light .tab-btn:hover {
  color: #080b12 !important;
}

html[data-color-scheme="light"] .tab-btn.active,
html.theme-light .tab-btn.active {
  background: rgba(184, 134, 11, 0.08) !important;
  color: #b8860b !important;
  border-color: rgba(184, 134, 11, 0.25) !important;
}

/* ── Buttons in light mode ── */
html[data-color-scheme="light"] .btn-primary,
html[data-color-scheme="light"] .btn-download,
html.theme-light .btn-primary {
  background: #b8860b !important;
  color: #ffffff !important;
}

html[data-color-scheme="light"] .btn-outline,
html.theme-light .btn-outline {
  border-color: rgba(8, 11, 18, 0.15) !important;
  color: #273044 !important;
}

html[data-color-scheme="light"] .btn-export,
html[data-color-scheme="light"] .access-btn,
html.theme-light .btn-export {
  background: rgba(184, 134, 11, 0.08) !important;
  color: #b8860b !important;
  border-color: rgba(184, 134, 11, 0.25) !important;
}

/* ── Scrollbar in light mode ── */
html[data-color-scheme="light"] ::-webkit-scrollbar-thumb,
html.theme-light ::-webkit-scrollbar-thumb {
  background: rgba(8, 11, 18, 0.15) !important;
}

html[data-color-scheme="light"] ::-webkit-scrollbar-thumb:hover,
html.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(8, 11, 18, 0.25) !important;
}

/* ── GBC/BMI/Backtests/Correlation specific classes in light mode ── */
html[data-color-scheme="light"] .hero-copy,
html[data-color-scheme="light"] .hero-subtitle,
html[data-color-scheme="light"] .backtests-hero,
html[data-color-scheme="light"] .gbc-hero,
html[data-color-scheme="light"] .bmi-hero,
html[data-color-scheme="light"] .correlation-hero,
html[data-color-scheme="light"] .institutional-hero {
  color: #080b12 !important;
}

html[data-color-scheme="light"] .institutional-hero h1,
html[data-color-scheme="light"] .backtests-hero h1,
html[data-color-scheme="light"] .gbc-hero h1,
html[data-color-scheme="light"] .bmi-hero h1,
html[data-color-scheme="light"] .correlation-hero h1 {
  color: #080b12 !important;
  text-shadow: none !important;
}

/* ── Institutional section dividers in light mode ── */
html[data-color-scheme="light"] .section-divider,
html.theme-light .section-divider {
  border-color: rgba(8, 11, 18, 0.08) !important;
}

/* ── Grid background in light mode ── */
html[data-color-scheme="light"] .grid-bg,
html.theme-light .grid-bg {
  background-image:
    linear-gradient(rgba(8, 11, 18, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 11, 18, 0.03) 1px, transparent 1px) !important;
}

/* ── Modal in light mode ── */
html[data-color-scheme="light"] .modal,
html.theme-light .modal {
  background: #ffffff !important;
  border-color: rgba(8, 11, 18, 0.12) !important;
}

html[data-color-scheme="light"] .modal-backdrop,
html.theme-light .modal-backdrop {
  background: rgba(8, 11, 18, 0.4) !important;
}

/* ── Signup section in light mode ── */
html[data-color-scheme="light"] .signup-section,
html.theme-light .signup-section {
  background: transparent !important;
}

html[data-color-scheme="light"] .signup-card h2,
html.theme-light .signup-card h2 {
  color: #080b12 !important;
}

html[data-color-scheme="light"] .signup-card p,
html.theme-light .signup-card p {
  color: #273044 !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
 * BUG FIX — Light mode: invisible card text + grey ticker text + weak separators
 * Task #2395618
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
 * ISSUE 1 — Research/institutional module card text invisible in light mode
 * Root cause: lines 715–721 forced near-white text (#e8eaf0) on white cards.
 * Fix: override dash-card-title/desc to black/dark-grey in light mode.
 * ───────────────────────────────────────────────────────────────────────────── */

/* First, remove the wrong hardcoded light-mode values that make text invisible */
html[data-color-scheme="light"] .dash-card-title,
html.theme-light .dash-card-title {
  color: #111827 !important;
}

html[data-color-scheme="light"] .dash-card-desc,
html.theme-light .dash-card-desc {
  color: #374151 !important;
}

/* Also target via data-color-mode (used as the active toggle attribute) */
[data-color-mode="light"] .dash-card-title {
  color: #111827 !important;
}

[data-color-mode="light"] .dash-card-desc {
  color: #374151 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ISSUE 2 — Ticker bar text grey instead of black in light mode
 * Root cause: market-ticker.css hardcodes rgba(138,143,168) / rgba(232,234,240)
 * with no light mode overrides.
 * Fix: force neutral ticker text to near-black in light mode.
 * IMPORTANT: Do NOT override green/red directional colors — those must stay.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Neutral/label text — forced near-black in light mode */
html[data-color-scheme="light"] .sky-ticker-item,
html[data-color-scheme="light"] .sky-ticker-price,
html.theme-light .sky-ticker-item,
html.theme-light .sky-ticker-price {
  color: #111827 !important;
}

html[data-color-scheme="light"] .sky-ticker-symbol,
html.theme-light .sky-ticker-symbol {
  color: #374151 !important;
}

/* LIVE label + category separator text */
html[data-color-scheme="light"] .sky-ticker-live-label,
html.theme-light .sky-ticker-live-label {
  color: #111827 !important;
}

html[data-color-scheme="light"] .sky-ticker-category,
html.theme-light .sky-ticker-category {
  color: #374151 !important;
}

/* The LIVE dot itself stays gold — no color change needed */

/* Also handle via data-color-mode attribute */
[data-color-mode="light"] .sky-ticker-item,
[data-color-mode="light"] .sky-ticker-price {
  color: #111827 !important;
}

[data-color-mode="light"] .sky-ticker-symbol {
  color: #374151 !important;
}

[data-color-mode="light"] .sky-ticker-live-label {
  color: #111827 !important;
}

[data-color-mode="light"] .sky-ticker-category {
  color: #374151 !important;
}

/* The neutral color class (flat/neutral % change) is intentionally kept
   as a muted grey — it is not a label, it's the actual change value.
   In light mode, neutral delta text should be dark grey, not near-invisible. */
html[data-color-scheme="light"] .sky-ticker-dir.neutral,
html[data-color-scheme="light"] .sky-ticker-dir.neutral .sky-ticker-change,
html.theme-light .sky-ticker-dir.neutral,
html.theme-light .sky-ticker-dir.neutral .sky-ticker-change {
  color: #374151 !important;
}

[data-color-mode="light"] .sky-ticker-dir.neutral .sky-ticker-change {
  color: #374151 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * ISSUE 3 — Separator lines between top bar sections too faint in light mode
 * Root cause: existing border-bottom rules use 0.06–0.07 opacity — barely visible.
 * Fix: increase opacity of all top-bar separator borders.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Ticker bar bottom separator */
html[data-color-scheme="light"] #sky-market-ticker,
html.theme-light #sky-market-ticker {
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

/* System status bar (between ticker and nav) — top and bottom borders */
html[data-color-scheme="light"] #sky-system-status,
html.theme-light #sky-system-status {
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

/* Global nav bottom separator */
html[data-color-scheme="light"] #sky-global-nav,
html.theme-light #sky-global-nav {
  border-bottom-color: rgba(0, 0, 0, 0.14) !important;
}

/* Also handle via data-color-mode attribute */
[data-color-mode="light"] #sky-market-ticker {
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

[data-color-mode="light"] #sky-system-status {
  border-bottom-color: rgba(0, 0, 0, 0.18) !important;
}

[data-color-mode="light"] #sky-global-nav {
  border-bottom-color: rgba(0, 0, 0, 0.14) !important;
}
