/* ============================================================ NUTRIARY · TOKENS ------------------------------------------------------------ Fuente de verdad del sistema visual. Este archivo se carga PRIMERO. Ningún otro archivo debe escribir un color, un tamaño o un radio en crudo: todo se toma de aquí. Regla: si necesitas un valor que no está en este archivo, la pregunta correcta no es "qué hex pongo" sino "por qué el sistema no lo previó". Casi siempre la respuesta es que ya existe un token que sirve. Estructura: 1. Primitivas — los valores crudos, sin significado 2. Semánticos — qué significa cada valor, por rol 3. Componentes — medidas fijas de piezas concretas ============================================================ */ :root{ /* ============================================================ 1 · PRIMITIVAS Nunca se usan directamente en un componente. Solo aquí, para alimentar los tokens semánticos de la sección 2. ============================================================ */ /* --- neutros cálidos --- */ --n-00: #FCFBF8; /* superficie elevada */ --n-05: #F7F5F0; /* marfil · fondo base */ --n-10: #ECE7DF; /* arena */ --n-20: #DED7CD; /* mineral */ --n-30: #E9E4DB; /* línea suave */ --n-50: #9B9E97; /* gris oliva claro */ --n-70: #6F726B; /* gris oliva */ --n-90: #252622; /* carbón cálido */ /* --- verde de marca --- */ --v-40: #EFF1ED; --v-60: #7F8C76; /* salvia · acento */ --v-80: #3F493B; /* oliva carbón · acción */ --v-90: #333C30; /* --- azul agua --- */ --a-20: #EBF1F3; --a-40: #C9DBE0; --a-60: #7A9AA6; /* --- terracota --- */ --t-20: #F4E7E3; --t-60: #B96654; --t-80: #A85A49; /* --- verde éxito --- */ --e-20: #EBF0E9; --e-60: #829B7B; /* ============================================================ 2 · SEMÁNTICOS Estos son los que se usan. El nombre dice el rol, no el color: si mañana el verde cambia, se cambia aquí y nada más. ============================================================ */ /* --- superficie --- */ --fondo: var(--n-05); --superficie: var(--n-00); --superficie-alt: var(--n-10); --superficie-campo: var(--n-00); /* --- texto --- */ --texto: var(--n-90); --texto-2: var(--n-70); --texto-3: var(--n-50); --texto-inverso: var(--n-05); /* --- línea --- */ --linea: var(--n-20); --linea-suave: var(--n-30); /* --- acción --- */ --accion: var(--v-80); --accion-hover: var(--v-90); --accion-texto: var(--n-05); --accion-inactiva: var(--n-20); /* --- acento Marca secciones, indica estado activo, subraya. Nunca es el fondo de un botón: eso es --accion. --- */ --acento: var(--v-60); --acento-luz: var(--v-40); /* --- estados Solo tres. No hay "info": si algo es informativo, es texto. --- */ --exito: var(--e-60); --exito-fondo: var(--e-20); --alerta: var(--t-60); --alerta-hover: var(--t-80); --alerta-fondo: var(--t-20); /* --- dato hídrico El agua es el único dato con color propio. Es una métrica de naturaleza distinta al resto y se lee de un vistazo. --- */ --hidrico: var(--a-60); --hidrico-fondo: var(--a-20); --hidrico-linea: var(--a-40); /* ============================================================ 3 · TIPOGRAFÍA Una familia. La jerarquía se construye con tamaño, peso y espaciado — nunca mezclando familias por decoración. ============================================================ */ --fuente: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* escala · razón 1.2 desde 15px, redondeada a valores útiles */ --t-titulo: 33px; /* título de pantalla · peso 650 */ --t-titulo-s: 29px; /* ídem, móvil */ --t-seccion: 22px; /* encabezado de sección · peso 600 */ --t-sub: 19px; /* subtítulo · peso 600 */ --t-destacado: 17.5px; /* dato principal en lista */ --t-cuerpo: 16px; /* interfaz, párrafos · peso 400 */ --t-cuerpo-s: 15px; /* secundario */ --t-menor: 13.5px; /* apoyo, notas */ --t-etiqueta: 11.5px; /* etiqueta de sección · peso 600 */ --t-micro: 12.5px; /* fechas, contadores */ /* pesos · cuatro, no más */ --p-normal: 400; --p-medio: 500; --p-semi: 550; --p-fuerte: 600; --p-alto: 650; /* interletrado · negativo en títulos, positivo en etiquetas */ --e-titulo: -.03em; --e-seccion: -.022em; --e-cuerpo: -.006em; --e-etiqueta: .11em; /* interlineado */ --l-titulo: 1.12; --l-cuerpo: 1.6; --l-largo: 1.68; /* ============================================================ 4 · ESPACIO Retícula de 8. Todo margen y padding sale de aquí. Los valores 2 y 4 existen para ajustes ópticos, no para layout. ============================================================ */ --x-1: 4px; --x-2: 8px; --x-3: 12px; --x-4: 16px; --x-5: 20px; --x-6: 24px; --x-8: 32px; --x-10: 40px; --x-12: 46px; /* separación entre secciones */ --x-16: 64px; --margen-lateral: 22px; --margen-lateral-lg: 24px; --ancho-app: 660px; --ancho-lectura: 58ch; /* ============================================================ 5 · FORMA Radios moderados. Nada es cápsula salvo las insignias, donde la forma sí comunica "esto es una etiqueta, no un botón". ============================================================ */ --radio-boton: 13px; --radio-campo: 12px; --radio-tarjeta: 17px; --radio-cont: 20px; --radio-chip: 8px; --radio-insignia:100px; --borde: 1px; --borde-acento: 2px; /* ============================================================ 6 · ELEVACIÓN No hay sombras. Un elemento se separa del fondo por su color y su borde. Esta variable existe para que quede explícito que la decisión fue tomada, no olvidada. ============================================================ */ --sombra: none; /* ============================================================ 7 · MOVIMIENTO Entre 180 y 240 ms. Solo opacidad, color y desplazamientos cortos. Nada rebota, nada gira, nada escala más de un 4%. ============================================================ */ --dur-corta: 180ms; --dur: 200ms; --dur-larga: 240ms; --curva: cubic-bezier(.4, 0, .2, 1); /* ============================================================ 8 · COMPONENTES Medidas que se repiten y deben ser idénticas en toda la app. ============================================================ */ --alto-boton: 54px; --alto-boton-s: 46px; --alto-campo: 54px; --toque-minimo: 44px; /* área táctil mínima, sin excepción */ --icono: 21px; --icono-s: 16px; --trazo-icono: 1.7; --marca-progreso: 3px; /* alto de toda barra de progreso */ } /* ------------------------------------------------------------ MOVIMIENTO REDUCIDO Si el sistema operativo lo pide, no se discute. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ :root{ --dur-corta:0ms; --dur:0ms; --dur-larga:0ms } }