: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;
  /* Standalone copy of the accepted workspace scale; no root build imports. */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 24px;
  --sl-space-6: 32px;
  --sl-space-7: 48px;
  --sl-button-height: 32px;
  --sl-control-height: 40px;
  --sl-radius: 4px 26px 4px 26px;
  --sl-button-radius: 4px 16px 4px 16px;
  --sl-page-gutter: clamp(16px, 2vw, 24px);
  --bg: #0b0d12;
  --panel: #11141b;
  --panel-2: #171b23;
  --line: #292f3b;
  --text: #f3f5f7;
  --muted: #a4aaba;
  --plus-ink: #dce5f0;
  --plus-surface: color-mix(in srgb, var(--plus-ink) 12%, var(--panel));
  --plus-border: color-mix(in srgb, var(--plus-ink) 55%, var(--line));
  --gold: #ffc56e;
  --green: #76d5b0;
  --creator-surface: color-mix(in srgb, var(--gold) 12%, var(--panel));
  --creator-border: color-mix(in srgb, var(--gold) 55%, var(--line));
  --surface-edge: var(--brand-accent-border);
  --card-shadow: inset 4px 0 0 var(--surface-edge), 0 6px 0 color-mix(in srgb, var(--brand-accent) 18%, var(--bg));
  --control-shadow: inset 0 -3px 0 color-mix(in srgb, var(--text) 15%, transparent);
  /* Compatibility alias for the existing public-site components. */
  --purple: var(--brand-accent-text);
  --orange: var(--brand-accent-text);
}

::selection { background: var(--brand-accent-strong); }