/* ============================================
   Discord Theme System
   4 themes: Light, Dark (default), Ash, Onyx
   CSS class mapping:
     Light → .theme-light
     Dark  → .theme-dark
     Ash   → .theme-darker
     Onyx  → .theme-midnight
   ============================================ */

/* ============================================
   DARK THEME (default)
   ============================================ */
.theme-dark {
  /* Backgrounds */
  --background-base-low: #313338;
  --background-base-lower: #2b2d31;
  --background-base-lowest: #1e1f22;
  --background-surface-high: #3c3e44;
  --background-surface-higher: #3f4147;
  --background-surface-highest: #43454b;
  --chat-background: #313338;
  --channeltextarea-background: #383a40;
  --modal-background: #313338;
  --panel-bg: #2b2d31;
  --embed-background: #2f3136;

  /* Text */
  --text-default: #f2f3f5;
  --text-strong: #f2f3f5;
  --text-muted: #949ba4;
  --text-subtle: #b5bac1;
  --text-link: #00a8fc;
  --channels-default: #949ba4;
  --text-feedback-critical: #ed4245;

  /* Interactive */
  --interactive-background-hover: rgba(78, 80, 88, 0.3);
  --interactive-background-active: rgba(78, 80, 88, 0.48);
  --interactive-background-selected: rgba(78, 80, 88, 0.6);
  --interactive-icon-default: #b5bac1;
  --interactive-icon-hover: #dbdee1;
  --interactive-icon-active: #ffffff;
  --interactive-text-default: #b5bac1;
  --interactive-text-hover: #dbdee1;
  --interactive-text-active: #ffffff;

  /* Borders */
  --border-subtle: #1e1f22;
  --border-muted: rgba(255, 255, 255, 0.04);
  --border-normal: rgba(255, 255, 255, 0.2);
  --border-strong: rgba(255, 255, 255, 0.44);
  --app-frame-border: hsla(240, 4%, 60.784%, 0.122);

  /* Icons */
  --icon-default: #dbdee1;
  --icon-strong: #ffffff;
  --icon-muted: #949ba4;
  --icon-subtle: #b5bac1;

  /* Controls */
  --control-primary-background-default: #5865f2;
  --control-primary-background-hover: #4752c4;
  --control-primary-background-active: #3b43a8;
  --control-critical-primary-background-default: #ed4245;

  /* Input */
  --input-background-default: #383a40;
  --input-border-default: rgba(255, 255, 255, 0.2);
  --input-text-default: #dbdee1;

  /* Scrollbar */
  --scrollbar-auto-thumb: #1a1b1e;
  --scrollbar-thin-thumb: #1a1b1e;

  /* Message */
  --message-background-hover: rgba(0, 0, 0, 0.06);

  /* Compatibility aliases (map old names → new semantic names) */
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-tertiary: #1e1f22;
  --text-normal: #dbdee1;
  --header-primary: #f2f3f5;
  --header-secondary: #b5bac1;
  --interactive-normal: #b5bac1;
  --interactive-hover: #dbdee1;
  --interactive-active: #ffffff;
  --brand-experiment: #5865f2;
  --brand-experiment-hover: #4752c4;
  --input-background: #383a40;
  --danger: #ed4245;
  --background-modifier-hover: rgba(78, 80, 88, 0.3);
  --background-modifier-active: rgba(78, 80, 88, 0.48);
  --background-modifier-selected: rgba(78, 80, 88, 0.6);
  --div-border: #1e1f22;

  --text-feedback-warning: hsl(38.455, 100%, 43.137%);
}


/* ============================================
   LIGHT THEME
   ============================================ */
.theme-light {
  /* Backgrounds */
  --background-base-low: #ffffff;
  --background-base-lower: #f2f3f5;
  --background-base-lowest: #e3e5e8;
  --background-surface-high: #ffffff;
  --background-surface-higher: #ffffff;
  --background-surface-highest: #ffffff;
  --chat-background: #ffffff;
  --channeltextarea-background: #ebedef;
  --modal-background: #ffffff;
  --panel-bg: #f2f3f5;
  --embed-background: #f2f3f5;

  /* Text */
  --text-default: #313338;
  --text-strong: #060607;
  --text-muted: #5c6470;
  --text-subtle: #4e5058;
  --text-link: #006ce7;
  --channels-default: #5c6470;
  --text-feedback-critical: #da373c;

  /* Interactive */
  --interactive-background-hover: rgba(116, 124, 138, 0.14);
  --interactive-background-active: rgba(116, 124, 138, 0.22);
  --interactive-background-selected: rgba(116, 124, 138, 0.30);
  --interactive-icon-default: #4e5058;
  --interactive-icon-hover: #313338;
  --interactive-icon-active: #060607;
  --interactive-text-default: #4e5058;
  --interactive-text-hover: #313338;
  --interactive-text-active: #060607;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.28);
  --border-muted: rgba(0, 0, 0, 0.2);
  --border-normal: rgba(0, 0, 0, 0.36);
  --border-strong: rgba(0, 0, 0, 0.48);
  --app-frame-border: hsla(240, 4%, 60.784%, 0.122);

  /* Icons */
  --icon-default: #313338;
  --icon-strong: #060607;
  --icon-muted: #5c6470;
  --icon-subtle: #4e5058;

  /* Controls */
  --control-primary-background-default: #5865f2;
  --control-primary-background-hover: #4752c4;
  --control-primary-background-active: #3b43a8;
  --control-critical-primary-background-default: #da373c;

  /* Input */
  --input-background-default: #e3e5e8;
  --input-border-default: rgba(0, 0, 0, 0.36);
  --input-text-default: #313338;

  /* Scrollbar */
  --scrollbar-auto-thumb: #c1c3c7;
  --scrollbar-thin-thumb: #c1c3c7;

  /* Message */
  --message-background-hover: rgba(0, 0, 0, 0.06);

  /* Compatibility aliases */
  --bg-primary: #ffffff;
  --bg-secondary: #f2f3f5;
  --bg-tertiary: #e3e5e8;
  --text-normal: #313338;
  --header-primary: #060607;
  --header-secondary: #4e5058;
  --interactive-normal: #4e5058;
  --interactive-hover: #313338;
  --interactive-active: #060607;
  --brand-experiment: #5865f2;
  --brand-experiment-hover: #4752c4;
  --input-background: #e3e5e8;
  --danger: #da373c;
  --background-modifier-hover: rgba(116, 124, 138, 0.14);
  --background-modifier-active: rgba(116, 124, 138, 0.22);
  --background-modifier-selected: rgba(116, 124, 138, 0.30);
  --div-border: #e1e2e4;

  --text-feedback-warning: hsl(38.455, 100%, 43.137%);
}


/* ============================================
   ASH THEME (theme-darker)
   ============================================ */
.theme-darker {
  /* Backgrounds */
  --background-base-low: #202225;
  --background-base-lower: #1a1b1e;
  --background-base-lowest: #111214;
  --background-surface-high: #292b2f;
  --background-surface-higher: #2e3035;
  --background-surface-highest: #33363c;
  --chat-background: #202225;
  --channeltextarea-background: #252529;
  --modal-background: #292b2f;
  --panel-bg: hsl(240, 5.882%, 13.333%);
  --embed-background: #242529;

  /* Text */
  --text-default: #f0f1f3;
  --text-strong: #f5f5f7;
  --text-muted: #858993;
  --text-subtle: #a0a4ad;
  --text-link: #00a8fc;
  --channels-default: #858993;
  --text-feedback-critical: #ed4245;

  /* Interactive */
  --interactive-background-hover: rgba(78, 80, 88, 0.15);
  --interactive-background-active: rgba(78, 80, 88, 0.3);
  --interactive-background-selected: rgba(78, 80, 88, 0.4);
  --interactive-icon-default: #a0a4ad;
  --interactive-icon-hover: #dddfe4;
  --interactive-icon-active: #f5f5f7;
  --interactive-text-default: #a0a4ad;
  --interactive-text-hover: #dddfe4;
  --interactive-text-active: #f5f5f7;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-muted: rgba(255, 255, 255, 0.04);
  --border-normal: rgba(255, 255, 255, 0.2);
  --border-strong: rgba(255, 255, 255, 0.44);
  --app-frame-border: hsla(240, 4%, 60.784%, 0.122);

  /* Icons */
  --icon-default: #dddfe4;
  --icon-strong: #f5f5f7;
  --icon-muted: #858993;
  --icon-subtle: #a0a4ad;

  /* Controls */
  --control-primary-background-default: #5865f2;
  --control-primary-background-hover: #4752c4;
  --control-primary-background-active: #3b43a8;
  --control-critical-primary-background-default: #ed4245;

  /* Input */
  --input-background-default: #252529;
  --input-border-default: rgba(255, 255, 255, 0.2);
  --input-text-default: #dddfe4;

  /* Scrollbar */
  --scrollbar-auto-thumb: #15161a;
  --scrollbar-thin-thumb: #15161a;

  /* Message */
  --message-background-hover: rgba(0, 0, 0, 0.08);

  /* Compatibility aliases */
  --bg-primary: #202225;
  --bg-secondary: #1a1b1e;
  --bg-tertiary: #121214;
  --text-normal: #dddfe4;
  --header-primary: #f5f5f7;
  --header-secondary: #a0a4ad;
  --interactive-normal: #a0a4ad;
  --interactive-hover: #dddfe4;
  --interactive-active: #f5f5f7;
  --brand-experiment: #5865f2;
  --brand-experiment-hover: #4752c4;
  --input-background: #252529;
  --danger: #ed4245;
  --background-modifier-hover: rgba(78, 80, 88, 0.15);
  --background-modifier-active: rgba(78, 80, 88, 0.3);
  --background-modifier-selected: rgba(78, 80, 88, 0.4);
  --div-border: #111214;

  --text-feedback-warning: hsl(38.455, 100%, 43.137%);
}


/* ============================================
   ONYX THEME (theme-midnight)
   ============================================ */
.theme-midnight {
  /* Backgrounds */
  --background-base-low: #0c0c14;
  --background-base-lower: #080810;
  --background-base-lowest: #000000;
  --background-surface-high: #141422;
  --background-surface-higher: #1a1a2e;
  --background-surface-highest: #202038;
  --chat-background: #000000;
  --channeltextarea-background: #1a1a2e;
  --modal-background: #141422;
  --panel-bg: #0c0c14;
  --embed-background: #161626;

  /* Text */
  --text-default: #e0def0;
  --text-strong: #f8f8fc;
  --text-muted: #7a7687;
  --text-subtle: #a8a5b5;
  --text-link: #00a8fc;
  --channels-default: #7a7687;
  --text-feedback-critical: #ed4245;

  /* Interactive */
  --interactive-background-hover: rgba(78, 73, 106, 0.2);
  --interactive-background-active: rgba(78, 73, 106, 0.36);
  --interactive-background-selected: rgba(78, 73, 106, 0.48);
  --interactive-icon-default: #a8a5b5;
  --interactive-icon-hover: #e0def0;
  --interactive-icon-active: #f8f8fc;
  --interactive-text-default: #a8a5b5;
  --interactive-text-hover: #e0def0;
  --interactive-text-active: #f8f8fc;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.2);
  --border-muted: rgba(255, 255, 255, 0.16);
  --border-normal: rgba(255, 255, 255, 0.24);
  --border-strong: rgba(255, 255, 255, 0.44);
  --app-frame-border: hsla(240, 4%, 60.784%, 0.122);

  /* Icons */
  --icon-default: #e0def0;
  --icon-strong: #f8f8fc;
  --icon-muted: #7a7687;
  --icon-subtle: #a8a5b5;

  /* Controls */
  --control-primary-background-default: #5865f2;
  --control-primary-background-hover: #4752c4;
  --control-primary-background-active: #3b43a8;
  --control-critical-primary-background-default: #ed4245;

  /* Input */
  --input-background-default: #1a1a2e;
  --input-border-default: rgba(255, 255, 255, 0.24);
  --input-text-default: #e0def0;

  /* Scrollbar */
  --scrollbar-auto-thumb: #1a1a2e;
  --scrollbar-thin-thumb: #1a1a2e;

  /* Message */
  --message-background-hover: rgba(0, 0, 0, 0.12);

  /* Compatibility aliases */
  --bg-primary: #0c0c14;
  --bg-secondary: #080810;
  --bg-tertiary: #000000;
  --text-normal: #e0def0;
  --header-primary: #f8f8fc;
  --header-secondary: #a8a5b5;
  --interactive-normal: #a8a5b5;
  --interactive-hover: #e0def0;
  --interactive-active: #f8f8fc;
  --brand-experiment: #5865f2;
  --brand-experiment-hover: #4752c4;
  --input-background: #1a1a2e;
  --danger: #ed4245;
  --background-modifier-hover: rgba(78, 73, 106, 0.2);
  --background-modifier-active: rgba(78, 73, 106, 0.36);
  --background-modifier-selected: rgba(78, 73, 106, 0.48);
  --div-border: #080810;

  --text-feedback-warning: hsl(38.455, 100%, 43.137%);
}


/* ============================================
   MOBILE OVERRIDES – Dark theme only
   Darker, more unified backgrounds when .is-mobile is active.
   Override --bg-tertiary so inline styles using var(--bg-tertiary)
   (e.g. .channel-list in Sidebar.jsx) also pick up the new color.
   ============================================ */

/* Override the variable so all var(--bg-tertiary) usages resolve to #1C1D22 */
.theme-dark .is-mobile {
  --bg-tertiary: #1C1D22;
}

/* Server list needs a different (darker) color than --bg-tertiary */
.theme-dark .is-mobile .server-list {
  background-color: #141318;
}

/* Remove borders on channel panel and DM view (inline styles, needs !important) */
.theme-dark .is-mobile .channel-panel,
.theme-dark .is-mobile .channel-list {
  border-left: none !important;
}

/* Chat area/header use var(--bg-primary), not --bg-tertiary, so override explicitly */
.theme-dark .is-mobile .chat-container,
.theme-dark .is-mobile .chat-area,
.theme-dark .is-mobile .chat-header,
.theme-dark .is-mobile .chat-input-form {
  background-color: #1C1D22;
}

.theme-dark .is-mobile .chat-header {
  border-bottom: 1px solid var(--app-frame-border);
}

.theme-dark .is-mobile .chat-input-wrapper {
  background-color: #26262E;
}