/* ==========================================================================
   The Donut Shoppe — Haven dark/muted theme (drop-in overrides)
   Photosensitivity-friendly: no pure black/white, no bright saturated
   fills, no glossy gradients, no motion added.

   This is the CANONICAL token set. index.html (the static landing page)
   declares the exact same :root names + hex values so the invite page
   and the Haven client read as one visual system. If you change a value
   here, copy the same change into index.html's <style> :root block.

   PALETTE
   --bg          #241c19   deep cocoa (page / app background)
   --bg-elevated #2b221d   slightly raised panels (headers, toolbars)
   --surface     #302722   cards, message bubbles, panels
   --surface-alt #3a302a   inputs, code blocks, hover surface
   --border      #4a3e37   hairline borders / dividers
   --text        #e2d6cb   primary text (warm parchment, not pure white)
   --text-dim    #b7a89b   secondary / muted text, timestamps
   --text-faint  #8d7f74   placeholder / disabled text
   --rose        #c48f8a   accent — links, active states, unread badges
   --rose-soft   #a97972   accent — primary button fill
   --rose-press  #8f645e   accent — primary button pressed
   --sage        #8ea28a   accent — success / online status
   --blue        #7f95a3   accent — info / secondary buttons

   USAGE
   Append this file after Haven's own stylesheet (or link it last in
   <head>) so these rules win on normal CSS specificity/order. If Haven
   ships its own CSS custom properties, the :root block below re-points
   them first; the selector overrides beneath are a best-effort match
   against common chat-app markup (sidebar/message/button/input/modal)
   and may need small selector tweaks to match Haven's actual DOM.

   IMPORTANT: REAPPLY THIS FILE AFTER ANY HAVEN UPGRADE.
   Upgrades can change class names or reset shipped CSS variables and
   silently undo these overrides — re-check the selector list below
   against Haven's current DOM after every upgrade.
   ========================================================================== */

:root {
  --bg: #241c19;
  --bg-elevated: #2b221d;
  --surface: #302722;
  --surface-alt: #3a302a;
  --border: #4a3e37;
  --text: #e2d6cb;
  --text-dim: #b7a89b;
  --text-faint: #8d7f74;
  --rose: #c48f8a;
  --rose-soft: #a97972;
  --rose-press: #8f645e;
  --sage: #8ea28a;
  --blue: #7f95a3;

  /* Common alternate variable names some chat UIs use — re-pointed to
     the same palette so overrides apply even if Haven reads these
     instead of the names above. Harmless if unused. */
  --background-primary: var(--bg);
  --background-secondary: var(--bg-elevated);
  --background-tertiary: var(--surface);
  --background-floating: var(--surface-alt);
  --text-normal: var(--text);
  --text-muted: var(--text-dim);
  --interactive-normal: var(--text);
  --interactive-muted: var(--text-dim);
  --channeltextarea-background: var(--surface-alt);
  --border-subtle: var(--border);
  --brand-color: var(--rose-soft);
}

html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* App shell / layout regions */
body,
#app, #root, .app, .app-shell,
.layout, .main, .content, .page {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Sidebars, nav rails, server/channel lists */
.sidebar, .side-panel, .nav, .nav-rail,
.server-list, .channel-list, .guild-list,
aside, nav {
  background-color: var(--bg-elevated) !important;
  color: var(--text-dim) !important;
  border-color: var(--border) !important;
}

/* Headers / toolbars */
header, .header, .toolbar, .titlebar, .topbar {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Cards, panels, message groups, modals */
.card, .panel, .surface, .message, .message-group,
.modal, .dialog, .popover, .dropdown, .tooltip {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Inputs, textareas, code/message composer */
input, textarea, select,
.input, .textbox, .composer, .message-input, pre, code {
  background-color: var(--surface-alt) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-faint) !important;
}

/* Links */
a, .link {
  color: var(--rose) !important;
}
a:hover, .link:hover {
  color: var(--rose-soft) !important;
}

/* Buttons — primary */
button, .btn, .button,
.btn-primary, .button-primary {
  background-color: var(--rose-soft) !important;
  color: var(--bg) !important;
  border: 1px solid var(--rose-soft) !important;
}
button:hover, .btn:hover, .button:hover,
.btn-primary:hover, .button-primary:hover {
  background-color: var(--rose) !important;
}
button:active, .btn:active, .button:active,
.btn-primary:active, .button-primary:active {
  background-color: var(--rose-press) !important;
}

/* Buttons — secondary / ghost */
.btn-secondary, .button-secondary, .btn-ghost, .button-ghost {
  background-color: transparent !important;
  color: var(--blue) !important;
  border: 1px solid var(--border) !important;
}

/* Status indicators */
.status-online, .online, .status--online {
  color: var(--sage) !important;
}
.status-offline, .offline, .status--offline {
  color: var(--text-faint) !important;
}
.badge, .unread-badge, .mention-badge {
  background-color: var(--rose) !important;
  color: var(--bg) !important;
}

/* Dividers / borders everywhere */
hr, .divider, .separator {
  border-color: var(--border) !important;
}

/* Scrollbars (WebKit-based renderers, e.g. Electron/Chromium clients) */
::-webkit-scrollbar {
  background-color: var(--bg-elevated);
}
::-webkit-scrollbar-thumb {
  background-color: var(--surface-alt);
  border-radius: 8px;
}

/* Avoid glare: flatten any bright glossy gradients/shadows Haven ships
   on buttons or headers by default. */
button, .btn, .button, header, .header, .toolbar {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
