/*
  Única fuente de valores visuales para la etapa HTML.
  La paleta traduce la interfaz aprobada en Claude Design y conserva alias
  temporales para los Web Components existentes durante la integración.
*/
:root {
  --cr-marino: #0c1a33;
  --cr-marino-alto: #10213e;
  --cr-azul: #2f74c0;
  --cr-azul-oscuro: #1d4e89;
  --cr-lima: #c2e01e;
  --cr-fondo: #eef2f7;
  --cr-superficie: #ffffff;
  --cr-tinta: #17233c;
  --cr-texto-secundario: #62738a;
  --cr-texto-inverso: #f7f9fc;
  --cr-borde: #d6e0ec;
  --cr-exito: #2f6f3e;
  --cr-peligro: #a4423a;
  --cr-advertencia: #6b5a00;
  --cr-foco: #c2e01e;
  --cr-control-alto: 44px;
  --cr-control-fondo: var(--cr-superficie);
  --cr-control-deshabilitado: #e8edf3;
  --cr-control-borde-activo: var(--cr-azul);
  --cr-ayuda: var(--cr-texto-secundario);
  --cr-error: var(--cr-peligro);
  --cr-exito-fondo: #edf7ef;
  --cr-foco-anillo: 0 0 0 3px rgba(194, 224, 30, .42);
  --cr-ranking-alza: var(--cr-exito);
  --cr-ranking-baja: var(--cr-peligro);
  --cr-ranking-destacado: var(--cr-lima);

  --cr-res-social: #2f6f3e;
  --cr-res-nivel: #1d4e89;
  --cr-res-rating: #6b5a00;
  --cr-res-academia: #6946a8;

  --cr-fuente: 'Public Sans', system-ui, -apple-system, sans-serif;
  --cr-fuente-titulo: 'Archivo', var(--cr-fuente);
  --cr-fs-xs: 12px;
  --cr-fs-sm: 14px;
  --cr-fs-md: 16px;
  --cr-fs-lg: 20px;
  --cr-fs-xl: 28px;

  --cr-espacio-1: 4px;
  --cr-espacio-2: 8px;
  --cr-espacio-3: 12px;
  --cr-espacio-4: 16px;
  --cr-espacio-5: 24px;
  --cr-espacio-6: 32px;

  --cr-radio-sm: 8px;
  --cr-radio-md: 12px;
  --cr-radio-lg: 16px;
  --cr-radio-full: 999px;
  --cr-sombra-1: 0 1px 3px rgba(20, 40, 70, .08);
  --cr-sombra-2: 0 8px 24px rgba(20, 40, 70, .14);
  --cr-overlay: rgba(12, 26, 51, .62);

  --cr-cal-alto-fila: 44px;
  --cr-cal-ancho-hora: 56px;
  --cr-cal-ancho-cancha: 116px;

  /* Alias de transición: se retirarán al renovar todos los componentes. */
  --bg: var(--cr-fondo);
  --surface: var(--cr-superficie);
  --ink: var(--cr-tinta);
  --ink-soft: var(--cr-texto-secundario);
  --ink-mute: var(--cr-texto-secundario);
  --line: var(--cr-borde);
  --brand: var(--cr-azul);
  --brand-hi: var(--cr-azul-oscuro);
  --on-brand: var(--cr-texto-inverso);
  --danger: var(--cr-peligro);
  --ok: var(--cr-exito);
  --res-social: var(--cr-res-social);
  --res-nivel: var(--cr-res-nivel);
  --res-rating: var(--cr-res-rating);
  --res-academia: var(--cr-res-academia);
  --cal-alto-fila: var(--cr-cal-alto-fila);
  --cal-ancho-hora: var(--cr-cal-ancho-hora);
  --cal-ancho-cancha: var(--cr-cal-ancho-cancha);
  --sp-1: var(--cr-espacio-1);
  --sp-2: var(--cr-espacio-2);
  --sp-3: var(--cr-espacio-3);
  --sp-4: var(--cr-espacio-4);
  --sp-5: var(--cr-espacio-5);
  --sp-6: var(--cr-espacio-6);
  --r-sm: var(--cr-radio-sm);
  --r-md: var(--cr-radio-md);
  --r-lg: var(--cr-radio-lg);
  --r-full: var(--cr-radio-full);
  --fs-xs: var(--cr-fs-xs);
  --fs-sm: var(--cr-fs-sm);
  --fs-md: var(--cr-fs-md);
  --fs-lg: var(--cr-fs-lg);
  --fs-xl: var(--cr-fs-xl);
  --fuente: var(--cr-fuente);
  --fuente-titulo: var(--cr-fuente-titulo);
  --sombra-1: var(--cr-sombra-1);
  --sombra-2: var(--cr-sombra-2);
  --overlay: var(--cr-overlay);
}