/* ══════════════════════════════════════════════════════
   Patched — Global Theme System
   5 themes: Ghost (default), OG Mint, Synthwave, Ember, Cryo
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font), sans-serif;
  overflow: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── GHOST (Default) ─────────────────────────────────
   Monochrome silver — clean and neutral
   ──────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg: #080808;
  --bg2: #0e0e0e;
  --surface-1: #121212;
  --surface-2: #181818;
  --surface-3: #1e1e1e;

  /* Accent */
  --accent: #c8c8c8;
  --accent-dim: rgba(200,200,200,0.08);
  --accent-glow: 0 0 10px rgba(200,200,200,0.6), 0 0 30px rgba(200,200,200,0.3);

  /* Text */
  --text: #f0f0f0;
  --text-muted: #555;
  --label: #888;

  /* Cards */
  --card-border: rgba(200,200,200,0.25);
  --card-shadow: 0 0 40px rgba(180,180,180,0.08), 0 0 80px rgba(140,140,140,0.04);

  /* Form elements */
  --input-bg: #0a0a0a;
  --input-border: rgba(200,200,200,0.12);

  /* Interactive */
  --tab-active-bg: #1c1c1c;
  --tab-inactive: #111;
  --btn-bg: #0c0c0c;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Fonts */
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Exo 2', sans-serif;
  --label-font: 'IBM Plex Mono', monospace;
}

/* ── Module-specific CSS variables (inherit from base vars by default) ──────
   Custom themes can override these individually without affecting other themes.
   All view-specific vars fall back to base vars so existing themes are unaffected.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Sidebar */
  --sidebar-server-bg:  var(--bg);
  --sidebar-channel-bg: var(--surface-1);
  --sidebar-active-bg:  var(--accent-dim);
  --sidebar-text:       var(--text);

  /* Chat view */
  --chat-bg:            var(--surface-2);
  --chat-accent:        var(--accent);
  --chat-text:          var(--text);
  --chat-input-bg:      var(--input-bg);
  --msg-link-color:     var(--accent);
  --msg-code-bg:        var(--surface-3);

  /* DMs view */
  --dm-bg:              var(--surface-2);
  --dm-surface:         var(--surface-1);
  --dm-list-bg:         var(--surface-1);
  --dm-accent:          var(--accent);
  --dm-active-bg:       var(--accent-dim);
  --dm-input-bg:        var(--input-bg);
  --dm-text:            var(--text);
  --dm-text-muted:      var(--text-muted);

  /* Friends view */
  --friends-bg:         var(--surface-1);
  --friends-item-bg:    var(--surface-2);
  --friends-accent:     var(--accent);
  --friends-text:       var(--text);
  --friends-online-color: #3ba55c;
  --friends-away-color:   #faa81a;

  /* Threads / Forum view */
  --thread-card-bg:     var(--surface-3);
  --thread-bg:          var(--surface-2);
  --thread-text:        var(--text);
  --thread-link-color:  var(--accent);
  --thread-accent:      var(--accent);
  --thread-input-bg:    var(--input-bg);
  --thread-font:        var(--ui-font);

  /* Voice view */
  --voice-bar-bg:       var(--surface-3);
  --voice-bg:           var(--surface-2);
  --voice-member-bg:    var(--surface-3);
  --voice-accent:       var(--accent);
  --voice-text:         var(--text);
  --voice-speaking-color: var(--accent);

  /* Announcements view */
  --announce-bg:        var(--surface-2);
  --announce-card-bg:   var(--surface-3);
  --announce-accent:    var(--accent);
  --announce-text:      var(--text);
  --announce-input-bg:  var(--input-bg);

  /* Media gallery view */
  --media-bg:           var(--surface-2);
  --media-card-bg:      var(--surface-3);
  --media-accent:       var(--accent);
  --media-text:         var(--text);

  /* Docs view */
  --docs-bg:            var(--surface-2);
  --docs-item-bg:       var(--surface-3);
  --docs-accent:        var(--accent);
  --docs-text:          var(--text);

  /* Tasks (list) view */
  --tasks-bg:           var(--surface-2);
  --tasks-col-bg:       var(--surface-3);
  --tasks-card-bg:      var(--surface-1);
  --tasks-accent:       var(--accent);
  --tasks-text:         var(--text);

  /* Calendar view */
  --calendar-bg:        var(--surface-2);
  --calendar-cell-bg:   var(--surface-3);
  --calendar-event-color: var(--accent);
  --calendar-text:      var(--text);

  /* Blog view */
  --blog-bg:            var(--surface-2);
  --blog-card-bg:       var(--surface-3);
  --blog-accent:        var(--accent);
  --blog-text:          var(--text);

  /* Streaming view */
  --stream-bg:          var(--surface-2);
  --stream-player-bg:   #000000;
  --stream-chat-bg:     var(--surface-1);
  --stream-accent:      var(--accent);
  --stream-text:        var(--text);

  /* Backgrounds (image overlay) */
  --app-bg-image:       none;
  --app-bg-opacity:     0.15;
}

/* Ghost explicit selector */
[data-theme="ghost"] {
  --bg: #080808;
  --bg2: #0e0e0e;
  --surface-1: #121212;
  --surface-2: #181818;
  --surface-3: #1e1e1e;
  --accent: #c8c8c8;
  --accent-dim: rgba(200,200,200,0.08);
  --accent-glow: 0 0 10px rgba(200,200,200,0.6), 0 0 30px rgba(200,200,200,0.3);
  --text: #f0f0f0;
  --text-muted: #555;
  --label: #888;
  --card-border: rgba(200,200,200,0.25);
  --card-shadow: 0 0 40px rgba(180,180,180,0.08), 0 0 80px rgba(140,140,140,0.04);
  --input-bg: #0a0a0a;
  --input-border: rgba(200,200,200,0.12);
  --tab-active-bg: #1c1c1c;
  --tab-inactive: #111;
  --btn-bg: #0c0c0c;
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Exo 2', sans-serif;
  --label-font: 'IBM Plex Mono', monospace;
}

/* ─── OG MINT ─────────────────────────────────────────
   Original aqua/cyan — the Patched classic
   ──────────────────────────────────────────────────── */
[data-theme="mint"] {
  --bg: #0d0d0d;
  --bg2: #111;
  --surface-1: #111412;
  --surface-2: #161917;
  --surface-3: #1c1f1c;
  --accent: #00ffb4;
  --accent-dim: rgba(0,255,180,0.15);
  --accent-glow: 0 0 10px #00ffb4, 0 0 30px rgba(0,255,180,0.5);
  --text: #e0fff7;
  --text-muted: #6b8f82;
  --label: #4ecba3;
  --card-border: rgba(0,255,180,0.35);
  --card-shadow: 0 0 40px rgba(0,255,180,0.12), 0 0 80px rgba(0,255,180,0.05);
  --input-bg: #0e1a17;
  --input-border: rgba(0,255,180,0.2);
  --tab-active-bg: #0e2920;
  --tab-inactive: #2a3830;
  --btn-bg: #001f16;
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Share Tech Mono', monospace;
  --label-font: 'IBM Plex Mono', monospace;
}

/* ─── SYNTHWAVE ───────────────────────────────────────
   Hot magenta — retro neon vibes
   ──────────────────────────────────────────────────── */
[data-theme="synthwave"] {
  --bg: #0a0010;
  --bg2: #0d0018;
  --surface-1: #100018;
  --surface-2: #180024;
  --surface-3: #200030;
  --accent: #ff00dc;
  --accent-dim: rgba(255,0,220,0.15);
  --accent-glow: 0 0 10px #ff00dc, 0 0 30px rgba(255,0,220,0.6), 0 0 60px rgba(255,0,220,0.2);
  --text: #ffe0ff;
  --text-muted: #7a4a80;
  --label: #cc66ff;
  --card-border: rgba(255,0,220,0.4);
  --card-shadow: 0 0 40px rgba(255,0,220,0.15), 0 0 80px rgba(100,0,255,0.08);
  --input-bg: #0f0018;
  --input-border: rgba(255,0,220,0.25);
  --tab-active-bg: #240038;
  --tab-inactive: #1a0028;
  --btn-bg: #18002a;
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Space Mono', monospace;
  --label-font: 'Space Mono', monospace;
}

/* ─── EMBER ───────────────────────────────────────────
   Forge orange — warm and fiery
   ──────────────────────────────────────────────────── */
[data-theme="ember"] {
  --bg: #0c0800;
  --bg2: #110900;
  --surface-1: #140c00;
  --surface-2: #1a1000;
  --surface-3: #221600;
  --accent: #ff6a00;
  --accent-dim: rgba(255,106,0,0.15);
  --accent-glow: 0 0 10px #ff6a00, 0 0 30px rgba(255,80,0,0.6), 0 0 60px rgba(200,40,0,0.2);
  --text: #fff0e0;
  --text-muted: #7a5030;
  --label: #ff9944;
  --card-border: rgba(255,100,0,0.4);
  --card-shadow: 0 0 40px rgba(255,80,0,0.18), 0 0 80px rgba(200,40,0,0.08);
  --input-bg: #140a00;
  --input-border: rgba(255,106,0,0.25);
  --tab-active-bg: #2a1400;
  --tab-inactive: #1e0e00;
  --btn-bg: #1a0a00;
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Exo 2', sans-serif;
  --label-font: 'IBM Plex Mono', monospace;
}

/* ─── CRYO ────────────────────────────────────────────
   Ice blue — cold and sharp
   ──────────────────────────────────────────────────── */
[data-theme="cryo"] {
  --bg: #010810;
  --bg2: #020c16;
  --surface-1: #031020;
  --surface-2: #041828;
  --surface-3: #052030;
  --accent: #00d4ff;
  --accent-dim: rgba(0,212,255,0.12);
  --accent-glow: 0 0 10px #00d4ff, 0 0 30px rgba(0,212,255,0.5), 0 0 60px rgba(0,150,255,0.15);
  --text: #d0f4ff;
  --text-muted: #3a6a80;
  --label: #44bbdd;
  --card-border: rgba(0,200,255,0.35);
  --card-shadow: 0 0 40px rgba(0,200,255,0.12), 0 0 80px rgba(0,100,200,0.06);
  --input-bg: #030f1c;
  --input-border: rgba(0,212,255,0.2);
  --tab-active-bg: #051f30;
  --tab-inactive: #041828;
  --btn-bg: #021020;
  --logo-font: 'Orbitron', monospace;
  --ui-font: 'Rajdhani', sans-serif;
  --label-font: 'IBM Plex Mono', monospace;
}

/* ──────────────────────────────────────────────────────
   ACCORD — Discord-inspired dark theme
   ────────────────────────────────────────────────────── */
[data-theme="accord"] {
  --bg: #313338;
  --bg2: #2b2d31;
  --surface-1: #2b2d31;
  --surface-2: #232428;
  --surface-3: #1e1f22;
  --accent: #5865f2;
  --accent-dim: rgba(88,101,242,0.15);
  --accent-glow: none;
  --text: #f2f3f5;
  --text-muted: #949ba4;
  --label: #b5bac1;
  --card-border: rgba(255,255,255,0.06);
  --card-shadow: 0 1px 4px rgba(0,0,0,0.3);
  --input-bg: #1e1f22;
  --input-border: rgba(255,255,255,0.08);
  --tab-active-bg: #404249;
  --tab-inactive: #35373c;
  --btn-bg: #2b2d31;
  --danger: #da373c;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --logo-font: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ui-font: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --label-font: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}