/**
 * PaddleScoreByNawaaz — shared design tokens
 * ---------------------------------------------
 * One source of truth for color, type and spacing so the operator dashboard
 * and every OBS overlay look like parts of the same broadcast package.
 *
 * Loaded by every page in the app (operator + all overlays).
 */

:root {
  /* ---- Brand / broadcast palette -------------------------------------- */
  --ps-navy-950: #0a0d14;   /* scoreboard background */
  --ps-navy-900: #12161f;
  --ps-navy-800: #1b2130;
  --ps-navy-700: #262e42;
  --ps-navy-600: #333d56;

  --ps-red: #e4002b;        /* team 1 default / primary accent */
  --ps-red-dim: #9c0020;
  --ps-blue: #0b3d91;       /* team 2 default */
  --ps-blue-dim: #082a66;
  --ps-gold: #f5c518;       /* serving indicator, highlights */
  --ps-green: #21c17c;      /* live / success */

  --ps-white: #ffffff;
  --ps-fog: #c9cfdc;        /* secondary text on dark */
  --ps-mist: #8892a6;       /* tertiary text on dark */

  /* Operator dashboard (light, clean, non-broadcast) */
  --ps-bg: #f5f6f9;
  --ps-surface: #ffffff;
  --ps-surface-alt: #eef0f5;
  --ps-border: #e1e4ec;
  --ps-text: #171a21;
  --ps-text-muted: #626878;

  /* ---- Type -------------------------------------------------------------
     Oswald: condensed, bold, high-contrast — reads well on a scorebug even
     at small broadcast sizes. Inter: clean UI font for the operator panel. */
  --ps-font-display: "Oswald", "Arial Narrow", sans-serif;
  --ps-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing / radius / shadow --------------------------------------- */
  --ps-radius-sm: 4px;
  --ps-radius-md: 8px;
  --ps-radius-lg: 16px;
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 24px;
  --ps-space-6: 32px;

  --ps-shadow-broadcast: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ps-shadow-ui: 0 1px 3px rgba(23, 26, 33, 0.08), 0 1px 2px rgba(23, 26, 33, 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.ps-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}