/* Echo-Host Panel V2 — dark design tokens, reference: 29/10/2026. */
:root {
  color-scheme: dark;
  --background: #04070D;
  --card: #0A101A;
  --surface-raised: #131D2C;
  --muted: var(--surface-raised);
  --border: #1F2C40;
  --border-subtle: rgba(31, 44, 64, .70);
  --primary: #3F8CFF;
  --primary-hover: #2F7BF0;
  --primary-foreground: #04070D;
  --accent: #8B5CF6;
  --indigo: #6366F1;
  --highlight: #7DB4FF;
  --ring: #5B9DFF;
  --foreground: #EDF2FA;
  --card-foreground: var(--foreground);
  --muted-foreground: #94A3B8;
  --subtle-foreground: #6B7B93;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #38BDF8;

  /* RGB channels keep translucent surfaces tied to the same palette. */
  --background-rgb: 4 7 13;
  --card-rgb: 10 16 26;
  --surface-raised-rgb: 19 29 44;
  --border-rgb: 31 44 64;
  --primary-rgb: 63 140 255;
  --accent-rgb: 139 92 246;
  --highlight-rgb: 125 180 255;
  --ring-rgb: 91 157 255;
  --foreground-rgb: 237 242 250;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .42);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --brand-gradient: linear-gradient(135deg, #3F8CFF 0%, #8B5CF6 100%);
  --radius: .75rem;
  --radius-dialog: 1rem;
  --radius-brand: 30px;
  --space-unit: 4px;
  --header-height: 64px;
  --content-max: 1500px;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}