/* Black / violet palette. Layout and typography live in style.css. */
:root {
  --bg: #09090b;
  --sidebar: #0e0e11;
  --panel: #16161b;
  --panel-2: #202027;
  --border: #303039;
  --text: #f4f4f5;
  --muted: #a1a1ad;
  --accent: #b7a1ff;
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --on-primary: #ffffff;
  --accent-soft: #281a42;
  --accent-text: #ddd0ff;
  --input: #101014;
  --control-border: #62626f;
  --green: #86d9b1;
  --success-bg: #142c24;
  --success-text: #9be5bc;
  --warning-bg: #302617;
  --warning-text: #f0cd8c;
  --danger-bg: #321c24;
  --danger-text: #f1a4b4;
}

/* Neutral surfaces; violet marks selected items and actions. */
body, .topbar { background: var(--bg); }
.sidebar { background: var(--sidebar); }
.panel, .modal { background: var(--panel); border-color: var(--border); }
.modal::backdrop { background: #000000cc; }
.brand, h1, h2, h3, .breadcrumbs strong { color: var(--text); }
.brand-mark, .section-heading h2 .icon, .chat-heading h2 .icon { color: var(--accent); }
.nav-link, .icon-button, .sidebar-profile>.icon, .breadcrumbs, .slash { color: var(--muted); }
.nav-link:hover, .icon-button:hover { background: var(--panel-2); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-dot, .audit-dot { background: var(--accent); }
.tiny-tag, .live-tag { background: var(--panel-2); color: var(--muted); }
.avatar, .avatar.guest, .login-gem, .self-tag { background: var(--accent-soft); color: var(--accent-text); border-color: #674d96; }

.button, .send-button, .account-banner .button {
  background: var(--primary);
  color: var(--on-primary);
}
.button:hover, .send-button:hover, .account-banner .button:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
  filter: none;
}
.discord-button, .account-manage { background: var(--accent-soft); color: var(--accent-text); border-color: #886cb6; }
.discord-button:hover, .account-manage:hover { background: #39245b; color: #f2ebff; border-color: var(--accent); }
.text-button, .board-footer a, .chat-login-hint button { color: var(--accent); }
.text-button:hover, .board-footer a:hover { color: #e4d9ff; }
.tab, .channel { color: var(--muted); }
.tab.active, .channel.active { background: var(--accent-soft); color: var(--accent-text); }
.tab:hover, .channel:hover { color: #e4d9ff; }
.skip-link:focus { background: var(--primary); color: var(--on-primary); }

/* Inputs and boundaries stay legible on the black surfaces. */
.search-box, .admin-search, .chat-compose, .server-address,
.editor-modal input, .editor-modal textarea, .editor-modal select,
.comments-section textarea, .account-modal input, .account-modal select {
  background: var(--input);
  color: var(--text);
  border-color: var(--control-border);
}
.search-box input, .admin-search input, .chat-compose textarea { color: var(--text); }
.search-box .icon, .admin-search>.icon { color: var(--muted); }
.server-address, .server-address code { color: var(--text); }
.server-address>span:last-child { color: var(--accent); }
.server-address:hover { background: #19131f; border-color: var(--accent); }
.chat-compose:focus-within, .search-box:focus-within, .admin-search:focus-within { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Secondary text is neutral gray rather than tinted purple. */
.empty-state h3, .chat-welcome h3, .audit-entry strong, .message-meta strong,
.comment-meta strong, .account-person strong { color: var(--text); }
.message-body, .comment p, .post-body, .online-friend { color: #e4e4eb; }
.empty-state>.icon { color: var(--muted); }
.comment-stat, .chat-login-hint, .online-heading, .online-heading>span:last-child,
.comment-meta, .audit-entry p span, .account-role, .editor-modal label,
.account-modal label, .chat-bottom, .chat-bottom span, .live-tag { color: var(--muted); }
.chat-message.own .message-meta strong, .account-role.admin { color: var(--accent); }
.online-heading>span:last-child { background: var(--panel-2); }
.post-row, .comment, .comments-section, .account-table td,
.audit-entry, .server-metrics>div { border-color: var(--border); }
.post-row:hover { background: var(--panel-2); }
.account-table th, .account-dialog-person { background: var(--input); border-color: var(--border); }
.category-badge { background: var(--accent-soft); color: var(--accent-text); }

/* Keep status colors semantic and separate from the brand accent. */
.category-badge.game, .account-status.active, .live-tag.connected {
  background: var(--success-bg);
  color: var(--success-text);
}
.category-badge.notice, .account-status.pending { background: var(--warning-bg); color: var(--warning-text); }
.account-status.blocked, .form-error { background: var(--danger-bg); color: var(--danger-text); }
.form-error { border-color: #925162; }
.danger { color: var(--danger-text); }
.danger:hover { color: #ffc3ce; }
.account-banner { background: var(--warning-bg); border-color: #80643b; }
.account-banner strong, .account-banner p, .admin-stats>.panel:nth-child(2) strong { color: var(--warning-text); }
.status-pill { background: var(--success-bg); color: var(--success-text); border-color: #467961; }
.status-pill.neutral { background: #202027; color: #c8c8d0; border-color: #62626f; }
.status-dot.neutral, .status-pill.neutral .status-dot { background: #a1a1ad; }

/* The existing server illustration uses the same restrained palette. */
.server-banner { background: radial-gradient(ellipse at 65% 100%, #332149, transparent 75%), #111115; }
.server-edition { color: #d6cbea; border-color: #75628c; }
.server-banner-title { color: #f4f0ff; text-shadow: 2px 3px #09090b; }
.voxel { background: linear-gradient(#605274 0 12%, #403649 12% 30%, #2d2834 30% 65%, #211d27 65%); border-top-color: #91809f; }
.v2 { background: #3f354b; }
.v6 { background: #493c56; }
.v7 { background: #5e4e70; }
.v8 { background: #4f425e; }
.moon { background: #bca4db80; box-shadow: 0 0 35px #b69ae025; }
.mini-block { background: linear-gradient(#796591 0 30%, #51445e 30% 60%, #332a3c 60%); }
.toast { background: #21172f; border-color: #886cb6; color: #f4f0ff; }