/**
 * 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;
}


/* ═══════════════════════════════════════════════════════════════
   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);
}

/* ── Header / Nav ── */
[data-theme] .athenaeum-header,
[data-theme] body.magna-theme .athenaeum-header {
    background: var(--th-header-bg) !important;
    border-bottom: none !important; /* unified-nav litho-rule handles separator */
    backdrop-filter: blur(var(--th-header-blur)) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(var(--th-header-blur)) saturate(1.2) !important;
}

[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 ── */
[data-theme] .research-metrics {
    background: var(--th-bg-surface) !important;
    border-color: var(--th-border) !important;
}
[data-theme] .metric-num {
    color: var(--th-accent) !important;
}
[data-theme] .metric-label {
    color: var(--th-text-secondary) !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 ── */
[data-theme] #legend {
    background: var(--th-bg-glass) !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;
}

/* ── Seismic Ticker — preserves its red identity ── */
[data-theme] .seismic-ticker {
    background: var(--th-bg-surface) !important;
    border-color: var(--th-glow-seismic) !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: 22% 16% 18% !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: 30px;
    height: 30px;
    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: 15px;
    height: 15px;
    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; }

/* When inside the header directly (no nav) — tuck into flex row */
.athenaeum-header > .theme-picker {
    margin-left: auto;
    margin-right: 0.5rem;
}

/* 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: 28px;
        height: 28px;
    }
    .theme-dot {
        width: 20px;
        height: 20px;
    }
    .theme-picker-options {
        right: -8px;
    }
}