:root {
  /* Poll radar rotation (ingame); unused in splitstream header but kept for shared token parity. */
  --poll-radar-period: 2.25s;
  --sweep-flash-advance: 0ms;
  --ui-scale:      1.25;
  /* Relative factor so 1.25 is visual baseline for header sizing math. */
  --header-ui-scale-factor: calc(var(--ui-scale, 1.25) / 1.25);
  /* Applied on `header` with --ui-scale: 1 at ~1280px+; ramps down only on narrower viewports. */
  --header-viewport-scale: clamp(0.62, 100vw / 1280, 1);
  /* Un-zoomed bar height; .app / stream calcs reference this (zoom is on header only). */
  --header-bar-height: calc(clamp(46px, 1.2vw + 40px, 66px) * var(--header-ui-scale-factor));
  --header-pad-block: clamp(4px, 0.65vw, 9px);
  --header-glyph: calc(clamp(12px, calc(var(--header-bar-height) * 0.17 + 0.4vw), 18px) * var(--header-ui-scale-factor));
  --header-hit: calc(clamp(28px, calc(var(--header-bar-height) * 0.36 + 0.75vw), 44px) * var(--header-ui-scale-factor));
  --header-logo-text: calc(clamp(17px, calc(var(--header-bar-height) * 0.4 + 0.5vw), 28px) * var(--header-ui-scale-factor));
  --header-radar: min(
    calc(var(--header-bar-height) * 0.7),
    calc(var(--header-bar-height) - 2 * var(--header-pad-block))
  );
  --header-btn-text: calc(clamp(10px, calc(var(--header-bar-height) * 0.17 + 0.42vw), 14px) * var(--header-ui-scale-factor));
  --header-toggle-inset-x: calc(clamp(5px, calc(var(--header-bar-height) * 0.065 + 0.18vw), 10px) * var(--header-ui-scale-factor));
  /* Space beside the collapse column (no radar here — name kept for parity with ingame). */
  --header-rule-to-radar-gap: clamp(9px, calc(var(--header-bar-height) * 0.11 + 0.28vw), 16px);
  /* Space between collapse column (divider) and wordmark. */
  --header-radar-to-wordmark-gap: calc(clamp(10px, 0.75vw + 5px, 16px) * var(--header-ui-scale-factor));
  --header-sidebar-tab-slot: calc(var(--header-glyph) * 2.75);
  --bg-deep:       #0d0d0f;
  --bg-panel:      #121214;
  --bg-card:       #18181c;
  --bg-card-hover: #1e1e24;
  --border:        #242430;
  --border-bright: #30303d;
  /* Light blue site chrome */
  --accent:        #7ec8e8;
  --accent-muted:  #4a8fb0;
  --accent-dim:    #1a3a4a;
  --accent-stream-hover: var(--accent);
  --accent-drag-target: #9fdcf5;
  /* LIVE (streaming) — distinct red */
  --status-live:       #e8344a;
  --status-live-dim:   #4a1020;
  --green-live:    #3ddc84;
  --green-dim:     #1a4a30;
  --red-danger:    #ff6b6b;
  --text-primary:  #e0e0e8;
  --text-secondary:#7a8090;
  --text-dim:      #3a3a48;
  --cell-bar-muted:#8f98ab;
  --amber-ghost:   #f59e0b;
  --amber-dim:     #3d2a08;
  --blue-live:     #38bdf8;
  --blue-dim:      #0c2a3d;
  --purple-variety:#a78bfa;
  --purple-dim:    #3b2f55;
}