/* Beam design system — one source of truth for tokens + shared primitives.
   Link this BEFORE any page's own <style>, and delete that page's :root token
   line, so every existing var(--…) reference adopts the owned palette at once.
   Single-theme by intent: Beam is a dark broadcast tool. */

:root{
  /* ── grounds & panels (cool near-black, slight blue bias) ── */
  --bg:#0a0c11;          --bg2:#0d1017;
  --panel:#12151d;       --panel2:#171c26;      --raise:#1d2330;

  /* ── borders (alpha — sit correctly on any panel tone) ── */
  --border:rgba(255,255,255,.08);    --border-strong:rgba(255,255,255,.15);
  --border2:rgba(255,255,255,.15);   /* legacy alias → strong */

  /* ── text ── */
  --head:#f3f5f9;   --text:#cfd5df;   --muted:#868f9e;   --faint:#5c6472;

  /* ── accent: owned periwinkle → violet (NOT github blue) ── */
  --accent:#6f8bff;   --accent2:#a374ff;   --accent-d:#5570e6;   --violet:#a374ff; /* legacy alias */
  --accent-weak:color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-grad:linear-gradient(135deg, var(--accent), var(--accent2));

  /* ── semantic (separate from accent) ── */
  --live:#ff4d4f;    /* tally red — LIVE / REC only */
  --danger:#ff5a5f;  --good:#3ecf8e;   --green:#3ecf8e;  /* legacy alias */
  --amber:#f5a524;   /* rewind / caution */
  /* legacy semantic aliases (operator/dashboard pages) */
  --red:#ff5a5f;  --red-bg:color-mix(in srgb, var(--danger) 20%, var(--panel));
  --green-bg:color-mix(in srgb, var(--good) 20%, var(--panel));  --chip:#171c26;

  /* ── radius (exactly three) ── */
  --radius-sm:6px;   --radius:10px;   --radius-lg:16px;

  /* ── elevation ── */
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.75);
  --shadow-menu:0 8px 28px -8px rgba(0,0,0,.7);
  --shadow-modal:0 20px 60px -20px rgba(0,0,0,.8);

  /* ── type ── */
  --font-sans:"SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* ── motion ── */
  --t-fast:120ms;   --t-med:180ms;   --ease:cubic-bezier(.2,.85,.2,1);
}

/* ── global affordances every surface inherits ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);
}
::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); color:#fff; }

/* thin, subtle scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--faint); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── shared utilities / primitives (namespaced, won't fight page styles) ── */
.icon{ display:block; flex:none; }
.mono{ font-family:var(--font-mono); }
.tabnum{ font-variant-numeric:tabular-nums; }

/* icon button — used for tile chrome, dvr, comms, menu closers */
.iconbtn{
  display:inline-grid; place-items:center; cursor:pointer; color:var(--text);
  background:color-mix(in srgb, #000 45%, transparent); border:1px solid var(--border);
  width:30px; height:30px; border-radius:var(--radius-sm); padding:0;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.iconbtn:hover{ background:color-mix(in srgb, #000 30%, transparent); border-color:var(--border-strong); color:var(--head); }
.iconbtn.on{ background:var(--accent-weak); border-color:var(--accent); color:#dfe6ff; }
.iconbtn.icon-lg{ width:44px; height:44px; border-radius:50%; }

/* status badges for tiles: LIVE (tally) / REWIND (amber) */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.06em; font-weight:600; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; line-height:1; white-space:nowrap;
  background:color-mix(in srgb, #000 55%, transparent); color:var(--text);
  border:1px solid var(--border);
}
.badge .b-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.live{ color:#fff; background:var(--live); border-color:transparent; }
.badge.live .b-dot{ background:#fff; animation:beam-pulse 1.8s infinite; }
.badge.rewind{ color:#1c130a; background:var(--amber); border-color:transparent; }
/* signal-quality chip — surfaced only when a feed degrades (never on a healthy tile) */
.badge.sig{ letter-spacing:.04em; }
.badge.sig.warn{ color:#1c130a; background:var(--amber); border-color:transparent; }
.badge.sig.bad{ color:#fff; background:var(--live); border-color:transparent; }
.badge.sig.bad .b-dot{ background:#fff; animation:beam-pulse 1.2s infinite; }

@keyframes beam-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 6px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }