/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — VittaSnacks ═══════════════════════════════════════════════════════════════════════════ Este archivo es del CLIENTE. La escuela comercial de la marca de snacks de consumo masivo del Grupo Vitta: `vittaretail.com/snacks`. Es la TERCERA instalación, y la primera que vive en un subdominio propio en vez de una subcarpeta. Eso no cambia nada de este archivo —el color no sabe por qué URL llegó el pedido— pero sí cambia el resto de la instalación. Ver `instalaciones/snacks/env.ejemplo`. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES ─────────────────────────────────────────┐ Del BRANDBOOK que entregó el cliente, fila «PALETA DE COLOR», leída a 6× de aumento sobre el archivo original antes de escribir un solo valor acá: #FF7A00 naranja el delantal, las cintas, el acento del empaque #5A189A morado el fondo de la bolsa, el uniforme, la góndola #FFC93C amarillo los realces del logotipo #FFF4E8 crema el papel de la marca y las letras del logotipo #2E0B57 profundo el contorno del logotipo y el morado de góndola ⚠️ Las muestras RENDERIZADAS del propio brandbook NO dan estos números: la pintada del naranja mide #FE6A00 y el rótulo impreso debajo dice #FF7A00. Manda el RÓTULO, que es la declaración; la muestra es una imagen. Es el mismo criterio que ya rige en `marca-cars.css`, donde el brandbook de Chevrolet se contradice a sí mismo entre sus RGB y sus HEX y mandan los HEX. Y se cruzó contra el arte de empaque y de punto de venta, que confirma la FAMILIA y no el valor: bajo luz de supermercado el morado de la góndola mide #40204C y el naranja del delantal #D47F25. Son el mismo morado y el mismo naranja con una lámpara encima. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El pliego lo pedía con todas las letras y tenía razón: «un morado profundo con texto blanco encima es fácil; el naranja sobre blanco NO». naranja sobre blanco 2,76:1 ✗ ni texto (4,5) ni filete (3,0) naranja sobre el morado 6,14:1 ✓ y el morado encima del naranja, 6,14:1 amarillo sobre el morado 10,43:1 ✓ blanco sobre el morado 16,10:1 ✓ Por eso el naranja NO es `--m-acento` —que aterriza sobre papel— sino `--m-acento-profundo`, que sólo se apoya sobre el sidebar. El acento del producto es el MORADO, que sobre blanco da 10,29:1. Lo sostiene `tests/unit/PaletaSnacksTest.php`, y lo vuelve a medir `tools/contraste.php` en cada `make check`. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ──────────────────────┐ `tools/contraste.php` lo dice en su lista de deuda: «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 `snacks` 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 y por lo tanto dan el mismo número en las tres escuelas. No hay ni una tolerancia causada por este morado. En particular: `--m-borde` PASA los dos pares de filete en los dos temas, que es la deuda más seria que arrastra la paleta de retail. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas primitivas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. El brandbook de VittaSnacks NO entrega un solo archivo de tipografía: sugiere CATEGORÍAS —«display redondeada» para titulares, «sans geométrica» para textos—. Es lo contrario del caso de Cars, donde Louis llegó de GM Asset Central con su licencia. La tentación es declarar Poppins, que es la geométrica que el proyecto ya aloja y que es lo más cercano a una display redondeada que hay acá. ⚠️ No sirve: Poppins está subida en 600 y 700 solamente, y `vitta.css` usa el titular en 800 en veinticuatro reglas. El navegador no falla — sintetiza una negrita falsa, engorda los trazos y arruina justo lo que se quería mejorar. Y no lo reporta nadie, porque «se ve un poco raro» no es un error. El día que el cliente entregue su display con todos sus pesos, se cambia acá y en ningún otro lado. Lo sostiene `PaletaSnacksTest::testLaPilaTipograficaEsLaQueElProyectoPuedeServir`. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del logotipo ────────────────────────────────────────────── ⚠️ NO ES UN DISCO, Y NO LO DECIDIMOS NOSOTROS: LO DECIDIÓ EL BRANDBOOK. La fila «VERSIONES DEL LOGO» del brandbook trae dos marcas compactas —«EN FONDO MORADO» y «EN FONDO NARANJA»— y las dos son AZULEJOS REDONDEADOS con el logotipo adentro. No hay ninguna versión circular en el documento. Medido sobre el azulejo morado del propio brandbook: relleno del azulejo #580687 ≈ el morado de marca #5A189A tinta del logotipo 97,4 % × 97,2 % del azulejo O sea: el cliente pone su logotipo casi al borde del azulejo. Por eso el arte de `icono.png` es la caja de tinta del logotipo con el 3 % de aire por lado —el mismo que deja el brandbook— y ocupa el 93,9 % de su lienzo. Y por eso los tres tamaños de placa son EXACTAMENTE los de la imagen (46 / 76 / 132), que es lo que `tools/marca-legible.php` exige para un arte que llena su lienzo: una placa más grande le dibujaría un segundo borde alrededor del que ya tiene. La misma lección que costó el halo de Cars. Con la placa ajustada, lo que se ve es el azulejo del brandbook: el morado rellenando las esquinas transparentes del PNG. ⚠️ CUÁL DE LOS DOS MORADOS, LO DIJO LA MEDICIÓN Y NO EL GUSTO. El brandbook ofrece DOS azulejos y no dice cuál usar. `tools/marca-legible.php` midió el contorno del logotipo sobre los cuatro candidatos: #2E0B57 morado profundo 6,79:1 31,6 % fundido ← el elegido #3F0F70 morado bajado 5,86:1 32,6 % #4A1580 segundo tono 5,23:1 33,3 % #5A189A morado de marca 4,51:1 39,5 % pasa por medio punto #FF7A00 azulejo naranja 2,74:1 69,5 % ✗ NO PASA El azulejo naranja del brandbook queda descartado por medición, no por gusto: el logotipo tiene naranja adentro y sobre naranja pierde dos tercios de su contorno. Es exactamente la trampa que costó el halo de Cars, sólo que esta vez el número existió ANTES de la decisión. Consecuencia de elegir el profundo: sobre el sidebar —que ES #2E0B57— el azulejo no se ve, y el logotipo queda flotando. Eso NO es un descuido: es el mismo 6,79:1 el que dice que ahí se lee igual de bien. 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 del azulejo del brandbook, no un círculo. */ --m-marca-radio: 22%; --m-marca-aislamiento: 0; --m-marca-placa: #2E0B57; /* ── La superficie profunda ─────────────────────────────────────────────── El morado profundo del brandbook, sin tocar, en la rama clara. La rama oscura lo baja un escalón: un morado pensado para contrastar contra una página clara se ve lavado cuando la página ya es oscura. */ --m-profundo: light-dark(#2E0B57, #1A0633); /* El segundo tono: el fondo del menú activo. 1,31:1 sobre el sidebar en tema claro y 1,24: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(#4A1580, #331060); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #6B2B9E; /* Lo que se escribe encima del fondo profundo. 16,10:1 en claro, 18,79:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* = morado + blanco 78 %. 7,74:1 sobre el sidebar. */ --m-sobre-profundo-suave: #DBCCE9; /* 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 toda 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 blanco y contra una superficie saturada a la vez. Acá son dos colores distintos y el par da 7,50:1. = morado + blanco 62 %. */ --m-apagado-profundo: #C0A7D9; /* ── El acento ──────────────────────────────────────────────────────────── EL MORADO DE MARCA, no el naranja. 10,29:1 con blanco encima sobre papel, que es lo que un botón primario necesita y lo que el naranja no puede dar. La rama oscura es el mismo morado con blanco 28 %: en tema oscuro el acento tiene que separarse de una superficie casi negra (3,62:1) sin dejar de sostener el blanco de su propio botón (5,07:1). El morado del brandbook, sin aclarar, da 1,70:1 contra la superficie oscura y desaparece. */ --m-acento: light-dark(#5A189A, #8859B6); /* Disco de iniciales y estados certificados: el morado bajado. */ --m-acento-fuerte: light-dark(#3F0F70, #6E3C9E); /* Hover de enlaces: el morado subido. */ --m-acento-hover: light-dark(#7B2CB5, #A87BD0); /* ── Y ACÁ SÍ VA EL NARANJA ─────────────────────────────────────────────── El acento cuando aterriza SOBRE la superficie profunda: el filete del menú activo, la regla del logotipo, la etiqueta «Nuevo», el relleno de la barra de nivel. Es el único sustrato de la plataforma donde el naranja del brandbook rinde: 6,14:1 sobre el morado, contra 2,76:1 sobre papel. Y la tinta que va encima del naranja es el morado profundo, no blanco: 6,14:1 contra 2,76: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: #FF7A00; --m-sobre-acento-profundo: #2E0B57; /* La chispa: el amarillo del logotipo. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 10,43:1. */ --m-chispa: #FFC93C; /* ── Tinta ──────────────────────────────────────────────────────────────── El morado profundo del brandbook es la tinta: 14,87:1 sobre la crema y 16,10:1 sobre blanco. Un negro habría sido más fácil y menos de esta marca. */ --m-tinta: light-dark(#2E0B57, #F1E9F8); --m-tinta-2: light-dark(#5C4B6E, #CDBFDD); --m-apagado: light-dark(#6E5C80, #A08FB4); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. Pasa 3:1 sobre el relleno claro y sobre el oscuro. */ --m-apagado-2: #8B7C9E; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es LA CREMA DEL BRANDBOOK, no un gris. Es la superficie que la marca usa detrás de todo su material, y es lo que hace que la plataforma se lea como suya antes de que aparezca un solo morado. */ --m-fondo: light-dark(#FFF4E8, #14091F); --m-superficie: light-dark(#FFFFFF, #1B0E2B); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas: 3,94:1 sobre blanco, 3,63:1 sobre la crema, 4,65:1 sobre la superficie oscura y 4,88:1 sobre el fondo oscuro. Es la deuda más seria que arrastra la paleta de retail —«el borde de `.v-input` es lo que dice dónde empieza el campo»— y acá no se hereda. */ --m-borde: #8C7A9C; --m-relleno: light-dark(#F6EDE2, #2A1A3D); --m-relleno-2: light-dark(#F2E7DB, #31203F); --m-relleno-3: light-dark(#F4ECFB, #251638); /* casilla marcada, realce suave */ --m-realce: light-dark(#F0E4FA, #2B1A45); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del morado profundo, 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: 46, 11, 87; /* el morado profundo de VittaSnacks */ --m-halo: light-dark(rgba(90, 24, 154, .20), rgba(136, 89, 182, .35)); /* El latido del canje va en NARANJA y no en morado: es el único efecto de la plataforma que celebra algo, y el naranja es lo que esta marca usa para celebrar. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(255, 122, 0, .40), rgba(255, 122, 0, .48)); --m-sombra-media: light-dark(rgba(46, 11, 87, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#D9C9E6, #3B2A50); /* ── 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. ⚠️ `--m-papel-fondo` es la crema del brandbook y `--m-papel-superficie` es blanco: un diploma se IMPRIME, y la hoja de la impresora es blanca. La crema queda para el fondo de la pantalla que lo muestra. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #FFF4E8; --m-papel-tinta: #2E0B57; --m-papel-tinta-2: #5C4B6E; --m-papel-apagado: #6E5C80; --m-papel-borde: #E3D6C6; --m-papel-profundo: #2E0B57; }