/*
 * tokens.css — single source of truth for the web layer.
 * Mirrors X1Sport-Scores/Core/Theme/Theme.swift. Change brand values here once.
 */
:root {
  /* Brand palette (Theme.Palette) */
  --brand-top: #2F7FE0;
  --brand-bottom: #0E4A91;
  --header: #1A5FB4;
  --accent: #2F9AFF;
  --accent-soft: rgba(47, 154, 255, 0.18);
  --live: #E53935;
  --positive: #27AE60;
  --warning: #F5A524;
  --danger: #C62828;

  --background: #0D2137;
  --surface: #152D45;
  --card: #152D45;

  --text-primary: #FFFFFF;
  --text-secondary: #8BA4C0;
  --text-tertiary: #5A7A98;
  --hairline: rgba(255, 255, 255, 0.08);
  --surface-tint: rgba(255, 255, 255, 0.06);

  /* Geometry (Theme.Metric) */
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Glow */
  --glow-accent: rgba(47, 154, 255, 0.45);

  /* Typography — SF Pro Display via system stack (matches .system design) */
  --font-display: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
}

/* Full-screen navy backdrop with electric-blue glow — mirrors the in-app gradient. */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px circle at 50% -6%, rgba(47, 127, 224, 0.55), transparent 58%),
    radial-gradient(820px circle at 92% 108%, rgba(47, 154, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #1A5FB4 0%, #103E78 38%, #0D2137 78%, #0A1A2C 100%);
}