/**
 * Tokens de diseño. Todo el sistema visual se apoya en estas variables
 * para que un cambio de marca (color, radio, tipografía) se propague
 * desde un único sitio.
 */
:root {
  /* Colores de marca */
  --color-primary: #446DE4;
  --color-primary-hover: #3559C4;
  --color-accent: #DFFF5C;
  --color-bg-page: #F2F2F2;
  --color-white: #FFFFFF;

  /* Texto */
  --color-text-primary: #111111;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-on-primary: #FFFFFF;

  /* Bordes y superficies */
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-track: #E5E7EB;

  /* Estados */
  --color-disabled-bg: #E5E7EB;
  --color-disabled-text: #9CA3AF;

  /* Tipografía */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Espaciados */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Sombras */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.08);

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}