/* COPIA de src/css/tokens.css - no editar aqui. Se regenera con: python construir.py */ /* contasuma - tokens de marca Generado en FASE 1 desde el CSS embebido. No editar a mano sin revisar las 17 paginas: este archivo es compartido. */ /* Paleta oficial del sitio claro. NO NEGOCIABLE: estos hex son marca. */ :root{ --ink:#03251C; --paper:#F5FBF8; --emerald:#059669; --emerald-dark:#047857; --emerald-deep:#035C43; /* hover del boton primario */ --emerald-light:#34D399; /* verde de marca para fondos oscuros */ --emerald-soft:#E4F7EE; --amber:#FBBF24; --red:#E2574C; /* solo como fondo o acento, nunca como texto pequeno */ --alerta:#7A5A07; /* ambar legible: 6.0:1 sobre #FFF8E6 */ --peligro:#B3271B; /* rojo legible: 5.5:1 sobre #FDE8E6 */ /* El texto secundario estaba en #51617A, que es un gris AZUL: matiz 217 en una paleta cuyo resto vive entre 146 y 165. Era el unico elemento frio de toda la marca, y se notaba sin saber por que — las cifras secundarias de las tablas se leian azules. Este esta en matiz 158, entre el esmeralda y la linea, y ademas sube el contraste de 5,91 a 6,61 sobre blanco. */ --ink-soft:#456358; --line:#D9E7DF; --card:#FFFFFF; --radius:14px; /* ══════════════════════════════════════════════════════════════ * MOVIMIENTO * * Las curvas que trae CSS de fábrica son flojas: ease, ease-out y * ease-in-out se quedan a medias y hacen que todo parezca dudar. Estas * tienen empuje, que es lo que hace que una interfaz se sienta despierta. * * Y una regla que manda sobre las demás: NUNCA ease-in en la interfaz. * Empieza lento, justo en el instante en que la persona está mirando, y * eso se lee como lentitud aunque el reloj diga lo mismo. * ════════════════════════════════════════════════════════════ */ /* Entra o sale: arranca rápido, contesta al instante. */ --sal: cubic-bezier(.23, 1, .32, 1); /* Se mueve por la pantalla: acelera y frena como algo con peso. */ --entra-sal: cubic-bezier(.77, 0, .175, 1); /* Cajones y paneles laterales, la curva de iOS. */ --cajon: cubic-bezier(.32, .72, 0, 1); /* Duraciones. Nada de la interfaz pasa de 300 ms: un desplegable de 180 ms se siente más despierto que uno de 400, y esto es una caja que se usa cien veces al día. */ --t-toque: 120ms; /* respuesta al pulsar */ --t-corto: 160ms; /* color, borde, foco */ --t-medio: 220ms; /* desplegables, diálogos */ --t-cajon: 280ms; /* el menú lateral del teléfono */ /* ══════════════════════════════════════════════════════════════ * FORMA * * Había doce radios distintos repartidos por la aplicación: 5, 6, 7, 8, * 9, 10, 11, 12, 13, 14, 16 y 999. Nadie nota un radio suelto; lo que sí * se nota es el conjunto, y un conjunto sin sistema se lee como * descuidado sin que se sepa por qué. * ════════════════════════════════════════════════════════════ */ --r-1: 8px; /* controles pequeños: pastillas, iconos, casillas */ --r-2: 11px; /* campos, botones, celdas */ --r-3: 14px; /* tarjetas y paneles */ --r-4: 18px; /* diálogos */ --r-full: 999px; /* lo que tiene que leerse como redondo del todo */ } /* Acento por rubro. Antes vivia como --c1/--c2 duplicado en 13 archivos. Se aplica con */ [data-rubro="pymes"]{ --rubro-1:#059669; --rubro-2:#03251C; } [data-rubro="comercios"]{ --rubro-1:#1F6FEB; --rubro-2:#03251C; } [data-rubro="supermercados"]{ --rubro-1:#059669; --rubro-2:#065F46; } [data-rubro="bodegas"]{ --rubro-1:#B8860B; --rubro-2:#03251C; } [data-rubro="kioscos"]{ --rubro-1:#E2574C; --rubro-2:#7F1D1D; } [data-rubro="tiendas-de-ropa"]{ --rubro-1:#7C3AED; --rubro-2:#03251C; } [data-rubro="restaurantes"]{ --rubro-1:#059669; --rubro-2:#03251C; } [data-rubro="panaderias"]{ --rubro-1:#B8860B; --rubro-2:#78350F; } [data-rubro="licorerias"]{ --rubro-1:#7C3AED; --rubro-2:#4C1D95; } [data-rubro="barberias"]{ --rubro-1:#1F6FEB; --rubro-2:#03251C; } [data-rubro="peluquerias"]{ --rubro-1:#E2574C; --rubro-2:#831843; } [data-rubro="farmacias"]{ --rubro-1:#059669; --rubro-2:#064E3B; } [data-rubro="ferreterias"]{ --rubro-1:#B8860B; --rubro-2:#03251C; } /* Compatibilidad: el CSS de rubro heredado sigue usando --c1/--c2 */ [data-rubro]{ --c1:var(--rubro-1); --c2:var(--rubro-2); } /* Paleta editorial darkroom (contasuma-editorial.html). Se declara aparte porque esa pagina es una landing de campana con su propio sistema de color. */ [data-theme="darkroom"]{ --walnut:#04100B; --cream:#EAFFF4; --bark:#0C2B1E; --cork:#1D4032; --drift:#5F8B77; --menta:#2EF2A6; --oro:#FFD34D; --ember:#FF6A1A; }