/* ============================================================
   VoxLounge Theme Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* --- Cyberpunk Theme (default) --- */
[data-theme="cyberpunk"] {
  --bg-primary: #0a0a14;
  --bg-secondary: #0d0d1a;
  --bg-panel: #111125;
  --bg-card: #0f0f20;
  --bg-card-hover: #141430;
  --bg-input: #0a0a18;
  --bg-overlay: rgba(5, 5, 15, 0.92);
  --border-color: #00d4ff33;
  --border-hover: #00d4ff66;
  --border-glow: #00d4ff;
  --text-primary: #e0e0e0;
  --text-secondary: #8888aa;
  --text-dim: #555577;
  --accent-primary: #00d4ff;
  --accent-primary-rgb: 0, 212, 255;
  --accent-secondary: #00ff9f;
  --accent-secondary-rgb: 0, 255, 159;
  --accent-tertiary: #ff2a6d;
  --accent-tertiary-rgb: 255, 42, 109;
  --accent-warning: #ffaa00;
  --accent-danger: #ff3333;
  --accent-success: #00ff9f;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-body: var(--font-mono);
  --font-heading: var(--font-mono);
  --radius: 2px;
  --radius-lg: 4px;
  --glow-sm: 0 0 5px var(--accent-primary);
  --glow-md: 0 0 15px var(--accent-primary);
  --glow-lg: 0 0 30px var(--accent-primary);
  --glow-green-sm: 0 0 5px var(--accent-secondary);
  --glow-pink-sm: 0 0 5px var(--accent-tertiary);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(0, 212, 255, 0.05);
  --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.8);
  --transition-fast: 0.15s ease;
  --transition-med: 0.3s ease;
  --scanline-opacity: 0.03;
}

/* --- Clean Default Theme --- */
[data-theme="default"] {
  --bg-primary: #13111c;
  --bg-secondary: #1a1726;
  --bg-panel: #1e1b2e;
  --bg-card: #231f35;
  --bg-card-hover: #2c2742;
  --bg-input: #191624;
  --bg-overlay: rgba(15, 13, 22, 0.94);
  --border-color: rgba(108, 99, 255, 0.12);
  --border-hover: rgba(108, 99, 255, 0.28);
  --border-glow: #6c63ff;
  --text-primary: #e8e6f0;
  --text-secondary: #9994b8;
  --text-dim: #5e587a;
  --accent-primary: #7c6cff;
  --accent-primary-rgb: 124, 108, 255;
  --accent-secondary: #56d49e;
  --accent-secondary-rgb: 86, 212, 158;
  --accent-tertiary: #f06292;
  --accent-tertiary-rgb: 240, 98, 146;
  --accent-warning: #ffc857;
  --accent-danger: #ff5252;
  --accent-success: #56d49e;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --radius: 10px;
  --radius-lg: 14px;
  --glow-sm: none;
  --glow-md: none;
  --glow-lg: none;
  --glow-green-sm: none;
  --glow-pink-sm: none;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(108, 99, 255, 0.04);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5);
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --scanline-opacity: 0;
}

/* --- Windows 98 Theme (qid:698) — silver chrome, teal desktop, navy title bars, hard 3D bevels --- */
[data-theme="win98"] {
  --bg-primary: #008080;        /* the classic teal desktop */
  --bg-secondary: #c0c0c0;      /* silver window body */
  --bg-panel: #c0c0c0;
  --bg-card: #c0c0c0;
  --bg-card-hover: #cdcac4;
  --bg-input: #ffffff;          /* white sunken fields */
  --bg-overlay: rgba(0, 0, 32, 0.55);
  --border-color: #808080;
  --border-hover: #000080;
  --border-glow: #000080;
  --text-primary: #000000;
  --text-secondary: #202020;
  --text-dim: #585858;
  --accent-primary: #000080;    /* navy — title bars + selection */
  --accent-primary-rgb: 0, 0, 128;
  --accent-secondary: #008080;
  --accent-secondary-rgb: 0, 128, 128;
  --accent-tertiary: #800080;
  --accent-tertiary-rgb: 128, 0, 128;
  --accent-warning: #808000;
  --accent-danger: #aa0000;
  --accent-success: #008000;
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --font-sans: 'Tahoma', 'Segoe UI', 'MS Sans Serif', system-ui, sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --radius: 0px;                /* everything square */
  --radius-lg: 0px;
  --glow-sm: none;
  --glow-md: none;
  --glow-lg: none;
  --glow-green-sm: none;
  --glow-pink-sm: none;
  /* the iconic raised / sunken Win98 bevels, done with layered inset box-shadows */
  --w98-raise: inset -1px -1px 0 0 #0a0a0a, inset 1px 1px 0 0 #ffffff, inset -2px -2px 0 0 #808080, inset 2px 2px 0 0 #dfdfdf;
  --w98-sink:  inset 1px 1px 0 0 #808080, inset -1px -1px 0 0 #ffffff, inset 2px 2px 0 0 #0a0a0a, inset -2px -2px 0 0 #dfdfdf;
  --shadow-card: var(--w98-raise);
  --shadow-panel: var(--w98-raise);
  --transition-fast: 0s;        /* Win98 doesn't animate */
  --transition-med: 0s;
  --scanline-opacity: 0;
}

/* ----- Win98 chrome: the 3D bevels the color tokens alone can't express ----- */
[data-theme="win98"] body { background: #008080; }

/* Panels / cards / modals: raised grey with a hard bevel, square corners */
[data-theme="win98"] .panel,
[data-theme="win98"] .card,
[data-theme="win98"] .modal,
[data-theme="win98"] .sheet,
[data-theme="win98"] .video-tile,
[data-theme="win98"] .dialog,
[data-theme="win98"] .dropdown,
[data-theme="win98"] .context-menu {
  background: #c0c0c0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--w98-raise) !important;
}

/* Buttons: raised, press to sunken */
[data-theme="win98"] button,
[data-theme="win98"] .btn,
[data-theme="win98"] .btn-primary {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--w98-raise) !important;
  text-shadow: none !important;
  font-family: var(--font-sans) !important;
}
[data-theme="win98"] button:active,
[data-theme="win98"] .btn:active,
[data-theme="win98"] .btn-primary:active {
  box-shadow: var(--w98-sink) !important;
  padding-top: 1px; padding-left: 1px;   /* the classic "pushed in" nudge */
}

/* Inputs: white, sunken */
[data-theme="win98"] input,
[data-theme="win98"] textarea,
[data-theme="win98"] select,
[data-theme="win98"] .input-field {
  background: #ffffff !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--w98-sink) !important;
}

/* Title bars / section headers: the navy gradient + white text */
[data-theme="win98"] .modal-header,
[data-theme="win98"] .panel-header,
[data-theme="win98"] .sheet-header,
[data-theme="win98"] .dialog-title,
[data-theme="win98"] .section-title {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  font-weight: 700;
}

/* Chunky grey scrollbars */
[data-theme="win98"] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme="win98"] ::-webkit-scrollbar-track { background: #dfdfdf; }
[data-theme="win98"] ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  box-shadow: var(--w98-raise);
  border: 0;
}

/* Desktop left nav = a silver raised panel */
[data-theme="win98"] .bottom-nav {
  background: #c0c0c0 !important;
  box-shadow: var(--w98-raise) !important;
  border: 0 !important;
}
[data-theme="win98"] .bottom-nav .nav-item { color: #000 !important; }
[data-theme="win98"] .bottom-nav .nav-item.active {
  background: #000080 !important; color: #fff !important; box-shadow: var(--w98-sink) !important;
}

/* Right-rail cards (LIVE NOW / FRIENDS / NOW PLAYING) = silver raised, navy title bars.
   They read var(--bg-overlay), which stays dark for modal backdrops, so override them explicitly. */
[data-theme="win98"] .fd-panel {
  background: #c0c0c0 !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: var(--w98-raise) !important;
}
[data-theme="win98"] .fd-panel-hd {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #ffffff !important; border-radius: 0 !important;
  margin: 3px 3px 6px; padding: 3px 6px !important;
}
[data-theme="win98"] .fd-panel-hd .fd-dot { background: #fff !important; box-shadow: none !important; }
[data-theme="win98"] .fd-person-name,
[data-theme="win98"] .fd-person-sub,
[data-theme="win98"] .fd-empty { color: #000 !important; }
[data-theme="win98"] .fd-person:hover { background: #000080 !important; }
[data-theme="win98"] .fd-person:hover .fd-person-name,
[data-theme="win98"] .fd-person:hover .fd-person-sub { color: #fff !important; }

/* Feed + room top bars = silver raised; tabs square, active = navy */
[data-theme="win98"] .feed-topbar,
[data-theme="win98"] .room-topbar {
  background: #c0c0c0 !important;
  box-shadow: var(--w98-raise) !important;
  border: 0 !important;
}
[data-theme="win98"] .feed-tab { color: #000 !important; border-radius: 0 !important; }
[data-theme="win98"] .feed-tab.active { background: #000080 !important; color: #fff !important; }

/* Square, sunken avatars (round avatars break the 98 illusion) */
[data-theme="win98"] .user-avatar,
[data-theme="win98"] .nav-me-av,
[data-theme="win98"] .fd-person-av,
[data-theme="win98"] .settings-avatar,
[data-theme="win98"] .settings-avatar-img,
[data-theme="win98"] .profile-modal-avatar,
[data-theme="win98"] .avatar {
  border-radius: 0 !important;
  box-shadow: var(--w98-sink) !important;
}

/* Search box = the classic sunken white field */
[data-theme="win98"] .search-box { background: transparent !important; }
[data-theme="win98"] .search-box .input-field {
  background: #ffffff !important;
  color: #000 !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: var(--w98-sink) !important;
}
[data-theme="win98"] .search-icon,
[data-theme="win98"] .search-box kbd { color: #000 !important; }

/* Kill rounded corners app-wide under Win98 (square is the whole point) */
[data-theme="win98"] .pill,
[data-theme="win98"] .chip,
[data-theme="win98"] .tag { border-radius: 0 !important; }