/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Hogar ═══════════════════════════════════════════════════════════════════════════ Este archivo es del CLIENTE. La escuela comercial de muebles y decoración del Grupo Vitta: `vittaretail.com/hogar`. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES, DICHO SIN ADORNO ───────────────────────┐ NO de un brandbook entregado. Vitta Hogar todavía no tiene uno: es una escuela nueva, y lo único declarado son los CUATRO colores de la ficha de `docs/SIETE-ESCUELAS.md` §5, repetidos en `tools/siete-escuelas.php` bajo la clave `hogar`: #4A3520 bronce tierra profundo madera, solidez — el tema #8A5A2B bronce medio el acento #D9B382 arena el realce #FBF7F1 lino el papel de la marca Decirlo importa. `marca-snacks.css` puede escribir «leído a 6× de aumento sobre el brandbook original» porque ese documento EXISTE. Acá no, y escribir la misma frase sería inventar una fuente. Lo que sí existe es la ficha, y lo que hay debajo de esta línea son las DERIVADAS de esos cuatro valores, calculadas y medidas con `tools/contraste.php`, no elegidas a ojo. El día que el cliente entregue su brandbook, los cuatro de arriba se confirman o se corrigen, y las derivadas se vuelven a calcular desde acá. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ POR QUÉ EL ACENTO ES ESE Y NO UNO MÁS CÁLIDO ─────────────────────────┐ La ficha llegó a traer dos valores distintos para el mismo rol —`#9C6B3C` en la tabla del documento y `#8A5A2B` en el generador—. Hoy los dos archivos dicen `#8A5A2B`, y queda escrito por qué gana ése, porque la tentación de subirlo un tono para que «se vea más cálido» va a volver: blanco sobre #8A5A2B 5,87:1 ✓ con medio punto largo de margen blanco sobre #9C6B3C 4,58:1 ✓ pasa por ocho centésimas `--m-acento` es `--v-green`, o sea el relleno del botón primario y de siete reglas más, todas con texto blanco encima. Un acento que pasa 4,5:1 por ocho centésimas es un acento que cualquier retoque futuro rompe sin que nadie se entere. ⚠️ Y hay un segundo motivo, más incómodo: el par blanco-sobre-acento es exactamente el que en la paleta de retail está en `TOLERADOS` desde el primer día, y esa entrada nombra sólo a `vitta`. Esta escuela entra SIN esa tolerancia. Elegir el valor justo habría sido pedir prestada una deuda que no es suya. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El problema de esta paleta es el mismo que el de cualquier marca de madera: los cuatro colores declarados viven en una franja estrecha de luminancia —tierra, bronce, arena, lino— y dos de ellos, el bronce medio y la arena, se parecen lo suficiente como para que el ojo los confunda y el número no. arena #D9B382 sobre papel blanco 1,96:1 ✗ ni texto ni filete arena #D9B382 sobre el bronce tierra 5,89:1 ✓ bronce #8A5A2B sobre papel blanco 5,87:1 ✓ blanco sobre el bronce tierra 11,53:1 ✓ Por eso la arena NO es `--m-acento` —que aterriza sobre papel— sino `--m-chispa`, que sólo se apoya sobre la superficie profunda. Es la misma lección que ya había dejado escrita `marca-snacks.css` con su naranja, y acá se repite con otro color: un tono cálido y claro no sostiene nada sobre blanco, y sostiene todo sobre su propio profundo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ 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 pares o no entra». Ésta los pasa, y por lo tanto `hogar` NO aparece en ninguna entrada de `TOLERADOS`. Las dos únicas líneas donde `hogar` aparece son las que ya estaban marcadas como deuda DEL PRODUCTO —`--v-on-deep` sobre `--v-warn-solid` (2,95:1) y `--v-warn-fg` sobre `--v-warn-bg` (3,45:1)—, cuyos dos tokens son del producto y dan el MISMO número en las diez instalaciones. No las causa este bronce: las causa el ámbar de la insignia «En curso», que es del producto. Medido: 680 mediciones, 34 pares × 2 temas × 10 instalaciones, ninguna sorpresa nueva. 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 44 primitivas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. Vitta Hogar no entregó tipografía. La tentación del sector es fuerte y hay que nombrarla para descartarla: una marca de muebles pide a gritos una serif de editorial de decoración, y el proyecto no aloja ninguna. Declarar `Georgia` o `serif` a secas no traería «la elegancia de la categoría»: traería la tipografía que cada sistema operativo tenga a mano, distinta en cada máquina, y encima descoordinada con los pesos que `vitta.css` usa. La pila de la casa —Karla, Archivo, Poppins— está subida, subsetada y medida. Se cambia acá y en ningún otro lado el día que llegue la del cliente con todos sus pesos. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del logotipo ────────────────────────────────────────────── ⚠️ AZULEJO REDONDEADO, NO DISCO, Y ACÁ SÍ ES DECISIÓN NUESTRA. Snacks pudo escribir «lo decidió el brandbook» porque su brandbook trae dos azulejos dibujados. Acá no hay documento, así que la forma se elige, y se elige con un motivo que se puede discutir: el emblema de Vitta Hogar es una V que es también el techo de una casa, apoyada sobre un umbral. Es una figura ARQUITECTÓNICA, con base horizontal y aplomo vertical. Un disco le quita las dos cosas; un azulejo se las devuelve. `--m-marca-radio: 18%` — la esquina de un mueble bien hecho, no la de una aplicación de teléfono. ⚠️ EL COLOR DE LA PLACA LO DIJO LA MEDICIÓN. `tools/marca-legible.php` mide el CONTORNO del emblema —los píxeles opacos que tocan transparencia— contra el sustrato. Medido sobre los candidatos: #4A3520 bronce tierra 9,45:1 0,0 % fundido ← el elegido #6E4620 bronce bajado 6,72:1 0,0 % #8A5A2B bronce medio 4,81:1 25,3 % #D9B382 arena 1,61:1 100,0 % ✗ NO PASA #FFFFFF blanco 1,31:1 100,0 % ✗ NO PASA Los dos que NO pasan son exactamente los dos que uno elegiría mirando: el emblema está dibujado en lino y arena, y sobre una placa clara desaparece casi entero. Es la trampa que costó el halo de Cars, y el número existió antes de la decisión. ⚠️ Consecuencia dicha en voz alta, la misma que asumió Snacks: sobre el sidebar —que ES `#4A3520`— el azulejo no se ve y el emblema queda flotando. No es un descuido: es el mismo 9,45:1 el que dice que ahí se lee igual de bien. Donde el azulejo sí existe es en el panel blanco del ingreso y en el splash, que es donde hace falta. Los tres tamaños son EXACTAMENTE los `width` de los tres ``. El arte ocupa el 90,8 % de su lienzo, o sea que llena su caja, y para un arte así `tools/marca-legible.php` exige que la placa termine donde termina el arte: una placa más grande le dibuja una segunda esquina alrededor de la que ya tiene, y eso es el halo. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; --m-marca-radio: 18%; --m-marca-aislamiento: 0; --m-marca-placa: #111111; /* ── La superficie profunda ─────────────────────────────────────────────── El bronce tierra de la ficha, sin tocar, en la rama clara. La rama oscura lo baja dos escalones: un marrón pensado para contrastar contra una página clara se ve barroso cuando la página ya es oscura. */ --m-profundo: light-dark(#4A3520, #241A0F); /* El segundo tono: el fondo del menú activo. 1,40: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». Con una paleta de un solo hemisferio cromático, ese piso es lo único que impide que el menú activo desaparezca. */ --m-profundo-2: light-dark(#644A2C, #3A2A18); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #7A5A34; /* Lo que se escribe encima del fondo profundo. 11,53:1 en claro, 17,08:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* 8,21:1 sobre el sidebar claro. ⚠️ NO es «el bronce mezclado con blanco». Se probó y no sirve: mezclar un marrón con blanco lo desatura y sale un gris topo —#D7D3CE— que no se parece a esta marca. Es un lino cálido elegido a mano y medido después. */ --m-sobre-profundo-suave: #E4D8C8; /* 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 5,67:1. */ --m-apagado-profundo: #C6B39C; /* ── El acento ──────────────────────────────────────────────────────────── El bronce medio. 5,87:1 con blanco encima sobre papel, que es lo que un botón primario necesita. La rama oscura NO es el mismo color: es un bronce subido. Y tiene que caer dentro de una ventana estrecha, porque se le exigen dos cosas contrarias a la vez —sostener el blanco de su propio botón (≥ 4,5:1) y separarse de una superficie casi negra (≥ 3,0:1 para el filete del campo con foco)—: #8A5A2B el de la rama clara 5,87:1 con blanco 3,11:1 sobre #1B140C #96673A el elegido 4,89:1 3,73:1 #B98A55 un bronce claro 3,07:1 ✗ 5,75:1 El de la rama clara ENTRA por tres centésimas en el filete del campo. Se descartó por lo mismo que `#9C6B3C` arriba: un valor que pasa raspando es un valor que el próximo retoque rompe en silencio. */ --m-acento: light-dark(#8A5A2B, #96673A); /* Disco de iniciales y estados certificados: el bronce bajado. 8,20:1 con blanco encima en claro, 6,85:1 en oscuro. */ --m-acento-fuerte: light-dark(#6E4620, #7A5227); /* Hover de enlaces: el bronce subido en claro, la arena bronceada en oscuro. */ --m-acento-hover: light-dark(#A06A33, #C2915B); /* ── Y ACÁ VA EL COBRE ──────────────────────────────────────────────────── 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. El bronce medio de la marca sobre el bronce tierra da 1,96:1 y no se ve; el cobre da 4,41:1 en claro y 6,54:1 en oscuro. Y la tinta que va encima del cobre es una tierra casi negra, no blanco: 6,04:1 contra 2,61: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. ⚠️ Y una nota sobre el valor de la tinta: es `#2E2012` y no `#4A3520`, que habría sido lo elegante. El bronce tierra sobre el cobre da 4,41:1 y el umbral es 4,5. Nueve centésimas. Se bajó el tono en vez de tolerar el par. */ --m-acento-profundo: #CE9550; --m-sobre-acento-profundo: #2E2012; /* La chispa: la arena de la ficha. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 5,89:1 en claro y 8,72:1 en oscuro. Sobre papel daría 1,96:1, y por eso no es el acento. */ --m-chispa: #D9B382; /* ── Tinta ──────────────────────────────────────────────────────────────── El bronce tierra de la ficha es la tinta: 10,80:1 sobre el lino y 11,53:1 sobre blanco. Un negro habría sido más fácil y menos de esta marca; y en una escuela que enseña a mirar materiales, un texto que es del color de la madera no es un capricho. */ --m-tinta: light-dark(#4A3520, #F5EDE2); --m-tinta-2: light-dark(#5F4B37, #D6C8B6); --m-apagado: light-dark(#6E5A44, #AD9C86); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. 3,73:1 sobre el relleno claro y 3,62:1 sobre el oscuro — pasa el umbral de texto grande en los dos. */ --m-apagado-2: #8A7660; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es EL LINO DE LA FICHA, no un gris. Es lo que hace que la plataforma se lea como de esta marca antes de que aparezca un solo bronce. Los tres rellenos y el realce son ese mismo lino bajando por pasos, y el orden importa: `--m-relleno-2` es el más oscuro de los tres porque es el que pinta la fila alterna de una tabla, que tiene que separarse del relleno normal sin volverse un bloque de color. */ --m-fondo: light-dark(#FBF7F1, #130E07); --m-superficie: light-dark(#FFFFFF, #1B140C); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas: 4,13:1 sobre blanco, 3,87:1 sobre el lino, 4,41:1 sobre la superficie oscura y 4,65: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: #8C7A64; --m-relleno: light-dark(#F4EDE2, #2C2116); --m-relleno-2: light-dark(#EFE7D9, #33261A); --m-relleno-3: light-dark(#F5EBDC, #2A2015); /* casilla marcada, realce suave */ --m-realce: light-dark(#F3E8D6, #2F2317); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del bronce tierra, 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: 74, 53, 32; /* el bronce tierra de Vitta Hogar */ --m-halo: light-dark(rgba(138, 90, 43, .20), rgba(150, 103, 58, .35)); /* El latido del canje va en COBRE y no en bronce: es el único efecto de la plataforma que celebra algo, y el cobre es el tono más encendido que esta marca tiene. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(206, 149, 80, .40), rgba(206, 149, 80, .48)); --m-sombra-media: light-dark(rgba(74, 53, 32, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#DFD0BB, #3A2C1D); /* ── 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 el lino de la ficha y `--m-papel-superficie` es blanco: un diploma se IMPRIME, y la hoja de la impresora es blanca. El lino queda para el fondo de la pantalla que lo muestra. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #FBF7F1; --m-papel-tinta: #4A3520; --m-papel-tinta-2: #5F4B37; --m-papel-apagado: #6E5A44; --m-papel-borde: #E3D6C1; --m-papel-profundo: #4A3520; }