/* ============================================================
   ECHOES — Interchangeable Theme System
   5 themes, each with its own complete palette
   ============================================================ */

:root[data-theme="void"], :root {
  /* Voidmere — Deep space arcane */
  --bg-base:        #0B0617;
  --bg-surface:     #130E28;
  --bg-card:        #1E1540;
  --bg-elevated:    #2A1D5C;
  --bg-hover:       #351F72;

  --accent-a:       #8B5CF6;
  --accent-a-light: #A78BFA;
  --accent-a-dim:   #4C1D95;
  --accent-b:       #06B6D4;
  --accent-b-light: #22D3EE;
  --accent-b-dim:   #0E4A5C;
  --accent-gold:    #D4B896;
  --accent-gold-v:  #F0D9B5;
  --accent-danger:  #F43F5E;
  --accent-success: #10B981;
  --accent-warning: #F59E0B;

  --text-primary:   #EDE9FE;
  --text-secondary: #A5B4FC;
  --text-muted:     #6B7280;
  --text-faint:     #3D3558;

  --border:         #2E1E6A;
  --border-light:   #3D2A8A;
  --border-glow:    rgba(139,92,246,0.4);

  --glow-a:         0 0 24px rgba(139,92,246,0.35);
  --glow-b:         0 0 20px rgba(6,182,212,0.25);
  --glow-danger:    0 0 20px rgba(244,63,94,0.3);

  --shadow-card:    0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(139,92,246,0.1);
  --shadow-modal:   0 25px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(139,92,246,0.2);

  --post-narrative: #1E1540;
  --post-action:    #0F2A38;
  --post-dialogue:  #1A2210;
  --post-system:    #1A0F30;
  --post-dm-only:   #2A1208;
  --post-combat:    #2A0808;

  --font-display:   'Cinzel', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  --radius-sm:      3px;
  --radius-md:      5px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-full:    9999px;

  --sidebar-width:  220px;
  --transition:     0.18s ease;
}

:root[data-theme="embertide"] {
  --bg-base:        #100504;
  --bg-surface:     #1C0A07;
  --bg-card:        #2C1009;
  --bg-elevated:    #481507;
  --bg-hover:       #5E1A08;

  --accent-a:       #EA580C;
  --accent-a-light: #FB923C;
  --accent-a-dim:   #7C2D12;
  --accent-b:       #DC2626;
  --accent-b-light: #F87171;
  --accent-b-dim:   #7F1D1D;
  --accent-gold:    #FBBF24;
  --accent-gold-v:  #FDE68A;
  --accent-danger:  #BE123C;
  --accent-success: #15803D;
  --accent-warning: #D97706;

  --text-primary:   #FEF3C7;
  --text-secondary: #FCA5A5;
  --text-muted:     #9CA3AF;
  --text-faint:     #3B1F1A;

  --border:         #7C2D12;
  --border-light:   #9A3412;
  --border-glow:    rgba(234,88,12,0.4);

  --glow-a:         0 0 24px rgba(234,88,12,0.4);
  --glow-b:         0 0 20px rgba(220,38,38,0.3);
  --glow-danger:    0 0 20px rgba(190,18,60,0.35);

  --shadow-card:    0 4px 24px rgba(0,0,0,0.6), 0 1px 0 rgba(234,88,12,0.1);
  --shadow-modal:   0 25px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(234,88,12,0.2);

  --post-narrative: #2C1009;
  --post-action:    #3A0E08;
  --post-dialogue:  #2A1406;
  --post-system:    #1A0A04;
  --post-dm-only:   #3A0808;
  --post-combat:    #4A0808;
}

:root[data-theme="deepwater"] {
  --bg-base:        #030D16;
  --bg-surface:     #061420;
  --bg-card:        #092235;
  --bg-elevated:    #0C3350;
  --bg-hover:       #0E4265;

  --accent-a:       #0EA5E9;
  --accent-a-light: #38BDF8;
  --accent-a-dim:   #075985;
  --accent-b:       #7C3AED;
  --accent-b-light: #A78BFA;
  --accent-b-dim:   #4C1D95;
  --accent-gold:    #D4AF37;
  --accent-gold-v:  #F0D080;
  --accent-danger:  #EF4444;
  --accent-success: #059669;
  --accent-warning: #D97706;

  --text-primary:   #E0F2FE;
  --text-secondary: #7DD3FC;
  --text-muted:     #64748B;
  --text-faint:     #0A2540;

  --border:         #075985;
  --border-light:   #0284C7;
  --border-glow:    rgba(14,165,233,0.4);

  --glow-a:         0 0 24px rgba(14,165,233,0.4);
  --glow-b:         0 0 20px rgba(124,58,237,0.25);
  --glow-danger:    0 0 20px rgba(239,68,68,0.3);

  --shadow-card:    0 4px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(14,165,233,0.1);
  --shadow-modal:   0 25px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(14,165,233,0.2);

  --post-narrative: #092235;
  --post-action:    #0A2A40;
  --post-dialogue:  #091C35;
  --post-system:    #071020;
  --post-dm-only:   #100930;
  --post-combat:    #240818;
}

:root[data-theme="grovewick"] {
  --bg-base:        #040A05;
  --bg-surface:     #081209;
  --bg-card:        #0E1F10;
  --bg-elevated:    #152C18;
  --bg-hover:       #1B3820;

  --accent-a:       #16A34A;
  --accent-a-light: #4ADE80;
  --accent-a-dim:   #14532D;
  --accent-b:       #D97706;
  --accent-b-light: #FCD34D;
  --accent-b-dim:   #78350F;
  --accent-gold:    #B45309;
  --accent-gold-v:  #FDE68A;
  --accent-danger:  #DC2626;
  --accent-success: #059669;
  --accent-warning: #D97706;

  --text-primary:   #DCFCE7;
  --text-secondary: #86EFAC;
  --text-muted:     #6B7280;
  --text-faint:     #0A1F0C;

  --border:         #166534;
  --border-light:   #15803D;
  --border-glow:    rgba(22,163,74,0.4);

  --glow-a:         0 0 24px rgba(22,163,74,0.4);
  --glow-b:         0 0 20px rgba(217,119,6,0.3);
  --glow-danger:    0 0 20px rgba(220,38,38,0.3);

  --shadow-card:    0 4px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(22,163,74,0.1);
  --shadow-modal:   0 25px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(22,163,74,0.2);

  --post-narrative: #0E1F10;
  --post-action:    #102018;
  --post-dialogue:  #0C1C0E;
  --post-system:    #080F09;
  --post-dm-only:   #1A100A;
  --post-combat:    #1C0808;
}

:root[data-theme="ironveil"] {
  --bg-base:        #0D0F14;
  --bg-surface:     #13161E;
  --bg-card:        #1C2028;
  --bg-elevated:    #252B36;
  --bg-hover:       #2E3542;

  --accent-a:       #C084FC;
  --accent-a-light: #D8B4FE;
  --accent-a-dim:   #581C87;
  --accent-b:       #38BDF8;
  --accent-b-light: #7DD3FC;
  --accent-b-dim:   #0C4A6E;
  --accent-gold:    #F59E0B;
  --accent-gold-v:  #FDE68A;
  --accent-danger:  #FF6B6B;
  --accent-success: #3DD68C;
  --accent-warning: #FBBF24;

  --text-primary:   #E6EDF3;
  --text-secondary: #8B949E;
  --text-muted:     #6E7681;
  --text-faint:     #1C2028;

  --border:         #30363D;
  --border-light:   #444C56;
  --border-glow:    rgba(192,132,252,0.3);

  --glow-a:         0 0 24px rgba(192,132,252,0.3);
  --glow-b:         0 0 20px rgba(56,189,248,0.2);
  --glow-danger:    0 0 20px rgba(255,107,107,0.3);

  --shadow-card:    0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(192,132,252,0.08);
  --shadow-modal:   0 25px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(192,132,252,0.15);

  --post-narrative: #1C2028;
  --post-action:    #1A2530;
  --post-dialogue:  #181E28;
  --post-system:    #141820;
  --post-dm-only:   #1E1825;
  --post-combat:    #221618;
}

:root[data-theme="ashglass"] {
  /* Ashglass — cool slate, editorial, modern dark */
  --bg-base:        #111214;
  --bg-surface:     #17191C;
  --bg-card:        #1E2124;
  --bg-elevated:    #262A2F;
  --bg-hover:       #2E3338;

  --accent-a:       #2DD4BF;
  --accent-a-light: #5EEAD4;
  --accent-a-dim:   #0F3D38;
  --accent-b:       #818CF8;
  --accent-b-light: #A5B4FC;
  --accent-b-dim:   #1E2154;
  --accent-gold:    #D4AF37;
  --accent-gold-v:  #FDE68A;
  --accent-danger:  #F87171;
  --accent-success: #34D399;
  --accent-warning: #FBBF24;

  --text-primary:   #E4E8ED;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-faint:     #1E2428;

  --border:         #23272C;
  --border-light:   #2E3440;
  --border-glow:    rgba(45,212,191,0.3);

  --glow-a:         0 0 20px rgba(45,212,191,0.28);
  --glow-b:         0 0 18px rgba(129,140,248,0.2);
  --glow-danger:    0 0 18px rgba(248,113,113,0.28);

  --shadow-card:    0 2px 16px rgba(0,0,0,0.5), 0 1px 0 rgba(45,212,191,0.06);
  --shadow-modal:   0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(45,212,191,0.12);

  --post-narrative: #1A1D21;
  --post-action:    #181E26;
  --post-dialogue:  #161D1E;
  --post-system:    #141618;
  --post-dm-only:   #1E1A14;
  --post-combat:    #1E1616;
}

/* Smooth theme transitions */
*, *::before, *::after {
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}