/**
 * MAGNA HISTORIA — THEME SYSTEM v2
 * "Magna Elements" — 5 elemental themes, each with full polychromatic palette
 *
 * Architecture:
 *   - 52 semantic tokens defined per theme via [data-theme] attribute
 *   - 8 ROLE COLORS per theme give each visualization its own identity
 *   - Legacy variable bridging for backward compatibility
 *   - Component overrides use role-specific colors, not monochrome
 *   - Loads LAST to override all other CSS files
 *
 * Themes:
 *   1. OBSIDIAN  (Default) — High-tech steel, mission control neutral
 *   2. TERRA     — Living forest, bioluminescent earth
 *   3. SOLARIS   — Egyptian gold, desert fire, archaeological warmth
 *   4. GLACIALIS — Polar ice, Antarctic research station
 *   5. AETHER    — Cosmic violet, nebula transcendence
 */

/* ═══════════════════════════════════════════════════════════════
   1. OBSIDIAN — Steel / Space Station / Mission Control
   The richest palette — mission control with full-spectrum readouts
   ═══════════════════════════════════════════════════════════════ */
[data-theme="obsidian"] {
    /* Backgrounds — cool steel undertone */
    --th-bg-void:          #08090c;
    --th-bg-primary:       #0e1017;
    --th-bg-secondary:     #14161e;
    --th-bg-surface:       #1a1d27;
    --th-bg-surface-hover: #20232f;
    --th-bg-glass:         rgba(14, 16, 23, 0.88);
    --th-bg-glass-strong:  rgba(14, 16, 23, 0.95);

    /* Text — cool whites, zero warmth */
    --th-text-primary:   #e4e6ed;
    --th-text-secondary: #8b8fa3;
    --th-text-muted:     #50546a;
    --th-text-heading:   #f0f1f5;
    --th-text-inverse:   #08090c;

    /* Accents — steel silver + ice blue highlight */
    --th-accent:           #a0aec0;
    --th-accent-bright:    #cbd5e1;
    --th-accent-dim:       rgba(160, 174, 192, 0.10);
    --th-accent-secondary: #64748b;
    --th-accent-tertiary:  #38bdf8;

    /* ── ROLE COLORS — Each visualization gets its own identity ── */
    --th-color-globe:     #38bdf8;  /* ice blue — Earth from orbit */
    --th-color-codex:     #8b5cf6;  /* violet — ancient knowledge */
    --th-color-gateway:   #22d3ee;  /* cyan — portal energy */
    --th-color-frequency: #f59e0b;  /* amber — audio waves */
    --th-color-timeline:  #f43f5e;  /* rose red — time events */
    --th-color-network:   #10b981;  /* emerald — connections */
    --th-color-sacred:    #e2e8f0;  /* platinum — pure geometry */
    --th-color-seismic:   #ef4444;  /* red — earthquakes */

    /* Role color glows (pre-computed rgba) */
    --th-glow-globe:     rgba(56, 189, 248, 0.35);
    --th-glow-codex:     rgba(139, 92, 246, 0.4);
    --th-glow-gateway:   rgba(34, 211, 238, 0.3);
    --th-glow-frequency: rgba(245, 158, 11, 0.35);
    --th-glow-timeline:  rgba(244, 63, 94, 0.35);
    --th-glow-network:   rgba(16, 185, 129, 0.4);
    --th-glow-seismic:   rgba(239, 68, 68, 0.35);

    /* Borders — hair-thin, barely visible */
    --th-border:        rgba(255, 255, 255, 0.06);
    --th-border-subtle: rgba(255, 255, 255, 0.03);
    --th-border-strong: rgba(255, 255, 255, 0.10);
    --th-border-accent: rgba(160, 174, 192, 0.20);

    /* Glows & Shadows — cool, minimal */
    --th-glow:        rgba(160, 174, 192, 0.12);
    --th-glow-accent: rgba(56, 189, 248, 0.18);
    --th-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.5);
    --th-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.55);
    --th-shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.6);

    /* Header & Nav */
    --th-header-bg:     rgba(8, 9, 12, 0.92);
    --th-header-border: rgba(160, 174, 192, 0.08);
    --th-header-blur:   16px;

    /* Logo gradient — silver monochrome */
    --th-logo-start: #64748b;
    --th-logo-mid:   #a0aec0;
    --th-logo-end:   #e2e8f0;
    --th-logo-glow:  rgba(160, 174, 192, 0.3);

    /* Interactive */
    --th-hover-bg:       rgba(255, 255, 255, 0.04);
    --th-focus-ring:     rgba(56, 189, 248, 0.5);
    --th-selection-bg:   rgba(56, 189, 248, 0.25);
    --th-selection-text:  #f0f1f5;
    --th-scrollbar-track: #0e1017;
    --th-scrollbar-thumb: #2a2d3a;

    /* Semantic */
    --th-success: #34d399;
    --th-warning: #fbbf24;
    --th-danger:  #f87171;
    --th-info:    #38bdf8;

    /* Typography personality — clinical, tight */
    --th-heading-weight:  500;
    --th-heading-spacing: -0.01em;
    --th-label-spacing:   0.08em;
    --th-transition-speed: 0.15s;

    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   2. TERRA — Forest / Earth / Bioluminescence
   Twilight rainforest — warm ambers, cool teals, glowing greens
   ═══════════════════════════════════════════════════════════════ */
[data-theme="terra"] {
    --th-bg-void:          #060a07;
    --th-bg-primary:       #0b110c;
    --th-bg-secondary:     #111a13;
    --th-bg-surface:       #172119;
    --th-bg-surface-hover: #1e2b20;
    --th-bg-glass:         rgba(11, 17, 12, 0.88);
    --th-bg-glass-strong:  rgba(11, 17, 12, 0.95);

    --th-text-primary:   #d4dbd0;
    --th-text-secondary: #8a9a82;
    --th-text-muted:     #546650;
    --th-text-heading:   #e8ede5;
    --th-text-inverse:   #060a07;

    --th-accent:           #4ade80;
    --th-accent-bright:    #86efac;
    --th-accent-dim:       rgba(74, 222, 128, 0.10);
    --th-accent-secondary: #d4a24e;
    --th-accent-tertiary:  #a78bfa;

    /* ── ROLE COLORS — Twilight rainforest palette ── */
    --th-color-globe:     #d4a24e;  /* warm amber — living earth */
    --th-color-codex:     #a78bfa;  /* twilight lavender — forest wisdom */
    --th-color-gateway:   #2dd4bf;  /* teal mint — forest pool */
    --th-color-frequency: #fbbf24;  /* firefly gold — bioluminescent pulse */
    --th-color-timeline:  #fb923c;  /* burnt orange — tree rings */
    --th-color-network:   #86efac;  /* soft green — mycelium web */
    --th-color-sacred:    #67e8f9;  /* morning dew — sacred water */
    --th-color-seismic:   #f87171;  /* warm red — volcanic */

    --th-glow-globe:     rgba(212, 162, 78, 0.35);
    --th-glow-codex:     rgba(167, 139, 250, 0.4);
    --th-glow-gateway:   rgba(45, 212, 191, 0.3);
    --th-glow-frequency: rgba(251, 191, 36, 0.35);
    --th-glow-timeline:  rgba(251, 146, 60, 0.35);
    --th-glow-network:   rgba(134, 239, 172, 0.4);
    --th-glow-seismic:   rgba(248, 113, 113, 0.35);

    --th-border:        rgba(74, 222, 128, 0.08);
    --th-border-subtle: rgba(74, 222, 128, 0.04);
    --th-border-strong: rgba(74, 222, 128, 0.15);
    --th-border-accent: rgba(74, 222, 128, 0.25);

    --th-glow:        rgba(74, 222, 128, 0.15);
    --th-glow-accent: rgba(74, 222, 128, 0.25);
    --th-shadow-sm:   0 2px 8px rgba(6, 10, 7, 0.5);
    --th-shadow-md:   0 8px 24px rgba(6, 10, 7, 0.55);
    --th-shadow-lg:   0 16px 48px rgba(6, 10, 7, 0.6);

    --th-header-bg:     rgba(6, 10, 7, 0.92);
    --th-header-border: rgba(74, 222, 128, 0.08);
    --th-header-blur:   14px;

    --th-logo-start: #d4a24e;
    --th-logo-mid:   #4ade80;
    --th-logo-end:   #86efac;
    --th-logo-glow:  rgba(74, 222, 128, 0.3);

    --th-hover-bg:       rgba(74, 222, 128, 0.06);
    --th-focus-ring:     rgba(74, 222, 128, 0.5);
    --th-selection-bg:   rgba(74, 222, 128, 0.2);
    --th-selection-text:  #e8ede5;
    --th-scrollbar-track: #0b110c;
    --th-scrollbar-thumb: #1e3022;

    --th-success: #4ade80;
    --th-warning: #d4a24e;
    --th-danger:  #f87171;
    --th-info:    #67e8f9;

    --th-heading-weight:  600;
    --th-heading-spacing: 0.04em;
    --th-label-spacing:   0.06em;
    --th-transition-speed: 0.2s;

    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   3. SOLARIS — Desert / Fire / Egyptian Gold
   Archaeological warmth — fire, sand, copper, oasis emerald
   ═══════════════════════════════════════════════════════════════ */
[data-theme="solaris"] {
    --th-bg-void:          #0a0806;
    --th-bg-primary:       #110e0a;
    --th-bg-secondary:     #1a1510;
    --th-bg-surface:       #221c14;
    --th-bg-surface-hover: #2a231a;
    --th-bg-glass:         rgba(17, 14, 10, 0.88);
    --th-bg-glass-strong:  rgba(17, 14, 10, 0.95);

    --th-text-primary:   #e2dace;
    --th-text-secondary: #a09580;
    --th-text-muted:     #6d5f4e;
    --th-text-heading:   #f4ecd8;
    --th-text-inverse:   #0a0806;

    --th-accent:           #d4a030;
    --th-accent-bright:    #f0c850;
    --th-accent-dim:       rgba(212, 160, 48, 0.10);
    --th-accent-secondary: #c45c2c;
    --th-accent-tertiary:  #a0522d;

    /* ── ROLE COLORS — Desert archaeological palette ── */
    --th-color-globe:     #c45c2c;  /* burnt sienna — desert earth */
    --th-color-codex:     #b45309;  /* deep amber — ancient papyrus */
    --th-color-gateway:   #059669;  /* oasis emerald — desert portal */
    --th-color-frequency: #dc2626;  /* deep red — solar flare */
    --th-color-timeline:  #f59e0b;  /* sun amber — sand hourglass */
    --th-color-network:   #d97706;  /* copper — trade routes */
    --th-color-sacred:    #fef3c7;  /* limestone light — temple stone */
    --th-color-seismic:   #b91c1c;  /* blood red — sandstorm */

    --th-glow-globe:     rgba(196, 92, 44, 0.35);
    --th-glow-codex:     rgba(180, 83, 9, 0.4);
    --th-glow-gateway:   rgba(5, 150, 105, 0.3);
    --th-glow-frequency: rgba(220, 38, 38, 0.35);
    --th-glow-timeline:  rgba(245, 158, 11, 0.35);
    --th-glow-network:   rgba(217, 119, 6, 0.4);
    --th-glow-seismic:   rgba(185, 28, 28, 0.35);

    --th-border:        rgba(212, 175, 55, 0.10);
    --th-border-subtle: rgba(212, 175, 55, 0.05);
    --th-border-strong: rgba(212, 175, 55, 0.20);
    --th-border-accent: rgba(212, 175, 55, 0.30);

    --th-glow:        rgba(212, 160, 48, 0.18);
    --th-glow-accent: rgba(240, 200, 80, 0.25);
    --th-shadow-sm:   0 2px 8px rgba(10, 8, 6, 0.5);
    --th-shadow-md:   0 8px 24px rgba(10, 8, 6, 0.55);
    --th-shadow-lg:   0 16px 48px rgba(10, 8, 6, 0.6);

    --th-header-bg:     rgba(10, 8, 6, 0.92);
    --th-header-border: rgba(212, 175, 55, 0.12);
    --th-header-blur:   14px;

    --th-logo-start: #996515;
    --th-logo-mid:   #d4a030;
    --th-logo-end:   #f0c850;
    --th-logo-glow:  rgba(212, 175, 55, 0.35);

    --th-hover-bg:       rgba(212, 175, 55, 0.06);
    --th-focus-ring:     rgba(212, 175, 55, 0.5);
    --th-selection-bg:   rgba(212, 175, 55, 0.2);
    --th-selection-text:  #f4ecd8;
    --th-scrollbar-track: #110e0a;
    --th-scrollbar-thumb: #2e2518;

    --th-success: #84cc16;
    --th-warning: #f59e0b;
    --th-danger:  #dc2626;
    --th-info:    #d4a030;

    --th-heading-weight:  700;
    --th-heading-spacing: 0.06em;
    --th-label-spacing:   0.12em;
    --th-transition-speed: 0.2s;

    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   4. GLACIALIS — Ice / Antarctica / Polar Research
   Research station — cool crystalline with aurora pops
   ═══════════════════════════════════════════════════════════════ */
[data-theme="glacialis"] {
    --th-bg-void:          #050a12;
    --th-bg-primary:       #0a1020;
    --th-bg-secondary:     #101828;
    --th-bg-surface:       #162032;
    --th-bg-surface-hover: #1c283e;
    --th-bg-glass:         rgba(10, 16, 32, 0.88);
    --th-bg-glass-strong:  rgba(10, 16, 32, 0.95);

    --th-text-primary:   #d6e4f0;
    --th-text-secondary: #7d9ab5;
    --th-text-muted:     #3d5a78;
    --th-text-heading:   #ecf2f8;
    --th-text-inverse:   #050a12;

    --th-accent:           #38bdf8;
    --th-accent-bright:    #7dd3fc;
    --th-accent-dim:       rgba(56, 189, 248, 0.08);
    --th-accent-secondary: #22d3ee;
    --th-accent-tertiary:  #34d399;

    /* ── ROLE COLORS — Polar research palette ── */
    --th-color-globe:     #22d3ee;  /* bright cyan — polar ocean */
    --th-color-codex:     #a78bfa;  /* aurora violet — northern lights wisdom */
    --th-color-gateway:   #34d399;  /* aurora green — polar gate */
    --th-color-frequency: #0ea5e9;  /* deep ocean blue — ice resonance */
    --th-color-timeline:  #94a3b8;  /* frost grey — ice core layers */
    --th-color-network:   #2dd4bf;  /* seafoam — ocean currents */
    --th-color-sacred:    #e0f2fe;  /* ice crystal white — crystalline */
    --th-color-seismic:   #f87171;  /* warm red — contrast against cold */

    --th-glow-globe:     rgba(34, 211, 238, 0.35);
    --th-glow-codex:     rgba(167, 139, 250, 0.4);
    --th-glow-gateway:   rgba(52, 211, 153, 0.3);
    --th-glow-frequency: rgba(14, 165, 233, 0.35);
    --th-glow-timeline:  rgba(148, 163, 184, 0.35);
    --th-glow-network:   rgba(45, 212, 191, 0.4);
    --th-glow-seismic:   rgba(248, 113, 113, 0.35);

    --th-border:        rgba(56, 189, 248, 0.10);
    --th-border-subtle: rgba(56, 189, 248, 0.04);
    --th-border-strong: rgba(56, 189, 248, 0.18);
    --th-border-accent: rgba(56, 189, 248, 0.28);

    --th-glow:        rgba(56, 189, 248, 0.15);
    --th-glow-accent: rgba(56, 189, 248, 0.25);
    --th-shadow-sm:   0 2px 8px rgba(5, 10, 18, 0.5);
    --th-shadow-md:   0 8px 24px rgba(5, 10, 18, 0.55);
    --th-shadow-lg:   0 16px 48px rgba(5, 10, 18, 0.6);

    --th-header-bg:     rgba(5, 10, 18, 0.92);
    --th-header-border: rgba(56, 189, 248, 0.10);
    --th-header-blur:   18px;

    --th-logo-start: #22d3ee;
    --th-logo-mid:   #38bdf8;
    --th-logo-end:   #ecf2f8;
    --th-logo-glow:  rgba(56, 189, 248, 0.3);

    --th-hover-bg:       rgba(56, 189, 248, 0.06);
    --th-focus-ring:     rgba(56, 189, 248, 0.5);
    --th-selection-bg:   rgba(56, 189, 248, 0.2);
    --th-selection-text:  #ecf2f8;
    --th-scrollbar-track: #0a1020;
    --th-scrollbar-thumb: #1c2e4a;

    --th-success: #34d399;
    --th-warning: #fbbf24;
    --th-danger:  #f87171;
    --th-info:    #38bdf8;

    --th-heading-weight:  400;
    --th-heading-spacing: 0.02em;
    --th-label-spacing:   0.10em;
    --th-transition-speed: 0.15s;

    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   5. AETHER — Cosmic / Ethereal / Nebula
   Deep space transcendence — violets, hot pinks, emerald pops
   ═══════════════════════════════════════════════════════════════ */
[data-theme="aether"] {
    --th-bg-void:          #06050e;
    --th-bg-primary:       #0c0a18;
    --th-bg-secondary:     #131024;
    --th-bg-surface:       #1a162e;
    --th-bg-surface-hover: #221e38;
    --th-bg-glass:         rgba(12, 10, 24, 0.88);
    --th-bg-glass-strong:  rgba(12, 10, 24, 0.95);

    --th-text-primary:   #ddd8f0;
    --th-text-secondary: #9088b8;
    --th-text-muted:     #5a5280;
    --th-text-heading:   #f0ecff;
    --th-text-inverse:   #06050e;

    --th-accent:           #a78bfa;
    --th-accent-bright:    #c4b5fd;
    --th-accent-dim:       rgba(167, 139, 250, 0.10);
    --th-accent-secondary: #34d399;
    --th-accent-tertiary:  #f472b6;

    /* ── ROLE COLORS — Cosmic nebula palette ── */
    --th-color-globe:     #f472b6;  /* nebula pink — cosmic Earth */
    --th-color-codex:     #818cf8;  /* indigo — astral library */
    --th-color-gateway:   #34d399;  /* emerald — dimensional gate */
    --th-color-frequency: #c084fc;  /* bright purple — cosmic vibration */
    --th-color-timeline:  #fb923c;  /* supernova orange — cosmic events */
    --th-color-network:   #2dd4bf;  /* quantum teal — entanglement */
    --th-color-sacred:    #fbbf24;  /* star gold — celestial geometry */
    --th-color-seismic:   #f43f5e;  /* hot pink — cosmic disruption */

    --th-glow-globe:     rgba(244, 114, 182, 0.35);
    --th-glow-codex:     rgba(129, 140, 248, 0.4);
    --th-glow-gateway:   rgba(52, 211, 153, 0.3);
    --th-glow-frequency: rgba(192, 132, 252, 0.35);
    --th-glow-timeline:  rgba(251, 146, 60, 0.35);
    --th-glow-network:   rgba(45, 212, 191, 0.4);
    --th-glow-seismic:   rgba(244, 63, 94, 0.35);

    --th-border:        rgba(167, 139, 250, 0.10);
    --th-border-subtle: rgba(167, 139, 250, 0.04);
    --th-border-strong: rgba(167, 139, 250, 0.18);
    --th-border-accent: rgba(167, 139, 250, 0.28);

    --th-glow:        rgba(167, 139, 250, 0.15);
    --th-glow-accent: rgba(167, 139, 250, 0.30);
    --th-shadow-sm:   0 2px 8px rgba(6, 5, 14, 0.5);
    --th-shadow-md:   0 8px 24px rgba(6, 5, 14, 0.55);
    --th-shadow-lg:   0 16px 48px rgba(6, 5, 14, 0.6);

    --th-header-bg:     rgba(6, 5, 14, 0.92);
    --th-header-border: rgba(167, 139, 250, 0.08);
    --th-header-blur:   14px;

    --th-logo-start: #a78bfa;
    --th-logo-mid:   #f472b6;
    --th-logo-end:   #34d399;
    --th-logo-glow:  rgba(167, 139, 250, 0.35);

    --th-hover-bg:       rgba(167, 139, 250, 0.06);
    --th-focus-ring:     rgba(167, 139, 250, 0.5);
    --th-selection-bg:   rgba(167, 139, 250, 0.2);
    --th-selection-text:  #f0ecff;
    --th-scrollbar-track: #0c0a18;
    --th-scrollbar-thumb: #28224a;

    --th-success: #34d399;
    --th-warning: #fbbf24;
    --th-danger:  #f472b6;
    --th-info:    #a78bfa;

    --th-heading-weight:  400;
    --th-heading-spacing: 0.08em;
    --th-label-spacing:   0.15em;
    --th-transition-speed: 0.25s;

    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   6. POLAR — Ice Sheet / Glacier Interior / Arctic Station
   Pure white expanse. You are inside the ice. Silver instruments,
   pale blue readings, breath-fog transparency. The coldest clarity.
   Everything is precision — surgical, Nordic, zero warmth.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="polar"] {
    /* Backgrounds — ice shelf gradation, almost all white */
    --th-bg-void:          #f0f3f7;
    --th-bg-primary:       #f5f7fa;
    --th-bg-secondary:     #e8ecf2;
    --th-bg-surface:       #ffffff;
    --th-bg-surface-hover: #f8f9fc;
    --th-bg-glass:         rgba(240, 243, 247, 0.88);
    --th-bg-glass-strong:  rgba(245, 247, 250, 0.96);

    /* Text — slate inks on snow */
    --th-text-primary:   #1e293b;
    --th-text-secondary: #64748b;
    --th-text-muted:     #94a3b8;
    --th-text-heading:   #0f172a;
    --th-text-inverse:   #f0f3f7;

    /* Accents — cold steel, no gold */
    --th-accent:           #475569;
    --th-accent-bright:    #334155;
    --th-accent-dim:       rgba(71, 85, 105, 0.06);
    --th-accent-secondary: #0284c7;
    --th-accent-tertiary:  #64748b;

    /* ── ROLE COLORS — Arctic instrument readings ── */
    --th-color-globe:     #0369a1;  /* deep glacier blue */
    --th-color-codex:     #6d28d9;  /* frozen violet */
    --th-color-gateway:   #0891b2;  /* polar cyan */
    --th-color-frequency: #475569;  /* gunmetal — sonar ping */
    --th-color-timeline:  #9f1239;  /* blood on snow — time marks */
    --th-color-network:   #047857;  /* sub-ice green */
    --th-color-sacred:    #1e293b;  /* dark slate — engraved */
    --th-color-seismic:   #b91c1c;  /* emergency red */

    /* Role color glows — extremely subtle on white */
    --th-glow-globe:     rgba(3, 105, 161, 0.08);
    --th-glow-codex:     rgba(109, 40, 217, 0.08);
    --th-glow-gateway:   rgba(8, 145, 178, 0.06);
    --th-glow-frequency: rgba(71, 85, 105, 0.08);
    --th-glow-timeline:  rgba(159, 18, 57, 0.08);
    --th-glow-network:   rgba(4, 120, 87, 0.08);
    --th-glow-seismic:   rgba(185, 28, 28, 0.10);

    /* Borders — pencil-thin dark lines */
    --th-border:        rgba(0, 0, 0, 0.07);
    --th-border-subtle: rgba(0, 0, 0, 0.03);
    --th-border-strong: rgba(0, 0, 0, 0.12);
    --th-border-accent: rgba(71, 85, 105, 0.18);

    /* Glows & Shadows — paper-light */
    --th-glow:        rgba(0, 0, 0, 0.03);
    --th-glow-accent: rgba(3, 105, 161, 0.06);
    --th-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
    --th-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
    --th-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);

    /* Header & Nav — frosted glass on white */
    --th-header-bg:     rgba(240, 243, 247, 0.92);
    --th-header-border: rgba(0, 0, 0, 0.06);
    --th-header-blur:   16px;

    /* Logo gradient — dark slate monochrome */
    --th-logo-start: #94a3b8;
    --th-logo-mid:   #475569;
    --th-logo-end:   #1e293b;
    --th-logo-glow:  rgba(71, 85, 105, 0.08);

    /* Interactive */
    --th-hover-bg:       rgba(0, 0, 0, 0.03);
    --th-focus-ring:     rgba(3, 105, 161, 0.4);
    --th-selection-bg:   rgba(3, 105, 161, 0.12);
    --th-selection-text:  #0f172a;
    --th-scrollbar-track: #f0f3f7;
    --th-scrollbar-thumb: #cbd5e1;

    /* Semantic */
    --th-success: #059669;
    --th-warning: #d97706;
    --th-danger:  #dc2626;
    --th-info:    #0284c7;

    /* Typography — tight, clinical, Nordic */
    --th-heading-weight:  500;
    --th-heading-spacing: 0.02em;
    --th-label-spacing:   0.10em;
    --th-transition-speed: 0.15s;

    color-scheme: light;
}


/* ═══════════════════════════════════════════════════════════════
   7. PAPYRUS — Ancient Archive / Museum Vault / Candlelit Library
   Warm parchment world. You are inside the oldest library ever built.
   Vellum pages, iron-gall ink, gold leaf accents, candlelight warmth.
   Leather bindings, wax seals. The British Museum reading room at dusk.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="papyrus"] {
    /* Backgrounds — aged paper, vellum, leather desk */
    --th-bg-void:          #f5edd8;
    --th-bg-primary:       #efe4cc;
    --th-bg-secondary:     #e6d9be;
    --th-bg-surface:       #faf6ed;
    --th-bg-surface-hover: #f5efe2;
    --th-bg-glass:         rgba(245, 237, 216, 0.90);
    --th-bg-glass-strong:  rgba(245, 237, 216, 0.96);

    /* Text — iron-gall ink, sepia manuscripts */
    --th-text-primary:   #3d2e1a;
    --th-text-secondary: #7a6543;
    --th-text-muted:     #a89570;
    --th-text-heading:   #2a1e0e;
    --th-text-inverse:   #f5edd8;

    /* Accents — gold leaf, copper, antiquarian */
    --th-accent:           #92702a;
    --th-accent-bright:    #b8860b;
    --th-accent-dim:       rgba(146, 112, 42, 0.08);
    --th-accent-secondary: #8b4513;
    --th-accent-tertiary:  #6b3a2a;

    /* ── ROLE COLORS — Archive catalog palette ── */
    --th-color-globe:     #1a5276;  /* atlas blue — old map oceans */
    --th-color-codex:     #6b3a7d;  /* manuscript purple */
    --th-color-gateway:   #1a7a5c;  /* verdigris — aged copper */
    --th-color-frequency: #92702a;  /* gold leaf */
    --th-color-timeline:  #922b21;  /* red wax seal */
    --th-color-network:   #4a7c3f;  /* forest ink */
    --th-color-sacred:    #5d4e37;  /* leather brown */
    --th-color-seismic:   #a93226;  /* vermillion */

    /* Role color glows — candlelight warmth */
    --th-glow-globe:     rgba(26, 82, 118, 0.10);
    --th-glow-codex:     rgba(107, 58, 125, 0.10);
    --th-glow-gateway:   rgba(26, 122, 92, 0.08);
    --th-glow-frequency: rgba(146, 112, 42, 0.12);
    --th-glow-timeline:  rgba(146, 43, 33, 0.10);
    --th-glow-network:   rgba(74, 124, 63, 0.10);
    --th-glow-seismic:   rgba(169, 50, 38, 0.12);

    /* Borders — ink lines on parchment */
    --th-border:        rgba(61, 46, 26, 0.10);
    --th-border-subtle: rgba(61, 46, 26, 0.05);
    --th-border-strong: rgba(61, 46, 26, 0.18);
    --th-border-accent: rgba(146, 112, 42, 0.25);

    /* Glows & Shadows — warm candlelight cast */
    --th-glow:        rgba(146, 112, 42, 0.06);
    --th-glow-accent: rgba(184, 134, 11, 0.10);
    --th-shadow-sm:   0 1px 3px rgba(61, 46, 26, 0.06);
    --th-shadow-md:   0 4px 14px rgba(61, 46, 26, 0.08);
    --th-shadow-lg:   0 10px 30px rgba(61, 46, 26, 0.10);

    /* Header & Nav — parchment glass */
    --th-header-bg:     rgba(245, 237, 216, 0.93);
    --th-header-border: rgba(61, 46, 26, 0.10);
    --th-header-blur:   12px;

    /* Logo gradient — gold to dark brown */
    --th-logo-start: #6b4c14;
    --th-logo-mid:   #92702a;
    --th-logo-end:   #b8860b;
    --th-logo-glow:  rgba(146, 112, 42, 0.12);

    /* Interactive */
    --th-hover-bg:       rgba(61, 46, 26, 0.04);
    --th-focus-ring:     rgba(146, 112, 42, 0.4);
    --th-selection-bg:   rgba(146, 112, 42, 0.15);
    --th-selection-text:  #2a1e0e;
    --th-scrollbar-track: #efe4cc;
    --th-scrollbar-thumb: #c9b896;

    /* Semantic */
    --th-success: #4a7c3f;
    --th-warning: #b8860b;
    --th-danger:  #a93226;
    --th-info:    #1a5276;

    /* Typography — warm, generous, old-world */
    --th-heading-weight:  600;
    --th-heading-spacing: 0.06em;
    --th-label-spacing:   0.12em;
    --th-transition-speed: 0.2s;

    color-scheme: light;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME COMPONENT OVERRIDES
   Cards, panels, and glass need inverted treatment on light bg
   ═══════════════════════════════════════════════════════════════ */

/* Nav buttons — override JS-injected rgba(220,215,205) cream text */
[data-theme="polar"] .unified-nav-btn,
[data-theme="polar"] .unified-nav-brand,
[data-theme="papyrus"] .unified-nav-btn,
[data-theme="papyrus"] .unified-nav-brand {
    color: var(--th-text-secondary) !important;
}
[data-theme="polar"] .unified-nav-btn:hover,
[data-theme="papyrus"] .unified-nav-btn:hover {
    color: var(--th-text-primary) !important;
    background: var(--th-hover-bg) !important;
}
[data-theme="polar"] .unified-nav-btn.active,
[data-theme="papyrus"] .unified-nav-btn.active {
    color: var(--th-accent-secondary) !important;
}
[data-theme="polar"] .unified-nav-btn .nav-icon svg,
[data-theme="papyrus"] .unified-nav-btn .nav-icon svg {
    stroke: var(--th-text-muted) !important;
}
[data-theme="polar"] .header-actions button,
[data-theme="polar"] .header-actions a,
[data-theme="papyrus"] .header-actions button,
[data-theme="papyrus"] .header-actions a {
    color: var(--th-text-secondary) !important;
}

/* Hide ambient orbs on light themes */
[data-theme="polar"] .ambient-orbs,
[data-theme="papyrus"] .ambient-orbs {
    display: none !important;
}

/* Stat metrics bar */
[data-theme="polar"] .research-metrics,
[data-theme="papyrus"] .research-metrics {
    background: var(--th-bg-secondary) !important;
    border-color: var(--th-border) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04) !important;
    backdrop-filter: none !important;
}

[data-theme="polar"] .research-metrics .metric,
[data-theme="papyrus"] .research-metrics .metric {
    background: var(--th-bg-surface) !important;
    border-color: var(--th-border) !important;
    box-shadow: var(--th-shadow-sm) !important;
}

[data-theme="polar"] .research-metrics .metric-num,
[data-theme="papyrus"] .research-metrics .metric-num {
    color: var(--th-text-heading) !important;
    text-shadow: none !important;
}

[data-theme="polar"] .research-metrics .metric-sep,
[data-theme="papyrus"] .research-metrics .metric-sep {
    background: var(--th-border) !important;
}

/* Featured cards — light bg, keep accent colors from main.css per-card rules */
[data-theme="polar"] .featured-card,
[data-theme="papyrus"] .featured-card {
    background: var(--th-bg-surface) !important;
    border: 1px solid var(--th-border) !important;
    box-shadow: var(--th-shadow-md) !important;
}
[data-theme="polar"] .featured-card::before,
[data-theme="papyrus"] .featured-card::before {
    display: none !important;
}
[data-theme="polar"] .featured-card:hover,
[data-theme="papyrus"] .featured-card:hover {
    box-shadow: var(--th-shadow-lg) !important;
    border-color: var(--th-border-strong) !important;
}
/* Card description text readable on light */
[data-theme="polar"] .featured-info p,
[data-theme="papyrus"] .featured-info p {
    color: var(--th-text-secondary) !important;
}
[data-theme="polar"] .featured-tag,
[data-theme="papyrus"] .featured-tag {
    color: var(--th-text-muted) !important;
    border-color: var(--th-border) !important;
}
[data-theme="polar"] .featured-launch,
[data-theme="papyrus"] .featured-launch {
    color: var(--th-text-secondary) !important;
    border-color: var(--th-border-strong) !important;
}

/* Soften dark preview areas — frosted veil over dark visualizations */
[data-theme="polar"] .featured-preview,
[data-theme="polar"] .featured-preview-live {
    position: relative;
}
[data-theme="polar"] .featured-preview::after,
[data-theme="polar"] .featured-preview-live::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(240,243,247,0.18) 0%, rgba(240,243,247,0.06) 40%, rgba(240,243,247,0.12) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: lighten;
}

[data-theme="papyrus"] .featured-preview,
[data-theme="papyrus"] .featured-preview-live {
    position: relative;
}
[data-theme="papyrus"] .featured-preview::after,
[data-theme="papyrus"] .featured-preview-live::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245,237,216,0.20) 0%, rgba(245,237,216,0.06) 40%, rgba(245,237,216,0.14) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: lighten;
}

/* Viz grid cards */
[data-theme="polar"] .viz-card,
[data-theme="papyrus"] .viz-card {
    box-shadow: var(--th-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    border-color: var(--th-border) !important;
    backdrop-filter: none !important;
}

[data-theme="polar"] .viz-card:hover,
[data-theme="papyrus"] .viz-card:hover {
    box-shadow: var(--th-shadow-md), inset 0 1px 0 rgba(255,255,255,0.7) !important;
    border-color: var(--th-border-strong) !important;
}

/* Insight cards */
[data-theme="polar"] .insight-card,
[data-theme="papyrus"] .insight-card {
    box-shadow: var(--th-shadow-sm) !important;
}

/* Reading cards */
[data-theme="polar"] .reading-card,
[data-theme="papyrus"] .reading-card {
    box-shadow: var(--th-shadow-sm) !important;
}

/* Seismic ticker */
[data-theme="polar"] .alert-ticker,
[data-theme="papyrus"] .alert-ticker {
    background: var(--th-bg-surface) !important;
}

/* Theme picker dropdown — light version */
[data-theme="polar"] .theme-picker-options,
[data-theme="papyrus"] .theme-picker-options {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--th-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="polar"] .theme-dot:hover::after,
[data-theme="papyrus"] .theme-dot:hover::after {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--th-text-primary) !important;
    border-color: var(--th-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY VARIABLE BRIDGING
   Maps old variable names to theme tokens for backward compat
   Now includes role-color bridging for multicolor accents
   ═══════════════════════════════════════════════════════════════ */
[data-theme] {
    /* design-system.css legacy */
    --void-black:     var(--th-bg-void);
    --charcoal:       var(--th-bg-primary);
    --deep-space:     var(--th-bg-void);
    --parchment:      var(--th-text-primary);
    --ancient-cream:  var(--th-text-secondary);
    --aged-gold:      var(--th-accent);
    --panel-bg:       var(--th-bg-glass-strong);
    --panel-glass:    var(--th-bg-glass);
    --panel-border:   var(--th-border);
    --text-primary:   var(--th-text-primary);
    --text-secondary: var(--th-text-secondary);
    --text-muted:     var(--th-text-muted);
    --surface-highlight: var(--th-hover-bg);
    --shadow-sm:      var(--th-shadow-sm);
    --shadow-md:      var(--th-shadow-md);
    --shadow-lg:      var(--th-shadow-lg);

    /* ── MULTICOLOR ACCENT BRIDGING — restores per-viz color diversity ── */
    --accent-globe:       var(--th-color-globe);
    --accent-codex:       var(--th-color-codex);
    --accent-gateway:     var(--th-color-gateway);
    --accent-frequencies: var(--th-color-frequency);
    --accent-timeline:    var(--th-color-timeline);
    --accent-network:     var(--th-color-network);

    /* ── MULTICOLOR GLOW BRIDGING ── */
    --glow-gold:   var(--th-glow-accent);
    --glow-green:  var(--th-glow-network);
    --glow-violet: var(--th-glow-codex);
    --glow-blue:   var(--th-glow-gateway);

    /* main.css legacy (light theme vars → dark) */
    --primary-bg:     var(--th-bg-void);
    --secondary-bg:   var(--th-bg-secondary);
    --surface-bg:     var(--th-bg-surface);
    --accent-color:   var(--th-accent);
    --accent-strong:  var(--th-accent-bright);
    --glow-color:     var(--th-glow-accent);

    /* magna-theme.css legacy */
    --magna-gold:      var(--th-accent);
    --magna-gold-light: var(--th-accent-bright);
    --magna-obsidian:  var(--th-bg-void);
    --magna-papyrus:   var(--th-text-heading);
    --magna-glow:      var(--th-glow-accent);

    /* globe page legacy */
    --hud-bg:            var(--th-bg-glass);
    --hud-bg-solid:      var(--th-bg-glass-strong);
    --hud-border:        var(--th-border);
    --hud-border-bright: var(--th-border-strong);
    --hud-glow:          var(--th-glow);
    --accent:            var(--th-accent);
    --accent-dim:        var(--th-accent-dim);
    --accent-teal:       var(--th-accent-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES
   Theme flows through UI components with role-specific colors
   ═══════════════════════════════════════════════════════════════ */

/* ── Body ── */
[data-theme] body,
[data-theme] body.magna-theme {
    background: var(--th-bg-void) !important;
    color: var(--th-text-primary);
}

/* ── Text selection ── */
[data-theme] ::selection {
    background: var(--th-selection-bg);
    color: var(--th-selection-text);
}

/* ── Scrollbar ── */
[data-theme] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
[data-theme] ::-webkit-scrollbar-track {
    background: var(--th-scrollbar-track);
}
[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--th-scrollbar-thumb);
    border-radius: 3px;
}
[data-theme] ::-webkit-scrollbar-thumb:hover {
    background: var(--th-accent-secondary);
}
[data-theme] {
    scrollbar-color: var(--th-scrollbar-thumb) var(--th-scrollbar-track);
}

[data-theme] body.magna-theme .header-titles h1 {
    background: linear-gradient(
        90deg,
        var(--th-logo-start) 0%,
        var(--th-logo-mid) 45%,
        var(--th-logo-end) 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme] .header-titles h1 {
    background: linear-gradient(
        90deg,
        var(--th-logo-start) 0%,
        var(--th-logo-mid) 45%,
        var(--th-logo-end) 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Nav buttons ── */
[data-theme] .nav-btn {
    color: var(--th-text-secondary);
}
[data-theme] .nav-btn:hover {
    color: var(--th-text-primary);
    background: var(--th-hover-bg);
    border-color: var(--th-border-strong);
}
[data-theme] .nav-btn.active {
    color: var(--th-accent);
    border-bottom-color: var(--th-accent);
}

/* ── Research Metrics Bar — let main.css handle styling ── */
[data-theme] .research-metrics {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme] .research-metrics .metric {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme] .research-metrics .metric-num {
    color: var(--m-accent, var(--th-accent)) !important;
}
[data-theme] .research-metrics .metric-label {
    color: rgba(200, 195, 180, 0.45) !important;
}
[data-theme] .metric-sep {
    background: var(--th-border) !important;
}

/* ── Section Headings — with role-color accents ── */
[data-theme] .dashboard-featured h2,
[data-theme] .dashboard-grid h2,
[data-theme] .dashboard-reading h2,
[data-theme] .dashboard-insights h2 {
    color: var(--th-text-heading);
    font-weight: var(--th-heading-weight);
    letter-spacing: var(--th-heading-spacing);
}

/* ── Dashboard Section Spacing ── */
[data-theme] .dashboard-featured,
[data-theme] .dashboard-grid,
[data-theme] .dashboard-reading,
[data-theme] .dashboard-insights {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Section dividers — subtle gradient lines */
[data-theme] .dashboard-grid,
[data-theme] .dashboard-reading,
[data-theme] .dashboard-insights {
    border-top: 1px solid transparent;
    background-image: linear-gradient(var(--th-bg-void), var(--th-bg-void)),
                      linear-gradient(90deg, transparent 10%, var(--th-border-strong) 40%, var(--th-accent-dim) 50%, var(--th-border-strong) 60%, transparent 90%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED CARDS — Each gets its own role color
   Card order: Globe, Tech Map, Signal, Frequency Lab
   ═══════════════════════════════════════════════════════════════ */
[data-theme] .featured-card {
    background: var(--th-bg-surface) !important;
    border: none !important;
    --card-accent: var(--th-accent);
}

/* Assign role colors to each featured card */
[data-theme] .featured-card:nth-child(1) { --card-accent: var(--th-color-globe); }
[data-theme] .featured-card:nth-child(2) { --card-accent: var(--th-color-timeline); }
[data-theme] .featured-card:nth-child(3) { --card-accent: var(--th-color-frequency); }
[data-theme] .featured-card:nth-child(4) { --card-accent: var(--th-color-frequency); }

[data-theme] .featured-card:hover {
    border: none !important;
    box-shadow: none !important;
}
/* featured h3 colors set per-card in main.css — don't override */
[data-theme] .featured-info p {
    color: var(--th-text-secondary) !important;
}
[data-theme] .featured-tag {
    background: var(--th-accent-dim) !important;
    color: var(--card-accent) !important;
    border-color: transparent !important;
}
[data-theme] .featured-launch {
    color: var(--card-accent) !important;
    border-color: var(--th-border-accent) !important;
}
[data-theme] .featured-launch:hover {
    background: var(--th-hover-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   VIZ GRID CARDS — Cycling role colors for visual diversity
   Order: Timeline, Frequency, Codex, Gateway, Globe, Tech Map
   ═══════════════════════════════════════════════════════════════ */
[data-theme] .viz-card {
    background: var(--th-bg-surface) !important;
    border: none !important;
    --card-accent: var(--th-accent);
}

/* Cycle through role colors */
[data-theme] .viz-card:nth-child(6n+1) { --card-accent: var(--th-color-timeline); }
[data-theme] .viz-card:nth-child(6n+2) { --card-accent: var(--th-color-frequency); }
[data-theme] .viz-card:nth-child(6n+3) { --card-accent: var(--th-color-codex); }
[data-theme] .viz-card:nth-child(6n+4) { --card-accent: var(--th-color-gateway); }
[data-theme] .viz-card:nth-child(6n+5) { --card-accent: var(--th-color-globe); }
[data-theme] .viz-card:nth-child(6n+6) { --card-accent: var(--th-color-network); }

/* Diamond-cut corner glow inherits card accent color */
[data-theme] .viz-card {
    --viz-accent: var(--card-accent);
}
[data-theme] .viz-card:hover {
    border: none !important;
    box-shadow: none !important;
    background: var(--th-bg-surface-hover) !important;
}
[data-theme] .viz-card h4 {
    color: var(--th-text-heading) !important;
}
[data-theme] .viz-card p {
    color: var(--th-text-secondary) !important;
}
[data-theme] .viz-card-type {
    color: var(--card-accent) !important;
    opacity: 0.7;
}
[data-theme] .viz-card-icon {
    color: var(--card-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   READING CARDS — Preserve inline --accent custom properties
   Each card has its own color identity — DON'T override it
   ═══════════════════════════════════════════════════════════════ */
[data-theme] .reading-card {
    background: var(--th-bg-surface) !important;
    border-top: 2px solid var(--accent, var(--th-accent)) !important;
    border-left: 1px solid var(--th-border) !important;
    border-right: 1px solid var(--th-border) !important;
    border-bottom: 1px solid var(--th-border) !important;
    border-radius: 24px 24px 6px 6px !important;
}
[data-theme] .reading-card:hover {
    border-top: 2px solid var(--accent, var(--th-accent)) !important;
    border-left: 1px solid var(--th-border) !important;
    border-right: 1px solid var(--th-border) !important;
    border-bottom: 1px solid var(--th-border) !important;
    border-radius: 24px 24px 6px 6px !important;
    box-shadow: none !important;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)) drop-shadow(0 0 12px color-mix(in srgb, var(--accent, var(--th-accent)) 15%, transparent));
}
/* Let the card's own --accent color through for these elements */
[data-theme] .reading-chapter {
    color: var(--accent, var(--th-accent)) !important;
}
[data-theme] .reading-card h4 {
    color: var(--th-text-heading) !important;
}
[data-theme] .reading-card p {
    color: var(--th-text-secondary) !important;
}
[data-theme] .reading-cta {
    color: var(--accent, var(--th-accent)) !important;
}
[data-theme] .reading-begin {
    color: var(--th-accent) !important;
    border-color: var(--th-border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHT CARDS — Preserve gradient numbers, theme the surfaces
   Each card has its own gradient color (red, amber, cyan)
   ═══════════════════════════════════════════════════════════════ */
[data-theme] .insight-card {
    background: var(--th-bg-surface) !important;
    border: none !important;
    position: relative;
}
/* Per-card accent colors for hexagonal glow */
[data-theme] .insight-card:nth-child(1) { --insight-color: var(--th-color-timeline); --insight-glow: var(--th-color-timeline); }
[data-theme] .insight-card:nth-child(2) { --insight-color: var(--th-color-frequency); --insight-glow: var(--th-color-frequency); }
[data-theme] .insight-card:nth-child(3) { --insight-color: var(--th-color-globe); --insight-glow: var(--th-color-globe); }

/* Hexagonal radial glow — replaces old bottom gradient line */
[data-theme] .insight-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--insight-color, var(--th-accent)) 12%, transparent), transparent 70%) !important;
    clip-path: inherit;
    pointer-events: none;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}

/* DON'T override insight-number — let the original gradient colors survive */
/* The design-system.css nth-child gradients take precedence */
[data-theme] .insight-text {
    color: var(--th-text-secondary) !important;
}

/* ── Globe Page: Stats Bar ── */
[data-theme] #stats {
    background: var(--th-header-bg) !important;
    border-bottom-color: var(--th-header-border) !important;
    backdrop-filter: blur(var(--th-header-blur)) !important;
}
[data-theme] #stats .stat {
    background: var(--th-bg-surface) !important;
    border-color: var(--th-border) !important;
    /* text color NEVER overridden — these are the map legend key */
}
[data-theme] #stats .stat:hover {
    background: var(--th-bg-surface-hover) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme] .globe-brand-title {
    color: var(--th-text-heading) !important;
}

/* ── Globe Page: Control Panel ── */
[data-theme] #control-panel {
    background: var(--th-bg-glass) !important;
    border-color: var(--th-border) !important;
}
[data-theme] #control-panel label {
    color: var(--th-text-secondary) !important;
}

/* ── Globe Page: Node Info Panel ── */
[data-theme] #node-info {
    background: var(--th-bg-glass-strong) !important;
    border-color: var(--th-border) !important;
}
[data-theme] #node-info h3 {
    color: var(--th-text-heading) !important;
}
[data-theme] #node-info p {
    color: var(--th-text-primary) !important;
}
[data-theme] #node-info .coords {
    color: var(--th-text-secondary) !important;
}

/* ── Globe Page: Hover Tooltip ── */
[data-theme] .globe-hover-tooltip {
    background: var(--th-bg-glass-strong) !important;
    border-color: var(--th-border-accent) !important;
    color: var(--th-text-primary) !important;
}

/* ── Globe Page: Legend ── */
/* Use --th-bg-void (solid body color) so the bar reads as continuous with the
   page bg — was --th-bg-glass which is bluish + 88% transparent and clipped
   to a different black on iOS. */
[data-theme] #legend {
    background: var(--th-bg-void) !important;
    border-color: var(--th-border) !important;
}

/* ── Globe Page: Live Earth HUD ── */
[data-theme] #live-earth-hud {
    background: var(--th-bg-glass) !important;
    border-color: var(--th-border) !important;
}

/* ── Buttons (general) ── */
[data-theme] .btn-primary,
[data-theme] .path-btn.primary {
    background: var(--th-accent) !important;
    color: var(--th-text-inverse) !important;
}
[data-theme] .btn-secondary,
[data-theme] .path-btn.secondary {
    background: transparent !important;
    border-color: var(--th-accent) !important;
    color: var(--th-accent) !important;
}

/* ── Focus ring ── */
[data-theme] *:focus-visible {
    outline: 2px solid var(--th-focus-ring);
    outline-offset: 2px;
}

/* ── Links ── */
[data-theme] a:not([class]) {
    color: var(--th-accent);
}

/* ── HUD labels (globe page) ── */
[data-theme] .stat-divider {
    background: var(--th-border) !important;
}

/* ── Sound controls — Frequency Sigil (no borders) ── */
[data-theme] #sound-toggle {
    border: none !important;
    background: none !important;
}
[data-theme] #sound-toggle.active {
    color: var(--th-accent, var(--nav-active, #d4af37)) !important;
}

/* ── Mobile Layer Bar ── */
[data-theme] #mobile-layer-bar {
    background: var(--th-bg-glass-strong) !important;
    border-color: var(--th-border) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SPACING & BREATHING ROOM
   Break the dense rectangle grid with generous white space
   ═══════════════════════════════════════════════════════════════ */

/* Increase grid gaps */
[data-theme] .featured-grid {
    gap: 24px !important;
}
[data-theme] .viz-grid {
    gap: 16px !important;
}
[data-theme] .reading-grid {
    gap: 20px !important;
}
[data-theme] .insights-grid {
    gap: 24px !important;
}

/* Card internal padding boost */
[data-theme] .featured-info {
    padding: 20px 24px !important;
}
[data-theme] .viz-card {
    padding: 22px 26px !important;
}
[data-theme] .reading-card {
    padding: 26px 24px 22px !important;
}
[data-theme] .insight-card {
    padding: 32px 24px !important;
}


/* ═══════════════════════════════════════════════════════════════
   THEME TRANSITION
   Applied briefly during theme switch for smooth animation
   ═══════════════════════════════════════════════════════════════ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 0.4s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.4s ease,
        opacity 0.3s ease !important;
}


/* ═══════════════════════════════════════════════════════════════
   THEME PICKER UI — Inline in navbar
   Sits at the end of .unified-nav-scroll or .header-actions
   ═══════════════════════════════════════════════════════════════ */
.theme-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 200;
    margin-left: 0.25rem;
}

.theme-picker-trigger {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(184, 168, 152, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
}
.theme-picker-trigger:hover {
    border-color: var(--th-accent, #d4af37);
    background: rgba(255, 255, 255, 0.04);
    transform: scale(1.1);
}
.theme-picker-trigger svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: rgba(220, 215, 205, 0.7);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.25s ease;
}
.theme-picker-trigger:hover svg {
    stroke: var(--th-accent, #d4af37);
}

/* Dropdown — opens downward */
.theme-picker-options {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(8, 8, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 168, 152, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(184, 168, 152, 0.06);
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}
.theme-picker.open .theme-picker-options {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
}
.theme-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
}
.theme-dot:hover {
    transform: scale(1.3);
}
.theme-dot:hover::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 9px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-text-secondary, rgba(220,215,205,0.6));
    background: rgba(8, 8, 12, 0.95);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(184, 168, 152, 0.1);
    pointer-events: none;
    z-index: 10;
}
.theme-dot.active {
    border-color: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* Dot colors — hardcoded, not theme-dependent */
.theme-dot[data-theme="obsidian"]  { color: #a0aec0; }
.theme-dot[data-theme="obsidian"]::before  { background: #a0aec0; }
.theme-dot[data-theme="terra"]     { color: #4ade80; }
.theme-dot[data-theme="terra"]::before     { background: #4ade80; }
.theme-dot[data-theme="solaris"]   { color: #d4a030; }
.theme-dot[data-theme="solaris"]::before   { background: #d4a030; }
.theme-dot[data-theme="glacialis"] { color: #38bdf8; }
.theme-dot[data-theme="glacialis"]::before { background: #38bdf8; }
.theme-dot[data-theme="aether"]    { color: #a78bfa; }
.theme-dot[data-theme="aether"]::before    { background: #a78bfa; }
.theme-dot[data-theme="polar"] { color: #94a3b8; }
.theme-dot[data-theme="polar"]::before { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); border: 1px solid rgba(0,0,0,0.08); }
.theme-dot[data-theme="papyrus"]  { color: #92702a; }
.theme-dot[data-theme="papyrus"]::before  { background: linear-gradient(135deg, #d4a030, #f5e6c8); border: 1px solid rgba(0,0,0,0.08); }

/* When inside header-actions — no extra margin needed */
.header-actions > .theme-picker {
    margin-left: 0;
}

@media (max-width: 768px) {
    .theme-picker {
        margin-left: 0;
    }
    .theme-picker-trigger {
        width: 22px;
        height: 22px;
    }
    .theme-dot {
        width: 20px;
        height: 20px;
    }
    .theme-picker-options {
        right: -8px;
    }
}