/* ==========================================================================
   BCLWEB - MODERN DESIGN SYSTEM TOKENS (EA SPORTS FC + SOFASCORE HYBRID)
   ========================================================================== */

:root {
  /* Surface & Canvas Gradients */
  --bcl-bg-canvas: #060a12;
  --bcl-bg-deep: #0a1120;
  --bcl-bg-surface: #0f1d32;
  --bcl-bg-surface-elevated: #162844;
  --bcl-bg-surface-glass: rgba(15, 29, 50, 0.78);
  --bcl-bg-card: rgba(18, 34, 60, 0.65);
  --bcl-bg-card-hover: rgba(25, 46, 80, 0.85);

  /* Neon Brand & Accent Palettes */
  --bcl-neon-cyan: #00f2fe;
  --bcl-neon-cyan-glow: rgba(0, 242, 254, 0.45);
  --bcl-neon-blue: #4facfe;
  --bcl-neon-lime: #00e676;
  --bcl-neon-lime-glow: rgba(0, 230, 118, 0.45);
  --bcl-gold-primary: #ffd700;
  --bcl-gold-glow: rgba(255, 215, 0, 0.45);
  --bcl-gold-grad: linear-gradient(135deg, #ffe066 0%, #f59e0b 50%, #d97706 100%);
  --bcl-ballon-grad: linear-gradient(135deg, #fff2a3 0%, #ffd700 45%, #b8860b 100%);
  --bcl-danger: #ff4757;
  --bcl-warning: #ffa502;

  /* Glassmorphism & Borders */
  --bcl-glass-blur: blur(20px);
  --bcl-border-subtle: rgba(255, 255, 255, 0.08);
  --bcl-border-glow: rgba(0, 242, 254, 0.35);
  --bcl-border-gold: rgba(255, 215, 0, 0.35);
  --bcl-shadow-ambient: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
  --bcl-shadow-glow-cyan: 0 0 25px rgba(0, 242, 254, 0.25);
  --bcl-shadow-glow-lime: 0 0 25px rgba(0, 230, 118, 0.25);
  --bcl-shadow-glow-gold: 0 0 30px rgba(255, 215, 0, 0.3);

  /* Typography */
  --bcl-font-display: 'Chakra Petch', 'Rajdhani', sans-serif;
  --bcl-font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --bcl-font-mono: 'Rajdhani', monospace;

  /* Mobile Ergonomics & Dimensions */
  --bcl-header-height: 62px;
  --bcl-bottom-nav-height: 68px;
  --bcl-radius-xs: 8px;
  --bcl-radius-sm: 12px;
  --bcl-radius-md: 18px;
  --bcl-radius-lg: 24px;
  --bcl-radius-pill: 9999px;

  /* Safe Area Insets for iOS & Android */
  --bcl-safe-top: env(safe-area-inset-top, 0px);
  --bcl-safe-bottom: env(safe-area-inset-bottom, 0px);
}