:root {
  /* Midnight Purple — default theme. appearance.js overwrites these
     at runtime from the user's saved preset / custom colors. Status
     colors below stay locked on purpose. */
  --bg: #0f0a1a;
  --rail: #150f22;
  --panel: #1c1430;
  --panel-alt: #251c3d;
  --border: #362a4d;
  --text: #ece7f7;
  --text-dim: #a89bc4;
  --accent: #8b5cf6;
  --accent-hover: #7c3aed;

  /* Sub-menu accent (magenta) — reserved specifically for pop-up UI
     that does NOT take over the main screen: the right-click context
     menu, the party creation modal, and any future pop-up of that
     kind. Main screens (chat, friends list, settings) keep using
     --accent instead. This is a visual "you're in a layered pop-up"
     cue, distinct from the primary action color used everywhere else. */
  --accent-submenu: #d946ef;
  --accent-submenu-hover: #c026d3;

  /* Left as-is on purpose: online/danger are semantic status colors
     (green = online, red = destructive action), not decorative ones —
     changing them risks losing the at-a-glance meaning people already
     associate with those colors, independent of the overall theme. */
  --online: #3ba55d;
  --away: #faa61a;
  --offline: #747f8d;
  --danger: #ed4245;

  /* Global multiplier for message elements (avatar, name, timestamp,
     bubble text) — a future settings slider only ever needs to change
     this one number; every element below is sized relative to it. */
  --message-scale: 1;
  --cluster-gap: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; }
input { font-family: inherit; }