/* ═══════════════════════════════════════════════════════════════════════════ ⚠️ EL TEMA DE ESTA ESCUELA LO DEFINE EL LOGOTIPO DEL CLIENTE, NO NOSOTROS ═══════════════════════════════════════════════════════════════════════════ Era `#5A1440`, un vino magenta que elegimos nosotros. El cliente entregó su logotipo y es NEGRO Y ORO ROSA. El tema es `#14100F`, un negro cálido sacado del propio arte. ⚠️ Y HAY UNA FRASE MÁS ABAJO QUE SE AUTORREFUTA: «un negro habría sido más fácil y menos de esta marca». Resultó ser exactamente esta marca. Queda escrita a propósito — el error fue elegir el color antes de ver el arte. Lo que SOBREVIVE del argumento anterior, medido: · el champán `#F2CBA6` sigue haciendo falta como sexto color. Sobre el negro, `#C2477F` da 4,05:1 y sigue sin llegar a 4,5. La derivación forzada pasa a ser algo mejor: es el ORO ROSA del logotipo. · el magenta sigue sin poder ir sobre el sidebar: 2,97:1. · el acento sigue siendo el magenta y `--m-acento-profundo` el rosa. Lo que NO sobrevive: todo el argumento del vino como «color del rubro» —el terciopelo del probador, la caja de la etiqueta—. Hay que reescribirlo para negro y oro rosa. ⚠️ Los tokens claros se derivaron a GRIS en el primer intento, porque un negro es casi acromático y la derivación conserva la razón de croma. Se corrigieron a mano con los colores del logotipo: crema `#E8CDBB`, cobre `#C08A6E`. Medidos: 12,50:1 y 6,39:1 sobre el tema. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Fashion ═══════════════════════════════════════════════════════════════════════════ La escuela comercial de la cadena de ropa femenina del Grupo Vitta: `vittaretail.com/fashion`. Base `vittaretail_fashion`. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES, Y QUÉ LOS SEPARA DE LOS DE SNACKS ──────┐ De `tools/siete-escuelas.php`, clave `'fashion'`, que es la especificación cerrada de las siete escuelas nuevas: #5A1440 vino magenta profundo el tema #A8306A magenta el acento #E8B4C8 rosa cuarzo el realce #FFF5F9 rosa papel el papel #8A6478 malva apagado el apoyo ⚠️ Y acá hay una diferencia HONESTA con `marca-snacks.css` que conviene decir antes que nada: **VittaSnacks tenía brandbook y esta escuela no.** Allá los cinco valores se leyeron a 6× de aumento sobre el archivo del cliente, y por eso ese archivo puede discutir cuál gana entre el rótulo y la muestra. Acá los cinco valores los fijó el proyecto, y lo que hay que sostener no es una lectura sino una DERIVACIÓN: qué se hizo con esos cinco para llenar 44 primitivas, y por qué cada número. Eso está abajo, primitiva por primitiva, y en `docs/brandbook-fashion.md`. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ HAY UN SEXTO COLOR, Y NO ES UN DESCUIDO ──────────────────────────────┐ #F2CBA6 champán la chispa La especificación entrega cinco colores y la plataforma necesita DOS tonos claros distintos sobre la superficie profunda, no uno: el riel del menú activo —que es señal de estado— y la bajada del logotipo con la barra del splash —que es texto—. Si los dos son el mismo rosa, el sidebar tiene una sola señal y «acá estás parado» deja de distinguirse de la decoración. Sobre un vino magenta, sólo un color CLARO llega a 4,5:1. Medido: #C2477F el acento subido 2,80:1 ✗ no llega, y ningún magenta llega #E8B4C8 el rosa de realce 7,33:1 ✓ se lo lleva el riel #F2CBA6 champán 8,62:1 ✓ se la lleva la chispa Así que el sexto color no se inventó para decorar: se derivó porque el quinto ya tenía trabajo. Y se derivó del sector y no del aire — el champán es el metal que una boutique ya tiene puesto: el cierre, la hebilla, la etiqueta colgante y el riel. Es el mismo criterio con el que VittaSnacks usa su naranja SÓLO sobre morado: un color con un sustrato asignado, no un color más. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El magenta de acento tiene el problema inverso al naranja de VittaSnacks, y por eso el reparto es distinto: magenta #A8306A sobre papel 5,97:1 ✓ y blanco encima del magenta, 6,37:1 magenta #A8306A sobre el vino 2,05:1 ✗ ni texto ni filete rosa #E8B4C8 sobre el vino 7,33:1 ✓ y el vino encima del rosa, 7,33:1 champán #F2CBA6 sobre el vino 8,62:1 ✓ blanco sobre el vino 13,05:1 ✓ O sea: el magenta SÍ puede ser `--m-acento` —cosa que el naranja de snacks no podía— porque aterriza sobre papel y sostiene blanco encima. Lo que NO puede es subirse al sidebar. Por eso `--m-acento-profundo` es el ROSA y no el magenta, y la tinta que va encima del rosa es el vino y no blanco. Todo esto lo recalcula `tools/contraste.php` en cada `make check`, contra ESTE archivo y no contra una copia. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ 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, incluidos los dos pares de filete de `--m-borde` en los dos temas, que son la deuda más seria que arrastra la paleta de retail y que acá no se hereda. ⚠️ Las DOS únicas líneas donde `fashion` va a tener que aparecer en `TOLERADOS` son las que ya están marcadas como deuda DEL PRODUCTO — `--v-on-deep` sobre `--v-warn-solid` y `--v-warn-fg` sobre `--v-warn-bg`—, cuyos tokens son los dos del producto y por lo tanto dan el mismo número en todas las escuelas. No hay ni una tolerancia causada por este vino magenta. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ 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 medida, no un olvido. La tentación en una escuela de moda es enorme y tiene nombre: una serif display de revista. Es lo primero que pide cualquiera que vea la palabra «fashion». ⚠️ No se puede, y el motivo es el mismo que `marca-snacks.css` ya dejó escrito para Poppins: el proyecto sirve las tipografías que tiene subidas en `public/fonts`, y ahí hay tres —Karla, Archivo y Poppins—. Declarar una display que no está alojada deja al navegador eligiendo el sustituto del sistema, que en Windows es Times New Roman. Una escuela de moda con Times New Roman en los titulares se ve peor que con la Archivo de la casa, y nadie lo reporta porque «se ve un poco raro» no es un error. El día que el cliente entregue su display con todos sus pesos, y el día que esos archivos estén en `public/fonts`, 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 ARTE ES SÓLO EL EMBLEMA, Y ESO CAMBIA LA REGLA DE LA PLACA. `public/img/marca/fashion/icono.png` no trae el logotipo adentro: trae la silueta de una blusa, con la V de Vitta como escote. El porqué está en `public/img/marca/fashion/LEEME.md`, y se resume en que las dos vistas que dibujan `marca.logo` ya escriben el nombre al lado —`.v-brand-name` y `.v-brand-sub` en el sidebar, `.v-login-name` y `.v-login-sub` en el ingreso—, así que un arte con «VITTA FASHION» adentro lo repite dos veces. Consecuencia medida: el arte ocupa el **72,7 %** de su lienzo, o sea que NO llena su caja. Está por debajo del umbral `LLENA_SU_LIENZO` de `tools/marca-legible.php`, y por lo tanto la regla del halo —«un arte de borde a borde no admite placa más grande»— no le aplica. Aun así los tres tamaños son EXACTAMENTE los `width` de los tres ``. No por obligación: porque el arte ya trae su propio aire adentro —72 px por lado a la izquierda y a la derecha sobre un lienzo de 512—, y agrandarle la placa encima le sumaría un segundo margen al que ya tiene. ⚠️ EL COLOR DE LA PLACA LO DIJO LA MEDICIÓN. `tools/marca-legible.php` midió el contorno de la silueta —1.121 píxeles— contra los candidatos de la familia: #2E0620 vino casi negro 13,72:1 0,0 % fundido #3D0D2B vino bajado 12,36:1 0,0 % #5A1440 el vino de marca 9,92:1 0,0 % ← el elegido #7A1E58 el segundo tono 7,41:1 0,0 % #A8306A el magenta 4,84:1 0,0 % #E8B4C8 el rosa de realce 1,35:1 100,0 % ✗ NO PASA #FFF5F9 el papel 1,23:1 100,0 % ✗ NO PASA Los cinco oscuros pasan con holgura, así que la elección NO la resolvió el umbral: la resolvió qué azulejo es el de la marca. Es el vino del tema, sin tocar, que es el mismo color que el sidebar y el mismo que el diploma. Los dos claros están en la tabla porque la trampa existe: sobre el rosa de realce el emblema pierde el 100 % de su contorno. Es la misma trampa que costó el halo de Cars, y esta vez el número existió ANTES de la decisión. Consecuencia de elegir el vino, dicha en voz alta: sobre el sidebar —que ES `#5A1440` en tema claro— el azulejo no se ve y la blusa queda flotando. NO es un descuido: es el mismo 9,92:1 el que dice que ahí se lee igual de bien. Donde el azulejo sí se ve es en el panel blanco del ingreso, en el splash y en la pestaña del navegador, 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 etiqueta de prenda, no un disco. Y no es gusto: está medido. El punto más lejano del arte —la punta izquierda del ruedo, en (72, 431)— queda a 1,4 px del filo de un disco de 512. No lo corta, pero lo TOCA: a 46 px eso es un ruedo pegado al borde de la placa, que es justamente lo que un azulejo tiene que evitar. Con el 22 % la misma punta queda con 60,5 px de holgura. */ --m-marca-radio: 22%; --m-marca-aislamiento: 0; --m-marca-placa: #111111; /* ── La superficie profunda ─────────────────────────────────────────────── El vino magenta del tema, sin tocar, en la rama clara. La rama oscura lo baja dos escalones: un vino pensado para contrastar contra una página clara se ve lavado cuando la página ya es oscura. */ --m-profundo: light-dark(#14100F, #030000); /* El segundo tono: el fondo del menú activo. 1,34:1 sobre el sidebar en tema claro y 1,27: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(#382F2D, #2A2422); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #4A3F3B; /* Lo que se escribe encima del fondo profundo. 13,05:1 en claro, 17,28:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* = vino + blanco 78 %, con el rosa de papel adentro para que no vire a gris. 8,79:1 sobre el sidebar. */ --m-sobre-profundo-suave: #E8CDBB; /* 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 blanco y contra una superficie saturada a la vez. Acá son dos colores distintos y el par da 5,94:1. */ --m-apagado-profundo: #C08A6E; /* ── El acento ──────────────────────────────────────────────────────────── EL MAGENTA. 6,37:1 con blanco encima sobre papel, que es lo que un botón primario necesita, y 6,37:1 también sobre papel, que es lo que un filete de foco necesita. ⚠️ Es la diferencia con VittaSnacks: allá el color vivo del brandbook —el naranja— NO podía ser el acento porque sobre blanco da 2,76:1, y el acento terminó siendo el morado. Acá el magenta sí puede, y por eso la marca se ve en los botones y no sólo en el sidebar. La rama oscura es el mismo magenta aclarado: en tema oscuro el acento tiene que separarse de una superficie casi negra (3,70:1) sin dejar de sostener el blanco de su propio botón (4,98:1). El magenta sin aclarar da 2,89:1 contra la superficie oscura y ni siquiera llega al 3:1 de un filete. */ --m-acento: light-dark(#8E5544, #9C6250); /* Disco de iniciales y estados certificados: el magenta bajado. */ --m-acento-fuerte: light-dark(#7D4A3A, #9C6250); /* Hover de enlaces: el magenta subido. */ --m-acento-hover: light-dark(#9C6250, #D9A88C); /* ── Y ACÁ VA EL ROSA ───────────────────────────────────────────────────── 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 rosa de realce rinde como señal: 7,33:1 sobre el vino, contra 1,67:1 sobre papel. Y la tinta que va encima del rosa es el vino, no blanco: 7,33:1 contra 1,78: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: #E8B4C8; --m-sobre-acento-profundo: #14100F; /* La chispa: el champán. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 8,62:1. El porqué del sexto color está en la cabecera de este archivo. */ --m-chispa: #F2CBA6; /* ── Tinta ──────────────────────────────────────────────────────────────── El vino magenta del tema es la tinta: 12,23:1 sobre el rosa de papel y 13,05:1 sobre blanco. Un negro habría sido más fácil y menos de esta marca. */ --m-tinta: light-dark(#14100F, #F0E4DC); --m-tinta-2: light-dark(#66495A, #DCC7D2); --m-apagado: light-dark(#82596C, #B79FAC); /* 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: #9C7387; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es EL ROSA DE PAPEL, no un gris. Es lo que hace que la plataforma se lea como de esta escuela antes de que aparezca un solo magenta — el mismo movimiento que la crema de VittaSnacks. */ --m-fondo: light-dark(#FFF5F9, #170A12); --m-superficie: light-dark(#FFFFFF, #1F0F19); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas: 3,74:1 sobre blanco, 3,51:1 sobre el rosa de papel, 4,92:1 sobre la superficie oscura y 5,15: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: #9B7B8D; --m-relleno: light-dark(#F9EDF3, #2C1724); --m-relleno-2: light-dark(#F5E6EE, #331B2A); --m-relleno-3: light-dark(#FBEAF2, #281524); /* casilla marcada, realce suave */ --m-realce: light-dark(#F8E4EE, #2E1526); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del vino magenta, 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: 20, 16, 15; /* el vino magenta de Vitta Fashion */ --m-halo: light-dark(rgba(168, 48, 106, .20), rgba(178, 76, 124, .35)); /* El latido del canje va en CHAMPÁN y no en magenta: es el único efecto de la plataforma que celebra algo, y el champán es el color con el que se celebra en este rubro. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(242, 203, 166, .42), rgba(242, 203, 166, .50)); --m-sombra-media: light-dark(rgba(20, 16, 15, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#E3D5CC, #241D1B); /* ── 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 rosa de papel y `--m-papel-superficie` es blanco: un diploma se IMPRIME, y la hoja de la impresora es blanca. El rosa queda para el fondo de la pantalla que lo muestra. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #FFF5F9; --m-papel-tinta: #14100F; --m-papel-tinta-2: #66495A; --m-papel-apagado: #82596C; --m-papel-borde: #E8D5DE; --m-papel-profundo: #14100F; }