/* Shared design tokens — one source of truth for every surface (phone/screen/metrics/map). */
:root {
  /* FIFA World Cup 26 — Trionda. The official match ball is white with the three host
     colors (Canada red, Mexico green, USA blue) on a stadium-night navy. */
  --bg: #070c1a;
  --bg-elev: #0f1830;
  --fg: #eef3ff;
  --muted: #93a3c8;
  --accent: #2f80ff;        /* USA blue — primary */
  --accent-2: #15336b;      /* deep blue (chips, pills) */
  --wc-red: #ff3b4e;        /* Canada */
  --wc-green: #2bd96a;      /* Mexico */
  --wc-blue: #2f80ff;       /* USA */
  --gold: #f7c948;          /* trophy gold */
  --warn: #ffb020;
  --danger: #ff5470;
  --radius: 16px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: radial-gradient(1200px 800px at 50% -10%, #16306a 0%, var(--bg) 62%);
  color: var(--fg);
  min-height: 100vh;
}

/* "Three waves" — a tri-color host-nation stripe across the top of every surface. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 200;
  background: linear-gradient(90deg, var(--wc-red) 0 33%, var(--wc-green) 33% 66%, var(--wc-blue) 66% 100%);
}

/* Tri-color wordmark (the Trionda waves) for the brand. */
.wc-grad {
  background: linear-gradient(90deg, var(--wc-red), var(--wc-green) 52%, var(--wc-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-elev);
  border: 1px solid #243150;
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--accent); }
.dot.warn { background: var(--warn); }

/* "Powered by" footer (MongoDB + Voyage AI logos) — see /shared/footer.js */
.poweredby { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.poweredby .pb-label { color: var(--muted); font-size: 13px; letter-spacing: .02em; }
.poweredby .pb-logo { height: 22px; width: auto; display: block; }
.poweredby .pb-sep { width: 1px; height: 20px; background: #2a3760; }