/* ================================
   Bullseye Theme & Design Tokens
   Edit THIS file to rebrand quickly
   ================================ */

:root{
  /* ---------- Brand ---------- */
  --brand-name: "Bullseye";

  /* ---------- Base palette (define BOTH hex + rgb for rgba usage) ---------- */
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;

  --color-bg: #050500;
  --color-panel: #121623;
  --color-text: #e9edf6;
  --color-muted: #a7b0c0;
  --color-accent: #fbbf24; /* gold */

  /* RGB companions (keep in sync with the hex above) */
  --color-bg-rgb: 5, 5, 0;
  --color-panel-rgb: 18, 22, 35;
  --color-text-rgb: 233, 237, 246;
  --color-muted-rgb: 167, 176, 192;
  --color-accent-rgb: 251, 191, 36;
  --team-neutral-rgb: 28, 1, 26;

  /* ---------- Opacity scale (use everywhere instead of hardcoded rgba) ---------- */
  --a-00: 0;
  --a-04: .04;
  --a-06: .06;
  --a-08: .08;
  --a-10: .10;
  --a-14: .14;
  --a-18: .18;
  --a-20: .20;
  --a-22: .22;
  --a-25: .25;
  --a-30: .30;
  --a-35: .35;
  --a-60: .60;
  --a-65: .65;
  --a-80: .80;
  --a-98: .98;

  /* ---------- Semantic surfaces ---------- */
  --color-border: rgba(var(--rgb-white), var(--a-10));
  --color-hover: rgba(var(--rgb-white), var(--a-06));
  --color-btn: rgba(var(--rgb-white), var(--a-08));

  /* Header / overlays */
  --header-bg-rgb: 11, 13, 18;
  --header-bg: rgba(var(--header-bg-rgb), var(--a-65));

  --overlay-backdrop: rgba(var(--rgb-black), var(--a-65));
  --modal-panel-bg: rgba(var(--color-panel-rgb), var(--a-98));
  --surface-04: rgba(var(--rgb-white), var(--a-04));
  --surface-06: rgba(var(--rgb-white), var(--a-06));
  --surface-08: rgba(var(--rgb-white), var(--a-08));
  --surface-10: rgba(var(--rgb-white), var(--a-10));
  --surface-14: rgba(var(--rgb-white), var(--a-14));
  --surface-22: rgba(var(--rgb-white), var(--a-22));

  /* ---------- Teams ---------- */
  --team-blue-name: "Blue Team";
  --team-blue-color: #3b82f6;
  --team-blue-rgb: 59, 130, 246;
  --team-blue-rgb-dark: 1, 21, 54;

  --team-red-name: "Red Team";
  --team-red-color: #ef4444;
  --team-red-rgb: 239, 68, 68;
  --team-red-rgb-dark: 71, 1, 1;

  --team-green-name: "Green Team";
  --team-green-color: #22c55e;
  --team-green-rgb: 34, 197, 94;
  --team-green-rgb-dark: 0, 33, 13;

  /* Team effects */
  --team-outline-a: var(--a-25);
  --team-selected-bg-a: var(--a-18);
  --team-selected-ring-a: var(--a-35);

  /* ---------- Effects ---------- */
  --card-radius: 18px;
  --btn-radius: 12px;
}