/* ========================================================================== Peptáre · tokens.css Única fuente de verdad para color, tipografía, espacio, forma y movimiento. SISTEMA Tomado del lenguaje de la referencia, con los valores reales: lienzo y superficies blanco puro, separados por sombra y radio, no por color texto gris muy oscuro, no negro puro, en cuerpo acento UNO solo, usado con cuentagotas. El resto es monocromo. Es la regla que más define el parecido acción principal negro. La referencia no usa el color de marca para el botón principal, y eso es deliberado radios 30px tarjetas, 52px píldoras sombra grande y muy difusa, no una sombra de tarjeta corta tipografía una sola familia geométrica, sin serif en ningún sitio pesos TRES: 400 cuerpo, 500 titulares, 600 etiquetas y nombres. El 700 se retiró: a tamaños pequeños no añade jerarquía, solo ruido Contrastes sobre --lienzo (#FFFFFF, L 1.0): tinta (titulares) ............. 21.0:1 AAA texto (cuerpo) ................ 12.6:1 AAA texto-suave ................... 3.5:1 (solo para texto grande o apoyo) texto-apagado ................. 2.8:1 (solo notas legales al pie) texto-tenue ................... 4.6:1 AA ← el gris que sí sirve para cuerpo acento ........................ 6.4:1 AA blanco sobre accion (negro) ... 21.0:1 AAA linea sobre lienzo ............ 1.3:1 (filete decorativo, no es un control) PUNTOS DE RUPTURA · mobile-first La base de cada hoja es el estado de UNA COLUMNA (móvil) y los @media suben. Los @media NO aceptan var(): las custom properties no existen todavía cuando el navegador evalúa la condición. Por eso esta tabla es documentación y los literales de las consultas tienen que coincidir con ella, a mano. xs 30rem 480px móvil estrecho → ancho sm 40rem 640px móvil ancho → tableta md 48rem 768px tableta lg 62rem 992px ← la única frontera de escritorio. Aquí desaparece la tab bar, reaparece el nav y todo vuelve al layout de escritorio Antes había siete valores sueltos (30/34/40/46/56/62/62.0625). Se consolidaron en cuatro: 46 y 56 gobernaban lo mismo que 48, y el 62.0625 existía solo para no pisar al 62. ========================================================================== */ :root { color-scheme: light; /* ---- Superficies ----------------------------------------------------- */ --lienzo: #FFFFFF; --superficie: #FFFFFF; --tinte: #F7F7F7; --tinte-2: #F0F0F0; /* ---- Tinta ----------------------------------------------------------- */ --tinta: #0A0A0A; /* titulares. No negro puro: en pantalla el negro absoluto se ve duro y barato */ --texto: #313131; /* cuerpo */ --texto-tenue: #6B6B6B; /* secundario legible */ --texto-suave: #8F8F8F; /* apoyo, nunca cuerpo */ --texto-apagado:#9C9C9C; /* por debajo de texto-suave, solo para notas legales al pie. Baja de 3:1 de contraste, así que no vale para nada que haya que leer de corrido: solo para texto que se consulta. */ --linea: #E0E0E0; --linea-suave: #F0F0F0; /* ---- Acento ---------------------------------------------------------- Uno solo, y con un significado concreto: el ámbar marca UNA cosa, que ese producto o ese lote pasó por un laboratorio. No es decoración ni color de marca repartido. Si aparece en algo que no sea una credencial verificable, deja de significar nada. Corolario para la interfaz: el estado activo de una pestaña, un enlace o un filtro NO va en acento. Una pestaña no es una credencial. Va en tinta. */ --acento: #8A5210; /* El tinte suave del acento. Estaba declarado y sin usar, así que se borró; vuelve porque ahora tiene un destino concreto: el fondo de los iconos de credencial verificable. Fuera de ahí sigue sin usarse. */ --acento-suave: #FBF3E8; --acento-linea: #EBD9BE; /* ---- Acción ---------------------------------------------------------- El botón principal es negro, no del color de marca. Es lo que hace la referencia y es lo que mantiene la página monocroma. */ --accion: #0A0A0A; --accion-hover: #2A2A2A; /* ---- Semánticos ------------------------------------------------------ */ --fondo: var(--lienzo); --foco: #000000; /* ---- Tipografía ------------------------------------------------------ Una sola familia, geométrica, sin serif en ningún sitio. */ --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* El suelo bajó de 2.75rem a 2.375rem: a 320px de ancho, "Invierte en tu" medía ~290px sobre un contenedor de 292px — iba al límite y cualquier traducción algo más larga partía la línea. El clamp solo muerde por debajo de 678px, así que el escritorio no se toca. */ --t-display: clamp(2.375rem, 5.6vw, 4.5rem); --t-h2: clamp(1.875rem, 3.2vw, 2.5rem); --t-h3: 1.25rem; --t-cuerpo-g: 1.125rem; --t-cuerpo: 1rem; --t-menor: 0.9375rem; --t-marcador: 0.8125rem; /* ---- Espacio --------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem; /* ---- Forma ----------------------------------------------------------- */ --r-md: 1rem; --r-media: 1.5rem; /* imágenes y paneles dentro de tarjetas */ --r-tarjeta: 1.875rem; /* 30px, el radio de tarjeta de la referencia */ --r-grande: 2.5rem; --r-pill: 999px; /* botones y barra */ /* Sombra grande y difusa. Una sombra de tarjeta corta y gris es justo lo que hay que evitar: aquí la elevación se lee por tamaño de la mancha. */ --sombra-1: 0 1px 3px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.05); --sombra-2: 0 2px 8px rgba(10, 10, 10, 0.04), 0 24px 60px rgba(10, 10, 10, 0.10); --sombra-nav: 0 8px 30px rgba(0, 0, 0, 0.06); --sombra-cajon: -4px 0 24px rgba(0, 0, 0, 0.06), -24px 0 72px rgba(0, 0, 0, 0.10); /* ---- Estructura ------------------------------------------------------ */ --contenedor: 75rem; --medida: 62ch; /* El canal lateral del contenedor, en una sola expresión. Antes eran dos valores con una media query en medio; esto no tiene escalón: a 320px da 1.75rem (idéntico a antes), a 544px 1.87rem (2px de diferencia) y a 768px ya es 2.5rem, exactamente el valor de escritorio. */ --gutter: clamp(1.75rem, 5.5vw, 2.5rem); /* ---- Cromo móvil ----------------------------------------------------- --tab-alto es la pieza clave del layout móvil: vale 3.5rem abajo y se pone a 0rem en el breakpoint lg, dentro del mismo bloque que oculta la tab bar. Con ese único cambio vuelven solos a su sitio el relleno del body, la posición del FAB del asistente y la de la hoja inferior, sin una sola media query en ninguno de esos consumidores. */ --tab-alto: 3.5rem; --toque: 2.75rem; /* 44px: área táctil mínima recomendada */ /* Con viewport-fit=cover en el , iOS reporta aquí el notch y la barra de gestos. Sin ese atributo devuelve 0 y estos tokens no sirven. */ --safe-abajo: env(safe-area-inset-bottom, 0px); --safe-arriba: env(safe-area-inset-top, 0px); --safe-izq: env(safe-area-inset-left, 0px); --safe-der: env(safe-area-inset-right, 0px); /* ---- Capas ----------------------------------------------------------- La tab bar va POR DEBAJO del velo y del cajón, y eso no es negociable: con el carrito abierto, si el velo no la cubriera se vería a plena luz y un toque en ella se iría a otra sección con el velo puesto, en vez de cerrar la hoja. Orden completo, de arriba abajo. */ --z-salto: 200; --z-cajon: 70; --z-velo: 60; --z-asistente: 50; --z-abridor: 45; --z-barra: 40; --z-tabbar: 35; /* ---- Movimiento ------------------------------------------------------ --dur y --dur-l son para transiciones de interfaz. Las de abajo son las animaciones de entrada, que NO forman una escala: cada una está calibrada contra su propia metáfora (el envase se llena, la luz barre, las capas convergen). Por eso no se colapsan a tres valores. */ --dur: 200ms; --dur-l: 380ms; --curva: cubic-bezier(0.2, 0, 0.15, 1); --dur-aparicion: 600ms; --dur-linea: 900ms; }