/* =============================================
   variables.css — ADB Baseball Design Tokens
   ============================================= */

:root {
  /* Brand Colors */
  --color-red:        #CC0000;
  --color-red-dark:   #990000;
  --color-red-light:  #e60000;
  --color-navy:       #0D1B3E;
  --color-navy-mid:   #152b5e;
  --color-navy-light: #1e3a72;
  --color-white:      #ffffff;

  /* Neutral */
  --color-gray-100:   #f5f5f5;
  --color-gray-200:   #e8e8e8;
  --color-gray-400:   #aaaaaa;
  --color-gray-600:   #666666;
  --color-gray-800:   #222222;

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;

  /* Status */
  --color-win:        #2e7d32;
  --color-win-bg:     #e8f5e9;
  --color-loss:       #c62828;
  --color-loss-bg:    #ffebee;

  /* ─── TIPOGRAFÍA MEJORADA ─── */
  /* Antes: Oswald + Barlow + Barlow Condensed (genérico) */
  /* Ahora: Space Grotesk (display) + Plus Jakarta Sans (body) */
  --font-display:    'Space Grotesk', sans-serif;
  --font-body:       'Plus Jakarta Sans', sans-serif;
  --font-condensed:  'Space Grotesk', sans-serif;

  /* Spacing */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   40px;
  --spacing-2xl:  64px;
  --spacing-3xl:  80px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.14);
  --shadow-red: 0 8px 20px rgba(204,0,0,0.40);

  /* Transitions */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max: 1400px;
  --navbar-height: 72px;
}