:root {
  /* Colores oficiales - La Buena Nutrición */
  --color-primary: #0A0C4F;        /* Azul Marino - Principal */
  --color-title: #233B84;          /* Azul Ciencia - Títulos */
  --color-cta: #4C6EDB;            /* Azul Medio - Acción (CTA) */
  --color-accent: #8ECFEA;         /* Azul Celeste - Acentos suaves */
  --color-bg-warm: #C9F1EA;        /* Verde Menta - Fondo cálido */
  --color-bg-base: #F4F7FB;        /* Gris azulado - Fondo base */
  --color-text: #444A60;           /* Gris Oscuro - Texto */
  
  /* Colores semáforo nutricional */
  --color-red: #E63946;            /* Alerta importante */
  --color-orange: #F77F00;         /* Advertencia moderada */
  --color-yellow: #FCBF49;          /* Advertencia leve */
  --color-green: #06A77D;          /* Bueno */
  --color-blue: #118AB2;           /* Recomendación */
  
  /* Tipografías */
  --font-primary: 'Lora', serif;   /* Títulos */
  --font-secondary: 'Inter', sans-serif; /* Cuerpo y formularios */
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Bordes */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  
  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(10, 12, 79, 0.1);
  --shadow-md: 0 4px 8px rgba(10, 12, 79, 0.15);
  --shadow-lg: 0 8px 16px rgba(10, 12, 79, 0.2);
  
  /* Transiciones */
  --transition: all 0.3s ease;
}