:root {
  /* Poll radar rotation; blip timing in JS follows the real sweep animation duration (safe to tune 5s/6s/…). */
  --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. */
  --header-bar-height: calc(clamp(46px, 1.2vw + 40px, 66px) * var(--header-ui-scale-factor));
  /* Must match header padding-block — used so logo/radar math fits inside border-box height. */
  --header-pad-block: clamp(4px, 0.65vw, 9px);
  /*
   * Icons/buttons must include vw — bar height alone only spans ~18px on typical desktops, so
   * glyph/hit looked “stuck” (e.g. 13px→15px). bar + vw makes resize visibly respond.
   */
  --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));
  /* Wordmark next to radar — tied to bar + vw so it scales with chrome. */
  --header-logo-text: calc(clamp(17px, calc(var(--header-bar-height) * 0.4 + 0.5vw), 28px) * var(--header-ui-scale-factor));
  /*
   * ~75% of bar height; capped to the inner row (bar − vertical padding) so the dish does not
   * collide with border-box padding on wide layouts.
   */
  --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));
  /* Horizontal inset inside the sidebar toggle only (collapse control). */
  --header-toggle-inset-x: calc(clamp(5px, calc(var(--header-bar-height) * 0.065 + 0.18vw), 10px) * var(--header-ui-scale-factor));
  /* Space between the vertical rule and the radar (independent of toggle padding). */
  --header-rule-to-radar-gap: clamp(9px, calc(var(--header-bar-height) * 0.11 + 0.28vw), 16px);
  /* Space between the radar and the InGame.lol wordmark. */
  --header-radar-to-wordmark-gap: calc(clamp(4px, 0.55vw + 2px, 8px) * var(--header-ui-scale-factor));
  /* Layout box for tab SVG (no CSS scale — avoids paint vs padding mismatch); ~old 1.85×1.4 look. */
  --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;
  --accent:        #e8344a;
  --accent-dim:    #4a1020;
  /* Stream tile hover ring: solid accent (not washed / “see-through” vs dark chrome) */
  --accent-stream-hover: var(--accent);
  /* Drag-over ring: a touch brighter than stream hover. */
  --accent-drag-target: #f04d62;
  --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;
}