/* ════════════════════════════════════════════════════════════════ PRESUFLEX · LOS TOKENS Una sola fuente para toda la marca. Antes cada página traía su propio :root: doce archivos, ciento trece tokens, y veintiocho de ellos con el mismo nombre y distinto valor. La sombra dura —que es LA firma gráfica de Presuflex— medía 6px en la landing y 4px adentro de la app, y nadie lo notaba porque nunca se ven juntas. El archivo está en cuatro capas: 1 · LA PALETA los colores que la marca tiene 2 · LOS ROLES para qué se usa cada uno 3 · LA FORMA radios, filos, sombras, tipografías 4 · LOS ALIAS los nombres viejos, apuntando a los de arriba La capa 4 existe para que ninguna regla escrita hasta hoy tenga que cambiar: la app sigue diciendo --marca y la landing --lima, pero las dos leen el mismo valor y no pueden volver a separarse. Migrar cada archivo a los nombres canónicos se puede hacer después, de a uno y sin apuro, borrando su bloque de alias cuando termine. REGLA DE SUPERFICIES, sin excepciones: sobre lima → tinta sobre papel → tinta sobre tinta → papel sobre blanco → tinta El lima NO es un color de acción: con blanco encima da 1,18. Es toque gráfico —filos, subrayados, resaltados, fondos con tinta encima—. Para lo que lleva texto blanco está el verde hondo. ════════════════════════════════════════════════════════════════ */ :root { /* ── 1 · LA PALETA ───────────────────────────────────────────── Un solo color de marca. Todo lo demás es tinta, papel y blanco. */ --lima: #CCFF00; /* la marca. Sobre tinta 16,76 · sobre blanco 1,18 */ --lima-osc: #A8D400; /* el filo del degradado y las curvas */ --lima-hond: #5F7A00; /* el único lima que lleva texto: 4,92 sobre blanco */ --tinta: #0B0B0A; --tinta-alta: #23261A; /* el hover de lo que ya es tinta */ --blanco: #FFFFFF; --papel: #F3F4EE; /* el fondo de la app y de la landing */ --crema: #EDEDE4; /* la barra, los rellenos suaves */ --papel-hond: #E4E6DC; /* un escalón más: hover de superficie */ /* Tres grises, no uno: cada uno es el más claro que todavía pasa su criterio sobre blanco. Antes la landing usaba uno y la app otros dos, sin que nadie hubiera decidido que fueran distintos. */ --gris-1: #575950; /* 7,12 sobre blanco — texto secundario */ --gris-2: #686A60; /* 5,50 — texto terciario */ --gris-3: #6E7065; /* 4,87 — el mínimo que pasa AA */ /* ── 2 · LOS ROLES ───────────────────────────────────────────── Qué hace cada color, para no tener que acordarse del valor. */ --fondo: var(--papel); --superficie: var(--blanco); --texto-1: var(--tinta); --texto-2: var(--gris-1); --texto-3: var(--gris-2); --acento: var(--lima-hond); /* enlaces y texto de acción sobre claro */ --acento-osc: #4F6600; /* su hover: 5,87 sobre blanco */ /* EL VELO, lo que queda atrás cuando algo se abre encima. Era tinta al 55%. Funcionaba, pero apagaba la app entera y dejaba la hoja blanca flotando en un pozo: el contraste lo ponía el fondo oscuro, no la pieza. Con crema pasa al revés —el fondo se aplana en un campo claro y la hoja se recorta con lo que es suyo: el filo de tinta de 1,5 y la sombra dura—. Es la marca haciendo el trabajo. Al 88% el texto de atrás (tinta sobre blanco) queda en ~#D2D2CB: se ven las formas, no se lee nada. Eso es lo que tiene que pasar. Condición para usarlo: TODA hoja que flote sobre el velo lleva contorno de tinta. Sobre crema, blanco contra crema da 1,09 —sin filo, el borde de la pieza no existe—. */ --velo: rgba(237, 237, 228, .88); --linea: rgba(11,11,10,.14); /* divide sobre el papel */ --linea-suave: rgba(11,11,10,.08); /* divide adentro de una superficie blanca */ /* Los estados. El color entra sólo donde marca uno. */ --verde: #12703F; --verde-bg: #E4F3EA; --ambar: #8A5A00; --ambar-bg: #F7EEDD; --rojo: #A8241C; --rojo-bg: #F7E6E4; --azul: #1B4F8A; --azul-bg: #E4EDF7; /* WhatsApp: el verde de la marca ajena sirve de fondo con tinta encima (12,3), pero como trazo sobre blanco da 1,9. Para íconos y texto va el hondo. */ --whatsapp: #25D366; --whatsapp-hond: #128C7E; /* Las barras del gráfico de la app: una versión apagada de los estados, para que cuatro barras juntas no compitan con el resto de la pantalla. */ --graf-ok: #3F8F5E; --graf-espera: #C99A3E; --graf-no: #B85C50; --graf-neutro: #C9CBBF; /* ── 3 · LA FORMA ──────────────────────────────────────────────— */ --titulo: 'Onest', 'Helvetica Neue', Arial, sans-serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Radios: 10 para lo que se toca, 15 para las pastillas, 20 para lo que contiene. Los otros dos son los extremos. */ --r-xs: 5px; --r-s: 10px; --r-m: 15px; --r-l: 20px; --r-xl: 25px; --r-pill: 999px; /* El filo fuerte: el contorno de nivel 1, el que dice "esto es una pieza de la marca" y no un contenedor cualquiera. */ --linea-f: 1.5px solid var(--tinta); /* LA SOMBRA DURA, en escala. Acá estaba la deriva más fea del proyecto: la landing definía --dura como 6px y la app como 4px, con el mismo nombre. No era una decisión, era que nadie las había visto juntas. Ahora es una escala con cuatro escalones y cada producto elige el suyo a propósito: la landing usa el grande porque sus piezas son grandes y de lejos; la app usa el mediano porque una sombra de 6 sobre un botón de 44 es un bloque. La diferencia sigue existiendo, pero ahora está escrita. Se nombran por TAMAÑO y no por rol —2, 3, 4, 6— justamente para que nadie pueda volver a llamarle "chica" a dos cosas distintas: eso es exactamente lo que había pasado (--dura-s medía 2 en la app y 3 en la landing). Cada producto declara en su hoja qué escalón usa, en tres líneas y a la vista. */ --dura-2: 2px 2px 0 var(--tinta); --dura-3: 3px 3px 0 var(--tinta); --dura-4: 4px 4px 0 var(--tinta); --dura-6: 6px 6px 0 var(--tinta); /* La dura invertida, para vivir sobre tinta: ahí la negra no existe y el lima da 16,76 contra el fondo. */ --dura-lima: 8px 8px 0 var(--lima); --dura-lima-s: 4px 4px 0 var(--lima); /* Sombras blandas: sólo para lo que flota de verdad (modales, desplegables). Una pieza de la marca no lleva blur. */ --sh-s: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05); --sh-m: 0 6px 20px rgba(0,0,0,.12); --sh-panel: 0 0 0 1px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.05); /* Los degradados: todos salen de la misma familia. El lima funciona como fuente de luz, no como relleno plano. */ --grad-lima: linear-gradient(145deg, #E4FF6B 0%, var(--lima) 44%, var(--lima-osc) 100%); --grad-papel: linear-gradient(160deg, #FFFFFF 0%, var(--papel) 58%, #E9EDDC 100%); --grad-tinta: linear-gradient(155deg, #1D2016 0%, var(--tinta) 62%); --brillo: 0 12px 34px rgba(168,212,0,.45); /* ════════════════════════════════════════════════════════════ 4 · LOS ALIAS Los nombres que ya están escritos en las hojas, apuntando a los canónicos de arriba. Nada de esto define un valor nuevo: si acá aparece un color literal, es un error. Para migrar un archivo: cambiá sus nombres viejos por los canónicos y después sacá de acá los alias que sólo usaba él. ════════════════════════════════════════════════════════════ */ /* — Vocabulario de la landing (index.html, login, register) — */ --negro: var(--tinta); --gris: var(--gris-3); --display: var(--titulo); --r-f: var(--r-m); /* — Vocabulario de la app (css/style.css) — */ --marca: var(--lima); --marca-osc: var(--lima-osc); --marca-hond: var(--lima-hond); --primary: var(--tinta); --primary-dark: var(--tinta-alta); --primary-light: var(--crema); --primary-mid: rgba(11,11,10,.22); --primary-btn-shadow: rgba(11,11,10,.22); --accent: var(--lima-hond); --text-1: var(--tinta); --text-2: var(--gris-1); --text-3: var(--gris-2); --bg: var(--papel); --surface: var(--blanco); --border: var(--linea); --border-light: var(--linea-suave); --green: var(--verde); --green-bg: var(--verde-bg); --amber: var(--ambar); --amber-bg: var(--ambar-bg); --red: var(--rojo); --red-bg: var(--rojo-bg); --blue: var(--azul); --blue-bg: var(--azul-bg); --shell: var(--crema); --shell-hover: var(--papel-hond); }