/* variables.css Tokens de diseño del proyecto: colores, tipografía, espaciados, sombras, radios. Se importa PRIMERO en el , para que el resto de los archivos CSS puedan usar estas variables (var(--color-primario), etc.) Pendiente: definir todos los valores en el Paso 3 (CSS). */ :root { /* Colores (paleta oficial de marca Vitabu) */ --color-primario: #4A5A33; /* Vital Green */ --color-secundario: #A8B892; /* Soft Sage — acentos suaves (íconos) */ --color-fondo-general: #F9F8F5; /* Ivory Mist — fondo general del sitio */ --color-fondo-calido: #E9E1D4; /* Warm Sand — fondos cálidos (tarjetas, pastillas) */ --color-hover-oscuro: #2A351D; /* Forest Deep — hovers y footer */ --color-texto: #1C2017; /* Stone Ink */ --color-whatsapp: #25D366; /* Verde de marca de WhatsApp (no forma parte de la paleta Vitabu) */ /* Tipografía */ --font-principal: 'Inter', sans-serif; /* Espaciados (escala en rem) */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --space-8: 4rem; /* Radios de borde */ --radius-md: 16px; --radius-lg: 24px; /* Sombras (muy leves, según el brief) */ --shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.04); --shadow-md: 0 12px 32px rgba(34, 34, 34, 0.08); /* Layout */ --container-width: 1120px; }