/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Motos ═══════════════════════════════════════════════════════════════════════════ Este archivo es del CLIENTE. La escuela comercial de la red de vitrinas de motocicletas del Grupo Vitta: `vittaretail.com/motos`. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES, Y DE DÓNDE NO ──────────────────────────┐ NO de un brandbook. Y decirlo importa, porque las dos hojas que ya existen —`marca-cars.css` y `marca-snacks.css`— sí salen de un documento entregado por el cliente, y sus encabezados citan la fila y el aumento con el que se leyó cada muestra. Copiar ese tono acá sería inventar una fuente. Los cuatro colores declarados salen de la especificación de las siete escuelas —`docs/SIETE-ESCUELAS.md`, sección «2 · Vitta Motos», y su copia ejecutable `tools/siete-escuelas.php`, clave `motos`—, que es hoy la única autoridad que existe sobre esta marca: #7A2408 naranja quemado profundo el tema: la superficie de marca #C2410C naranja de acento las acciones, los enlaces, el foco #F2B705 amarillo de realce la chispa #FFF6F0 papel el fondo de la página #8A6A5C apoyo el texto secundario y el diploma ⚠️ Los otros treinta y nueve valores de este archivo son DERIVADOS, y ninguno se eligió mirándolo: cada uno se movió hasta que el par que tenía que sostener pasaba su umbral, y el número quedó escrito al lado. `tools/contraste.php` los vuelve a medir todos en cada `make check`. ⚠️ Y falta una cosa que ninguna medición puede reemplazar: el día que Vitta Motos entregue su manual de marca, esto se compara contra él. Un naranja elegido por especificación es un punto de partida defendible, no la identidad final de un cliente. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ LO QUE MIDIÓ DISTINTO A LO QUE SE ESPERABA ───────────────────────────┐ Antes de escribir un valor se midió el peor caso previsto —el mismo que en snacks obligó a sacar el naranja del acento— y acá dio al revés: blanco sobre el naranja de acento 5,18:1 ✓ texto (4,5) blanco sobre el naranja quemado 10,08:1 ✓ el acento sobre papel blanco 5,18:1 ✓ el acento sobre la superficie oscura 3,50:1 ✓ no textual (3,0) el amarillo sobre el naranja quemado 5,54:1 ✓ O sea: **este naranja NO se remapea entre temas.** `--m-acento` vale lo mismo en claro y en oscuro, y es el único acento de las tres paletas escritas hasta hoy que puede. El morado de VittaSnacks tuvo que aclararse un 28 % para el tema oscuro porque sin aclarar daba 1,70:1 contra su superficie; el naranja quemado ya está en el punto donde sostiene blanco encima Y se despega de un fondo casi negro. Eso no es suerte: es lo que pasa cuando el color de marca es de valor medio en vez de muy claro o muy oscuro. La contracara, y es la que sí duele: el acento sobre el naranja quemado 1,95:1 ✗ desaparece El acento y el tema son el MISMO color con dos luminancias vecinas, así que sobre el sidebar el acento no existe. Por eso `--m-acento-profundo` no es el naranja de marca sino un naranja aclarado (5,00:1 sobre el tema), y la tinta que va encima de él es el naranja quemado y no blanco: blanco sobre ese naranja claro da 2,02:1 y el rótulo «Nuevo» sería una mancha. Es la misma maniobra que resolvió snacks —dar vuelta la tinta— por un motivo distinto: allá el problema era un naranja demasiado claro para papel, acá es un naranja demasiado parecido a su propio fondo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ──────────────────────┐ `tools/contraste.php` lo pide con todas las letras: «una paleta nueva entra sin tolerancias y tiene que pasar los 60 pares o no entra». Ésta los pasa. Las dos únicas líneas donde `motos` aparece en `TOLERADOS` son las que ya estaban marcadas como deuda DEL PRODUCTO —`--v-on-deep` sobre `--v-warn-solid` y `--v-warn-fg` sobre `--v-warn-bg`—, cuyos dos tokens son del producto, están declarados en `vitta.css` con valores fijos y por lo tanto dan el mismo número en las diez instalaciones. **No hay ni una tolerancia causada por este naranja**, y ninguna de las dos se podría arreglar desde acá aunque se quisiera. En particular, y como en snacks: `--m-borde` PASA los cuatro pares de filete —3,52:1 sobre blanco, 3,30:1 sobre el papel, 5,14:1 sobre la superficie oscura y 5,45:1 sobre el fondo oscuro—. La deuda más seria de la paleta de retail no se hereda. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas 44 primitivas: ni una menos, para que no queden huecos silenciosos, ni una más, para que nadie mantenga peso muerto creyendo que sirve. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión medida, no un olvido. Vitta Motos no entregó tipografía. La tentación del oficio es evidente —una condensada industrial, del tipo que usan las marcas de motocicletas en sus fichas de producto— y no se puede satisfacer: el proyecto sirve las familias que tiene alojadas, y meter una familia nueva es subir archivos, revisar licencia y pagar peso de descarga en una plataforma que se abre desde el celular en una vitrina. ⚠️ Y hay un fallo concreto que esto evita, el mismo que documenta `marca-snacks.css`: declarar una familia que sólo está subida en dos pesos mientras `vitta.css` usa el titular en 800 no da error. El navegador sintetiza la negrita, engorda los trazos y arruina justo lo que se quería mejorar. Nadie lo reporta, porque «se ve un poco raro» no es un error. El día que el cliente entregue su familia con todos sus pesos, se cambia acá y en ningún otro lado. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del logotipo ────────────────────────────────────────────── El emblema de Vitta Motos es un azulejo redondeado, no un disco, y la razón no es estética: en este oficio el cuadrado con las esquinas suavizadas es la forma de la PLACA —la del vehículo, la del casco homologado, la del sticker de revisión—. Un disco habría sido el sello de una concesionaria de autos, que es la escuela de al lado y no ésta. ⚠️ EL ARTE NO TRAE SU PROPIO AZULEJO, Y ESO ES A PROPÓSITO. `public/img/marca/motos/icono.png` es la SILUETA sola sobre transparencia: el casco integral de perfil, en crema, con la visera y la ventilación del mentón en amarillo. El azulejo lo pone esta placa. Si el arte trajera su fondo adentro, el contorno que mide `tools/marca-legible.php` sería el filo del propio azulejo contra una placa del mismo color —1,00:1, el 100 % del contorno fundido— y la herramienta lo diría. Un logotipo que trae su fondo no se puede medir sobre ninguna superficie. Medido con `tools/marca-legible.php`, placa por placa: #7A2408 el tema 9,45:1 medio · 9,39:1 el peor · 0,0 % fundido #431303 el tema oscuro 14,77:1 medio · 0,0 % fundido #9A3410 el segundo tono 6,86:1 medio · 0,0 % fundido #C2410C el acento 4,86:1 medio · 0,0 % fundido #FFF6F0 el papel 1,00:1 medio · 100,0 % fundido ✗ NO PASA ⚠️ La última fila es la que decide, y por eso está escrita: la silueta es casi del color del papel de la marca, así que una placa clara la borra entera. La placa de esta escuela TIENE que ser oscura. Ocupación del lienzo: 92,8 %. Y por eso los tres tamaños de placa son EXACTAMENTE los de la imagen (46 / 76 / 132), que es lo que la herramienta exige para un arte que llena su lienzo: una placa más grande le dibujaría un segundo borde alrededor del que ya tiene. Es la lección que costó el halo de Cars. ⚠️ Consecuencia de que la placa SEA el color del sidebar: sobre el sidebar el azulejo no se ve y la silueta queda flotando. No es un descuido — es el mismo 9,44:1 el que dice que ahí se lee igual. Donde el azulejo sí se ve es en el panel blanco del ingreso y en el splash, que es donde hace falta que exista. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; /* 22 % del lado: la esquina de una placa, no un círculo. */ --m-marca-radio: 22%; --m-marca-aislamiento: 0; --m-marca-placa: #FFFFFF; /* ── La superficie profunda ─────────────────────────────────────────────── El naranja quemado de la especificación, sin tocar, en la rama clara. La rama oscura lo baja dos escalones: un naranja pensado para contrastar contra una página clara se vuelve un ladrillo encendido cuando la página ya es oscura, y el sidebar deja de ser fondo para competir con el contenido. */ --m-profundo: light-dark(#7A2408, #431303); /* El segundo tono: el fondo del menú activo. 1,38:1 sobre el sidebar en tema claro y 1,23:1 en oscuro — por encima del piso de 1,2 que separa «un tono más» de «el mismo color con otro nombre». */ --m-profundo-2: light-dark(#9A3410, #5C1D07); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #A94B21; /* Lo que se escribe encima del fondo profundo. 10,08:1 en claro, 15,75:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* El naranja quemado abierto hacia el crema del papel, no hacia blanco puro: sobre el sidebar da 6,91:1 y conserva el tono de la marca. */ --m-sobre-profundo-suave: #F0CFC1; /* Texto de apoyo cuando cae sobre el fondo profundo: los enlaces del menú, el cargo en el pie del sidebar, la leyenda de la barra de nivel. ⚠️ NO vale lo mismo que `--m-apagado`, y ésa es la diferencia con la paleta de retail. En VITTA los dos roles comparten gris, y por eso el par `--v-muted-on-deep` sobre `--v-deep` está en `DESCUBIERTOS` con 3,81:1: ningún color llega a 4,5:1 contra papel claro y contra una superficie saturada a la vez. Acá son dos colores distintos y el par da 5,64:1. Es el mismo camino que `--m-sobre-profundo-suave`, un escalón más abajo. */ --m-apagado-profundo: #E3B9A6; /* ── El acento ──────────────────────────────────────────────────────────── El naranja de la especificación, SIN remapear entre temas, que es lo que lo distingue de las otras dos paletas del proyecto. blanco encima, sobre papel 5,18:1 ✓ botón primario blanco encima, en tema oscuro 5,18:1 ✓ el mismo, porque es el mismo contra la superficie oscura 3,50:1 ✓ el filete del campo con foco contra papel blanco 5,18:1 ✓ Aclararlo para el tema oscuro —el reflejo aprendido en snacks— habría bajado el blanco de su propio botón por debajo de 4,5:1. Se probó: #D2571F da 4,10:1 y no entra. */ --m-acento: #C2410C; /* Disco de iniciales y estados certificados: el naranja bajado. Blanco encima da 7,31:1. Tampoco se remapea, por lo mismo. */ --m-acento-fuerte: #9A3410; /* ⚠️ Hover de enlaces, y acá sí hay dos ramas, con la dirección invertida respecto de lo que hace el resto del proyecto: en tema claro el enlace se OSCURECE al pasar por encima (7,65:1 sobre blanco, contra 5,18:1 en reposo) y en tema oscuro se aclara (6,07:1 sobre la superficie oscura). Aclarar en tema claro es el reflejo heredado del verde de retail y con un naranja no funciona: un naranja aclarado sobre papel baja de 4,5:1, o sea que el enlace se volvería MENOS legible justo cuando el puntero lo señala. */ --m-acento-hover: light-dark(#97300B, #E9743F); /* ── El acento cuando aterriza SOBRE la superficie profunda ─────────────── El filete del menú activo, la regla del logotipo, la etiqueta «Nuevo» y el relleno de la barra de nivel. ⚠️ NO es `--m-acento`. El acento sobre el tema da 1,95:1 —son el mismo naranja con dos luminancias vecinas— y ahí no se ve nada. Éste es el naranja abierto hasta que rinde: 5,00:1 sobre el sidebar claro. Y la tinta que va encima es el naranja quemado, no blanco: 5,00:1 contra 2,02:1. Es el par que en retail y en Cars está en deuda —blanco sobre un acento saturado— y que acá se resuelve dando vuelta la tinta, que es exactamente para lo que estos dos tokens tienen nombre propio. */ --m-acento-profundo: #FFA057; --m-sobre-acento-profundo: #7A2408; /* La chispa: el amarillo de realce. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 5,54:1. En este oficio el amarillo no es decoración: es el color de la señalización de la vía y del chaleco que se ve de noche. Va donde hay que mirar. */ --m-chispa: #F2B705; /* ── Tinta ──────────────────────────────────────────────────────────────── El naranja quemado llevado casi al negro: 16,47:1 sobre blanco y 15,44:1 sobre el papel de la marca. Un negro puro habría sido más fácil y menos de esta marca; un naranja sin bajar no es tinta, es un titular. */ --m-tinta: light-dark(#3A1305, #FBEAE0); --m-tinta-2: light-dark(#6B4A3C, #E0C4B4); /* El «apoyo» de la especificación, sin tocar. 4,89:1 sobre blanco y 4,58:1 sobre el papel: es el par que más cerca queda del umbral de toda la paleta, y por eso está escrito el número. Bajarle un punto de luminancia al papel lo rompe. */ --m-apagado: light-dark(#8A6A5C, #C0A192); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. 3,23:1 sobre el relleno claro y 4,41:1 sobre el oscuro, contra un umbral de 3:1 — es texto grande, no texto corriente. */ --m-apagado-2: #9C7E70; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es el PAPEL de la marca, un blanco tibio con el naranja adentro, no un gris. Es lo que hace que la plataforma se lea como suya antes de que aparezca un solo naranja saturado. */ --m-fondo: light-dark(#FFF6F0, #1A0B05); --m-superficie: light-dark(#FFFFFF, #241109); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los cuatro pares de filete: 3,52:1 sobre blanco, 3,30:1 sobre el papel, 5,14:1 sobre la superficie oscura y 5,45:1 sobre el fondo oscuro. El primer candidato —#A98A7C, el «apoyo» aclarado— daba 2,98:1 sobre el papel y no entró por dos centésimas. El borde de un campo es lo que dice dónde empieza el campo: es la deuda más seria que arrastra la paleta de retail y acá no se hereda. */ --m-borde: #A2826F; --m-relleno: light-dark(#FBECE3, #33180D); --m-relleno-2: light-dark(#F7E5DA, #3B1D10); --m-relleno-3: light-dark(#FDEFE4, #2E1509); /* casilla marcada, realce suave */ --m-realce: light-dark(#FCE7D8, #35190B); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del naranja quemado, para los velos. Van sueltos y no como color porque un velo necesita `rgba()` con una opacidad distinta en cada parada del degradado, y no se puede sacar la opacidad de un color ya armado. */ --m-profundo-canales: 122, 36, 8; /* el naranja quemado de Vitta Motos */ --m-halo: light-dark(rgba(194, 65, 12, .18), rgba(233, 116, 63, .34)); /* El latido del canje va en AMARILLO y no en naranja, por dos razones que apuntan al mismo lado. La de marca: el naranja del halo sobre un fondo que ya es naranja no late, se funde. La del oficio: el amarillo es el color con el que este negocio señala —el chaleco, la línea de la vía, el destello del intermitente—. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(242, 183, 5, .42), rgba(242, 183, 5, .50)); --m-sombra-media: light-dark(rgba(58, 19, 5, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#E6CFC0, #4A2B1B); /* ── Papel ──────────────────────────────────────────────────────────────── El diploma, el marco de la cápsula SCORM y el botón claro sobre fondo oscuro fijo. No siguen el tema: son la rama CLARA, clavada. ⚠️ Los valores están alineados uno a uno con `PaletaDiploma::POR_ESCUELA`, clave `motos`, porque son el mismo diploma visto desde dos capas: la hoja lo dibuja en pantalla y el servicio lo compone en PDF. Dos listas de colores para una sola lámina es cómo un diploma termina imprimiéndose de un color y mostrándose de otro. ⚠️ Y el `--m-papel-superficie` es BLANCO, no el papel de la marca: un diploma se IMPRIME, y la hoja de la impresora es blanca. El papel tibio queda para el fondo de la pantalla que lo muestra. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #FFF6F0; --m-papel-tinta: #7A2408; --m-papel-tinta-2: #6B4A3C; --m-papel-apagado: #8A6A5C; --m-papel-borde: #F0E4DE; --m-papel-profundo: #7A2408; }