/* Knot VPN branding — Dark (default) */
:root {
  --bg-primary: #0a0f1a;
  --bg-secondary: #121a24;
  --bg-tertiary: #1a2432;
  --border: #1e3042;
  --border-hover: #2a4358;
  --text-primary: #f0fbfe;
  --text-secondary: #8abacf;
  --text-muted: #4a6b80;
  --hover-bg: rgba(92, 216, 229, 0.08);
  --segment-empty: #2a4358;
  --accent: #5cd8e5;
  --color-green: #5cd8e5;
  --color-red: #ef6b6b;
  --color-yellow: #f5c451;
  --filter-online-bg: rgba(92, 216, 229, 0.15);
  --filter-offline-bg: rgba(239, 107, 107, 0.15);
  --btn-active-bg: rgba(92, 216, 229, 0.1);
  --btn-active-border: rgba(92, 216, 229, 0.35);
}

/* Knot VPN branding — Light (html.light set by Alpine.js) */
html.light {
  --bg-primary: #eef5f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #d9e8f0;
  --border: #b8cddb;
  --border-hover: #8faec1;
  --text-primary: #0a1824;
  --text-secondary: #38596f;
  --text-muted: #6b8a9e;
  --hover-bg: rgba(30, 139, 199, 0.08);
  --segment-empty: #b8cddb;
  --accent: #1e8bc7;
  --color-green: #1e8bc7;
  --color-red: #d8423e;
  --color-yellow: #d68d1a;
  --filter-online-bg: rgba(30, 139, 199, 0.15);
  --filter-offline-bg: rgba(216, 66, 62, 0.15);
  --btn-active-bg: rgba(30, 139, 199, 0.1);
  --btn-active-border: rgba(30, 139, 199, 0.35);
}

/* Slightly larger header logo for brand presence */
header img[alt*="logo" i],
header svg[aria-label*="Knot" i] {
  max-height: 36px;
  width: auto;
}