:root{
  --color-primary: #4A90E2; /* Un azul más brillante y moderno */
  --color-primary-700: #357ABD; /* Un azul más oscuro para hover/active */
  --color-secondary: #F5A623; /* Naranja/amarillo vibrante para acentos */
  --color-accent: #E87A00; /* Naranja más oscuro para acentos fuertes */
  --neutral-900: #212529; /* Negro suave para texto principal, mejor que el azul oscuro */
  --neutral-700: #495057; /* Gris oscuro para texto secundario */
  --neutral-400: #CED4DA; /* Gris claro para bordes y elementos sutiles */
  --bg: #FFFFFF; /* Fondo blanco puro para máxima limpieza */
  --surface: #F8F9FA; /* Un gris muy claro para superficies como tarjetas */
  --radius-lg: 8px; /* Bordes ligeramente menos redondeados para un look más nítido */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra más sutil */
  --flow: 1.6;
  --type-scale-1: 2.5rem; /* h1 */
  --type-scale-2: 2rem; /* h2 */
  --type-scale-3: 1.5rem; /* h3 */
  --type-base: 1.05rem; /* Tamaño de fuente base ligeramente más grande */
}

/* Design tokens (import this before main stylesheet) */