/* ===== DESIGN TOKENS — CURVA DA BOLA ===== */
/* Paleta: fundo escuro + cores da bandeira do Brasil */
:root {
  /* ── Fundo (dark) ─────────────────────────────────────── */
  --bg-primary:    #0a0f0d;   /* quase-preto com tom verde escuro */
  --bg-secondary:  #111a14;
  --bg-card:       #172019;
  --bg-card-hover: #1e2b1f;
  --bg-glass:      rgba(23, 32, 25, 0.85);

  /* ── Bandeira do Brasil ───────────────────────────────── */
  --brasil-verde:  #009c3b;   /* verde da bandeira */
  --brasil-amarelo:#FFDF00;   /* amarelo da bandeira */
  --brasil-azul:   #002776;   /* azul da bandeira */
  --brasil-branco: #FFFFFF;

  /* ── Accents ──────────────────────────────────────────── */
  --accent-green:  #00c853;   /* verde vibrante derivado */
  --accent-yellow: #FFDF00;   /* amarelo bandeira */
  --accent-blue:   #1565c0;   /* azul bandeira (mais claro p/ dark) */
  --accent-red:    #ff1744;
  --accent-orange: #ff6d00;

  /* ── Gradients ────────────────────────────────────────── */
  --grad-brand:    linear-gradient(135deg, #009c3b 0%, #FFDF00 55%, #002776 100%);
  --grad-yellow:   linear-gradient(135deg, #FFDF00 0%, #f9a825 100%);
  --grad-green:    linear-gradient(135deg, #009c3b 0%, #00c853 100%);
  --grad-live:     linear-gradient(135deg, #ff1744 0%, #ff6d00 100%);
  --grad-card:     linear-gradient(180deg, rgba(255,255,255,0.035) 0%, transparent 100%);

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:   #e8f5e9;   /* branco com toque verde */
  --text-secondary: #81c784;   /* verde claro */
  --text-muted:     #4a6b4e;
  --text-inverse:   #0a0f0d;

  /* ── Status ───────────────────────────────────────────── */
  --status-live:      #ff1744;
  --status-scheduled: #FFDF00;
  --status-finished:  #4a6b4e;
  --status-live-bg:   rgba(255, 23, 68, 0.1);
  --status-sched-bg:  rgba(255, 223, 0, 0.10);
  --status-fin-bg:    rgba(74, 107, 78, 0.15);

  /* ── Borders ──────────────────────────────────────────── */
  --border-subtle:  rgba(0, 156, 59, 0.08);
  --border-default: rgba(0, 156, 59, 0.15);
  --border-strong:  rgba(255, 223, 0, 0.20);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg:          0 8px 32px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-glow-green:  0 0 20px rgba(0, 156, 59, 0.30);
  --shadow-glow-yellow: 0 0 20px rgba(255, 223, 0, 0.25);
  --shadow-glow-live:   0 0 20px rgba(255, 23, 68, 0.30);

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Typography ───────────────────────────────────────── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', 'Inter', sans-serif;

  /* ── Transitions (GPU only) ───────────────────────────── */
  --trans-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max: 1200px;
  --header-height: 64px;
}

/* Reduzir animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}