/* ==========================================================================
   VampChat Theme Tokens
   ========================================================================== */

:root {
  /* Surfaces & Backgrounds */
  --bg-server-rail: #1e1f22;
  --bg-channel-sidebar: #2b2d31;
  --bg-chat: #313338;
  --bg-chat-input: #383a40;
  --bg-user-bar: #232428;
  --bg-active-channel: #404249;
  --bg-hover-channel: #35373c;
  --bg-divider: #35373c;
  --bg-card: #2b2d31;
  --bg-popover: #232428;
  --bg-embed: #2b2d31;
  --bg-drawer-overlay: rgba(0, 0, 0, 0.7);

  /* Reactions & Mentions */
  --bg-reaction: #2b2d31;
  --bg-reaction-hover: #35373c;
  --bg-reaction-active: #3c4270;
  --border-reaction-active: #5865f2;
  --bg-mention: rgba(88, 101, 242, 0.12);
  --bg-mention-hover: rgba(88, 101, 242, 0.18);
  --border-mention: #5865f2;

  /* Brand Colors */
  --brand-blurple: #5865f2;
  --brand-blurple-hover: #4752c4;
  --brand-blurple-active: #3c45a5;
  --brand-green: #23a55a;
  --brand-green-hover: #1f9250;
  --brand-yellow: #f0b232;
  --brand-red: #f23f43;
  --brand-red-hover: #da373b;
  --brand-fuchsia: #eb459e;

  /* Text & Foreground */
  --text-header-primary: #f2f3f5;
  --text-header-secondary: #b5bac1;
  --text-normal: #dbdee1;
  --text-muted: #949ba4;
  --text-link: #00a8fc;
  --interactive-normal: #949ba4;
  --interactive-hover: #dbdee1;
  --interactive-active: #ffffff;

  /* Presence Statuses */
  --status-online: #23a55a;
  --status-idle: #f0b232;
  --status-dnd: #f23f43;
  --status-offline: #80848e;

  /* Roles */
  --role-admin: #5865f2;
  --role-mod: #23a55a;
  --role-vip: #fee75c;
  --role-member: #949ba4;
  --role-bot: #5865f2;

  /* Layout Dimensions */
  --rail-width: 72px;
  --sidebar-width: 240px;
  --members-width: 240px;
  --header-height: 52px;
  --user-bar-height: 54px;
}