/* =====================================================
   VARIABLES GLOBALES - SISTEMA DE DESIGN TOKENS
   ===================================================== */
:root {
  /* Paleta principal */
  --primary: #1a2f4b;
  --secondary: #2a3f5f;
  --accent: #fdc500;
  --accent-light: #ffd500;
  --accent-dark: #e5c158;
  --blue-light: #3a4f6f;

  /* Texto y fondos */
  --text-dark: #1a1a1a;
  --text-light: #5a6a72;
  --text-muted: #8aa0ad;
  --bg-light: #f8f9fa;
  --bg-dark: #1a2f4b;
  --paper: #ffffff;
  --white: #ffffff;

  /* Bordes y efectos */
  --border: #e0e5e8;
  --border-light: #e6edf2;
  --gold: #fdc500;
  --ring: rgba(253, 197, 0, 0.35);

  /* Sistema de Border Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* Sistema de Sombras */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.20);
  --shadow-accent: 0 8px 25px rgba(253, 197, 0, 0.4);
  --shadow-accent-lg: 0 12px 35px rgba(253, 197, 0, 0.5);

  /* Sistema de Transiciones */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.6s ease;
  --transition-transform: transform 0.3s ease;

  /* Espaciado y contenedores */
  --maxw: 1400px;
  --maxw-content: 900px;
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;

  /* Breakpoints (para referencia en JS) */
  --screen-sm: 480px;
  --screen-md: 768px;
  --screen-lg: 992px;
  --screen-xl: 1200px;
}