/* ══════════════════════════════════════════════════════
   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-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ── Global press feedback ───────────────────────────────
   Every pressable surface acknowledges the press with a
   subtle scale. This is the single highest-leverage
   interaction-feel change — makes the whole app feel
   alive. 160ms ease-out on release, no transition on
   press (scale snaps in, eases back out).
   Use :where() so we don't outrank component styles. */
:where(button, .btn, [role="button"], .tp-card, .server-icon,
       .group-rail-item, .channel-item, .dm-item,
       a.btn, input[type="submit"], input[type="button"]) {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 160ms ease-out,
              color 160ms ease-out,
              border-color 160ms ease-out,
              box-shadow 160ms ease-out;
}
:where(button, .btn, [role="button"], .tp-card, .server-icon,
       .group-rail-item, .channel-item, .dm-item,
       a.btn, input[type="submit"], input[type="button"]):active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  :where(button, .btn, [role="button"], .tp-card):active:not(:disabled) {
    transform: none;
  }
}

/* ── Keyboard focus ring ─────────────────────────────────
   Accessibility is craft. Every interactive surface needs
   a visible keyboard-only focus indicator. :focus-visible
   only fires for keyboard focus, so mouse users don't see
   rings on click. Uses the theme accent so custom themes
   inherit correct color automatically.
   :where() keeps specificity at 0 so component styles win. */
:where(button, .btn, [role="button"], a,
       input, textarea, select, .tp-card,
       summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Drop default focus outline — :focus-visible replaces it cleanly. */
:where(button, .btn, [role="button"], a,
       input, textarea, select):focus {
  outline: none;
}

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

  /* ── Motion system (house curves) ───────────────────────────
     Impeccable principle: motion conveys mass. Spring cubic-beziers
     for natural weight, shorter curves for micro-interactions. */
  --motion-spring:      cubic-bezier(0.32, 0.72, 0, 1);
  --motion-snap:        cubic-bezier(0.4, 0, 0.2, 1);
  --motion-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Structural hairlines (theme-independent, always subtle) ──
     Two levels only: quiet structural borders and interactive emphasis.
       --hairline        = dividers, card edges, whispered structure
       --hairline-strong = hover/interactive borders, focus rings
     Previously had three levels; collapsed for visual quiet.
     --hairline-focus is an alias preserved for backward compat. */
  --hairline:           rgba(255,255,255,0.05);
  --hairline-strong:    rgba(255,255,255,0.12);
  --hairline-focus:     var(--hairline-strong);

  /* ── Modal / floating panel shadows (theme-aware depth) ─────
     Instead of harsh pure-black drop shadows (which crush detail on
     high-chroma themes like Synthwave), compose shadows from:
       1. ambient (theme-tinted, spreads softly)
       2. direct (deeper near the element, darker)
       3. inner glow (top highlight, gives edge lift)
     The ambient layer uses --accent-dim so each theme's floating
     elements inherit that theme's color ambience — Synthwave modals
     get a faint magenta halo, Ember gets warm orange ambient. */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25),
                0 0 0 1px var(--hairline);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.3),
                0 2px 4px rgba(0,0,0,0.2),
                0 0 0 1px var(--hairline),
                inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.4),
                0 4px 12px rgba(0,0,0,0.2),
                0 0 32px var(--accent-dim),
                0 0 0 1px var(--hairline),
                inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-xl:  0 24px 80px rgba(0,0,0,0.45),
                0 8px 24px rgba(0,0,0,0.25),
                0 0 60px var(--accent-dim),
                0 0 0 1px var(--hairline),
                inset 0 1px 0 rgba(255,255,255,0.05);

  /* ── Spacing scale (4pt base) ───────────────────────────────
     Semantic names over pixel names for future flexibility. */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-2xl:   32px;
  --space-3xl:   48px;
  --space-4xl:   64px;

  /* ── Semantic status tokens (theme-overridable) ─────────────
     Impeccable principle: theme variables always. These tokens
     carry meaning, not decoration. Custom user themes can override
     any of these to match their palette. Each token has a solid
     value (for backgrounds/borders) and a dim rgba (for tints). */

  /* Online / Success / Active — green by default */
  --status-online:       #43b581;
  --status-online-dim:   rgba(67,181,129,0.15);

  /* Idle / Away / Warning — amber by default */
  --status-idle:         #faa61a;
  --status-idle-dim:     rgba(250,166,26,0.15);

  /* DND / Error / Danger — red by default */
  --status-dnd:          #f87171;
  --status-dnd-dim:      rgba(248,113,113,0.15);

  /* Offline / Invisible / Neutral — gray by default */
  --status-offline:      #6b7280;
  --status-offline-dim:  rgba(107,114,128,0.15);

  /* Danger action (destructive buttons, delete confirms) — stronger red */
  --status-danger:       #ff4d6a;
  --status-danger-dim:   rgba(255,77,106,0.12);
  --status-danger-hover: rgba(255,77,106,0.08);

  /* Warning (cautions, pending, attention-needed) — stronger amber */
  --status-warning:      #facc15;
  --status-warning-dim:  rgba(250,204,21,0.15);

  /* Success action (confirmations, positive feedback) — brighter green */
  --status-success:      #4ade80;
  --status-success-dim:  rgba(74,222,128,0.15);

  /* Info (neutral notifications, links to docs) — soft blue */
  --status-info:         #60a5fa;
  --status-info-dim:     rgba(96,165,250,0.15);

  /* ── Breakpoint reference (documentation only) ──────────────
     CSS variables in media queries aren't supported yet, but these
     are the canonical breakpoints used throughout the app. Reference
     them in comments like @media (max-width: var(--bp-md) equivalent).

     --bp-sm:   480px   phone
     --bp-md:   768px   tablet portrait / phablet landscape
     --bp-lg:   1024px  tablet landscape / small laptop
     --bp-xl:   1280px  desktop
     --bp-2xl:  1536px  large desktop */

  /* Minimum touch target for mobile (iOS HIG recommends 44px, Material 48px) */
  --touch-target: 44px;

  /* ── Type scale (modular, chat-dense) ───────────────────────
     Use semantic tokens instead of raw sizes. Chat apps (Discord,
     Slack) use denser type than landing pages. This scale maps the
     existing 61-size drift into 7 intentional steps with a ~1.2 ratio.

     Reference mapping (assuming 16px root):
       --fs-2xs (10px)   → eyebrows, badges, micro-labels
       --fs-xs  (12px)   → captions, metadata, timestamps
       --fs-sm  (13.2px) → secondary text, buttons, labels (default)
       --fs-md  (15px)   → body, message text, inputs
       --fs-lg  (18px)   → subheadings, card titles
       --fs-xl  (22px)   → section headings
       --fs-2xl (32px)   → display moments (server name, modals H1)  */
  --fs-2xs:  0.625rem;    /* 10px */
  --fs-xs:   0.75rem;     /* 12px */
  --fs-sm:   0.825rem;    /* 13.2px — body secondary */
  --fs-md:   0.9375rem;   /* 15px — body primary */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  2rem;        /* 32px */

  /* Line-heights paired with sizes */
  --lh-tight:    1.1;    /* display/headings */
  --lh-snug:     1.3;    /* subheadings */
  --lh-normal:   1.5;    /* body */
  --lh-relaxed:  1.65;   /* long-form reading */

  /* ── Button tier tokens ─────────────────────────────────────
     Four semantic tiers. Each tier defines background, text, border,
     and hover states that map through status tokens where applicable.
     Use with .btn base class + .btn--tier modifier (or existing
     .btn-primary/.btn-secondary/etc which now route through these). */

  /* Tier 1 — Primary: main CTAs, confirmations, create actions */
  --btn-primary-bg:        var(--accent);
  --btn-primary-text:      var(--bg);
  --btn-primary-border:    var(--accent);
  --btn-primary-bg-hover:  var(--accent);
  --btn-primary-shadow:    0 0 20px var(--accent-dim);

  /* Tier 2 — Secondary: cancels, neutral alternate actions */
  --btn-secondary-bg:        rgba(255,255,255,0.04);
  --btn-secondary-text:      var(--text);
  --btn-secondary-border:    var(--hairline-focus, rgba(255,255,255,0.12));
  --btn-secondary-bg-hover:  rgba(255,255,255,0.08);

  /* Tier 3 — Tertiary: low-emphasis inline actions, "learn more" */
  --btn-tertiary-bg:        transparent;
  --btn-tertiary-text:      var(--text-muted);
  --btn-tertiary-border:    transparent;
  --btn-tertiary-bg-hover:  rgba(255,255,255,0.03);
  --btn-tertiary-text-hover: var(--text);

  /* Tier 4 — Danger: destructive actions, delete confirmations */
  --btn-danger-bg:          transparent;
  --btn-danger-text:        var(--status-danger);
  --btn-danger-border:      var(--status-danger);
  --btn-danger-bg-hover:    var(--status-danger-hover, rgba(255,77,106,0.08));
}

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