/* ========================================================================== La tipografía se sirve desde nuestro propio dominio, no desde Google: la carta se abre por WhatsApp con datos malos y una petición a un tercero es una pantalla en blanco esperando. Es un archivo VARIABLE — un solo request cubre de regular a negra. `swap` y no `block`: si la fuente tarda, el cliente lee la carta en la del sistema y luego cambia. Ver el precio tarde nunca es mejor que verlo feo. ========================================================================== */ @font-face { font-family: 'Epilogue'; src: url('/c/fonts/epilogue.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } /* ========================================================================== tokens.css — LA PIEL. Este es el único archivo que se cambia para que la carta se vea distinta. REGLA: ningún otro archivo define un color, una fuente ni un radio a mano. Todo sale de acá. Así el día que llegue una referencia visual buena (o un diseñador), se reemplaza este archivo y la estructura no se toca. Si ves un `#hex` en styles.css, es un bug. ========================================================================== */ :root { /* ── Marca ───────────────────────────────────────────────────────────── */ /* 🔑 El rojo del logo es #ff0000 puro, y NO puede ser el color de la interfaz: con texto blanco encima da 4.0:1 y en los precios 3.75:1 — los dos por debajo del mínimo AA de 4.5:1. El color de una marca y el color funcional de su interfaz no son la misma cosa. #e01000 es el rojo MÁS PURO que sí cumple (4.95 con blanco, 4.64 en los precios): se lee de la misma familia que el logo sin dejar texto ilegible. Medido, no elegido a ojo — el naranja anterior (#d94215) fallaba y no se notó hasta pasarle el detector a la página renderizada. */ /* 🔑 EL REPARTO ES EL DE DOMINO'S, CON EL ROJO Y EL AZUL INTERCAMBIADOS (Jefe, 15-ago). Ellos son más azules que rojos; nosotros al revés: ROJO → la ESTRUCTURA, y es la superficie GRANDE: cabecera, barra de categorías, el bloque de entrega. Es lo que pinta la página. AZUL → las ACCIONES, y son superficies CHICAS: agregar, confirmar. BLANCO → el lienzo, y ahora es de verdad blanco. Mismas proporciones que la referencia, colores invertidos. Por eso al abrir la carta lo primero que se ve es rojo, no azul. */ --marca: #e01000; /* el CROMADO: cabecera, barra, bloques */ --marca-oscura: #b00c00; /* estados presionados */ --marca-suave: #ffe9e6; /* fondos teñidos suaves */ --sobre-marca: #ffffff; /* texto ENCIMA del rojo — 4.95 ✅ */ /* ── Acción ──────────────────────────────────────────────────────────── */ /* 🪤 EL AZUL DE DOMINO'S NO SE PUEDE COPIAR TAL CUAL: #1391d6 con texto blanco da 3.47:1 — no llega a AA para texto normal. Por eso TODO lo que ellos escriben sobre azul es enorme, negrita y mayúscula (el texto grande solo necesita 3:1). Es una restricción disfrazada de estilo. #0a6a9c es el azul MÁS BRILLANTE que sí cumple: 5.91 con blanco y 5.55 como texto sobre el lienzo. Misma familia, sin obligar a gritar. 🚨 Y por eso el chip activo NO es azul sobre la barra roja: rojo y azul tienen casi la misma luminosidad (1.19:1 entre ellos) y pegados vibran. Sobre rojo, lo que se destaca es BLANCO. */ --azul: #0a6a9c; --azul-oscuro: #084d72; /* presionado */ --azul-suave: #e3f0f8; --sobre-azul: #ffffff; /* 5.91 ✅ */ /* ── Superficies ─────────────────────────────────────────────────────── */ /* 🔑 BLANCO, no gris (Jefe, 15-ago). El crema original (#fbf7f2) leía "panadería artesanal" y el gris frío que lo reemplazó seguía siendo una capa de ruido entre el rojo y la comida. Con el cromado rojo arriba, el contraste ya está dado: el lienzo no tiene que aportar nada. Lienzo y tarjeta son el mismo blanco — las tarjetas se separan por borde y sombra, no por tono. Es lo que hace que se vea más limpio. */ --fondo: #ffffff; /* el lienzo */ --superficie: #ffffff; /* tarjetas */ --superficie-alta: #ffffff; /* barras flotantes */ --borde: #e6e9ed; --borde-fuerte: #ccd2d9; /* ── Texto ───────────────────────────────────────────────────────────── */ /* El marrón (#241c16) se fue con el crema: un texto cálido sobre lienzo frío se ve sucio. Medidos sobre lienzo: 16.81 / 5.76 / 4.80. */ --texto: #101820; --texto-suave: #566372; --texto-tenue: #646f7d; /* #9a9089 daba 3.6:1 — estaba bajo el mínimo */ --texto-invertido: #ffffff; /* ── Semánticos ──────────────────────────────────────────────────────── */ /* Abierto/cerrado se queda en verde/ámbar y NO pasa a azul: ahí el color lleva significado, y pintarlo de marca lo borra. El azul es para lo que no tiene semántica propia. */ --ok: #0f7a44; /* 5.07 sobre lienzo */ /* El TOTAL a pagar. Verde y no rojo (Jefe, 14-ago): en una interfaz el rojo es el color del error, y el número que el cliente vino a ver no es una advertencia. Token propio y no `--ok` porque son dos cosas distintas — "el negocio está abierto" y "esto es lo que pagas" — y el día que una cambie no debe arrastrar a la otra. */ --total: #0f7a44; /* 5.07 sobre lienzo — AA con holgura */ --ok-suave: #e4f4ea; --aviso: #8a5a00; /* 5.57 */ --aviso-suave: #fbf1d9; --agotado: #66727f; /* #8a8078 daba 3.6:1 — también estaba bajo */ --agotado-suave: #eef1f4; /* ── Tipografía ──────────────────────────────────────────────────────── */ /* Epilogue (elegida por el Jefe, 11-ago). El stack del sistema queda detrás como red: si el woff2 no llega, la carta se lee igual. */ --fuente: 'Epilogue', system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fuente-numeros: 'Epilogue', system-ui, -apple-system, "Segoe UI", sans-serif; /* 🔑 La escala estaba corrida UN ESCALÓN hacia abajo: el cuerpo en 15px cuando el piso de lectura cómoda en teléfono es 16, y `--t-xs` (12px) usado ~25 veces. La mayor parte de la interfaz vivía en 12–13px, y esta carta la leen clientes de todas las edades a un brazo de distancia. Cada peldaño subió uno. La estructura no se tocó: sube sola. */ --t-xs: 0.8125rem; /* 13px — era 12 */ --t-sm: 0.875rem; /* 14px — era 13 */ --t-base: 1rem; /* 16px — era 15 */ --t-md: 1.125rem; /* 18px — era 17 */ /* 🔑 20px NUEVO, y no es un capricho: la escala tenía un hueco justo donde vive el dato principal. El nombre del producto y el total de su línea en 18px pesan lo mismo que el título de una sección, y saltar a 22 los pone a competir con el total a pagar. 20 es el peldaño que faltaba entre "texto importante" y "cifra grande". */ --t-ml: 1.25rem; /* 20px */ --t-lg: 1.375rem; /* 22px — era 20 */ --t-xl: 1.75rem; /* 28px — era 24 */ --peso-normal: 400; --peso-medio: 550; --peso-fuerte: 700; /* ── Espaciado ───────────────────────────────────────────────────────── */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; /* ── Formas ──────────────────────────────────────────────────────────── */ --radio-sm: 6px; --radio: 10px; --radio-lg: 16px; --radio-pill: 999px; --sombra-sm: 0 1px 2px rgba(36, 28, 22, 0.06); --sombra: 0 2px 8px rgba(36, 28, 22, 0.08); --sombra-lg: 0 -2px 16px rgba(36, 28, 22, 0.10); /* ── Medidas ─────────────────────────────────────────────────────────── */ --ancho-max: 560px; /* la carta se lee en el teléfono; en desktop se centra */ --alto-toque: 44px; /* mínimo táctil */ /* La foto era 84px de cuando NINGÚN producto tenía imagen y el cuadro era solo un lugar reservado. Ya hay fotos: en comida la foto es la conversión, no un adorno al margen. */ --foto: 108px; /* lado de la foto del producto — era 84 */ } /* ── Tema oscuro: FUERA POR AHORA ─────────────────────────────────────── Quitado el 15-ago por decisión del Jefe: se está definiendo la identidad en claro y un segundo tema en paralelo es una segunda cosa que ajustar en cada iteración. Cuando la piel clara esté cerrada, vuelve. ⚠️ NO se reescribe de cero cuando toque: el bloque completo, con sus contrastes ya medidos, está en git. Para recuperarlo: git show 0854756:public/tokens.css y también hay que devolver `color-scheme` a "light dark" en index.html — sin eso el navegador no cambia los controles nativos. */