/* Warden: Refined Utility Messenger. Send has a separately protected contract. */
:root {
  --surface-0: #0c0f13;
  --surface-1: #141920;
  --surface-2: #1c222b;
  --surface-3: #242c36;
  --text-primary: #e7edf5;
  --text-secondary: #b2bccb;
  --text-tertiary: #8e9aaa;
  --separator: #303946;
  --separator-soft: #242d38;
  --control-hover: #303946;
  --accent: #2f6fed;
  --accent-hover: #255fce;
  --accent-active: #1e4fae;
  --focus: #83afff;
  --link: #a4c6ff;
  --outgoing: #285eb8;
  --destructive: #ff9499;
  --destructive-border: #85424a;
  --presence: #3ecf8e;
  --success-fill: #207a50;
  --search-match-bg: #c9ddff;
  --search-match-text: #162a48;
  --search-match-active: #164598;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --type-meta: 12px;
  --type-body: 14px;
  --type-message: 15px;
  --type-title: 18px;
  --weight-body: 400;
  --weight-control: 500;
  --weight-heading: 600;
  --radius-small: 6px;
  --radius-control: 8px;
  --radius-surface: 12px;
  --radius-bubble: 14px;
  --control-height: 40px;
  --touch-target: 44px;
  --icon-size: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.22);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --sidebar-w: 310px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-panel: 220ms;
  --motion-close: 100ms;
  --motion-ease-out: cubic-bezier(.2,.8,.2,1);
  --motion-ease-in: cubic-bezier(.4,0,1,1);
  --motion-press: .98;
  --motion-distance: 8px;
  --motion-small-distance: 3px;
  /* Compatibility names keep every existing functional component on this layer. */
  --bg: var(--surface-0);
  --bg-elevated: var(--surface-2);
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --panel-3: var(--surface-3);
  --border: var(--separator);
  --border-soft: var(--separator-soft);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-muted: var(--text-tertiary);
  --accent-hi: var(--focus);
  --accent-dim: var(--accent-active);
  --accent-ink: #fff;
  --online: var(--presence);
  --danger: var(--destructive);
  --danger-dim: var(--destructive-border);
  --radius-sm: var(--radius-control);
  --radius: var(--radius-surface);
  --radius-lg: var(--radius-bubble);
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #f5f7fb;
  --surface-1: #edf1f7;
  --surface-2: #e2e8f1;
  --surface-3: #fff;
  --text-primary: #182332;
  --text-secondary: #44536a;
  --text-tertiary: #536278;
  --separator: #bdc9d8;
  --separator-soft: #d0d9e5;
  --control-hover: #bdc9d8;
  --accent: #245dca;
  --accent-hover: #174dad;
  --accent-active: #153d88;
  --focus: #174dad;
  --link: #174dad;
  --outgoing: #245dca;
  --destructive: #ae2028;
  --destructive-border: #cb8a8e;
  --presence: #117a4c;
  --shadow: 0 8px 24px rgba(20,35,55,.13);
  --shadow-sm: 0 2px 8px rgba(20,35,55,.1);
}