:root {
  --brand-accent: #4f8cff;
  --brand-accent-strong: #3470dc;
  --brand-accent-soft: #4f8cff1f;
  --brand-accent-surface: #14233d;
  --brand-accent-border: #365f9e;
  --brand-accent-text: #c9dcff;
  --brand-focus-ring: #79a8ff;
  --platform-twitch: #a970ff;
  --platform-kick: #53fc18;
  --platform-youtube: #ff4e61;
  /* Compatibility alias for the existing public-site components. */
  --purple: var(--brand-accent);
}

::selection { background: var(--brand-accent-strong); }
.button { border-color: var(--brand-accent-border); }
.primary, .skip-link { background: var(--brand-accent-strong); }
.primary { border-color: var(--brand-accent); }
.primary:hover { background: var(--brand-accent); }
.streamer.active, .selected { border-color: var(--brand-accent-border) !important; background: var(--brand-accent-surface) !important; color: var(--brand-accent-text) !important; }
.ui-button { border-color: var(--brand-accent-border); background: var(--brand-accent-surface); color: var(--brand-accent-text); }