/* ═══════════════════════════════════════════════════════════════════════════
   PRIMITIVAS DE MARCA — VITTA Retail
   ═══════════════════════════════════════════════════════════════════════════

   Este archivo es del CLIENTE. Cambia por instalación y no viaja con el
   producto: `vittaretail.com` carga este, `vittaretail.com/cars` carga
   `marca-cars.css`, y el día que haya una tercera escuela habrá un tercero.

   ┌─ La frontera, y por qué existe ───────────────────────────────────────────┐

   Hasta este cambio los hex de VITTA vivían en el mismo `:root` que la
   semántica del producto. Funcionaba —la capa de tokens ya estaba, y su guarda
   también— pero significaba que montar la escuela de otro cliente era EDITAR EL
   ARCHIVO DEL PRODUCTO. Dos consecuencias, y ninguna teórica:

     · No se puede desplegar una corrección del producto sin arrastrar la paleta
       de quien la haya tocado último.
     · El cliente que quiere cambiar su color puede, sin quererlo, cambiar el
       contraste del sistema. Esa decisión no puede estar de su lado.

   Ahora hay dos archivos y una frontera:

     PRIMITIVAS (este archivo, `--m-*`)   ·   la marca. La define el cliente.
     SEMÁNTICA  (`vitta.css`, `--v-*`)    ·   qué es fondo, tinta, borde, estado.
                                              La define el producto y el cliente
                                              NO la puede tocar.

   Nadie escribe `var(--m-…)` fuera del `:root` de `vitta.css`. Un componente
   que lea una primitiva directo se saltó la frontera, y `tools/tokens-css.php`
   lo rechaza.

   └───────────────────────────────────────────────────────────────────────────┘

   ┌─ ⚠️ RETAIL NO CAMBIA NI UN PÍXEL ────────────────────────────────────────┐

   Cada valor de acá abajo es EL MISMO que tenía `vitta.css` antes de la
   separación, copiado carácter por carácter, incluidas las ramas de
   `light-dark()`. Si al separar la frontera cambiara un solo color de VITTA, la
   frontera estaría mal puesta. Se verifica midiendo: `tools/contraste.php`
   calcula los mismos 54 pares que antes y tiene que dar los mismos números.

   └───────────────────────────────────────────────────────────────────────────┘

   ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA
   instalación declare exactamente las mismas primitivas: si acá falta una que
   el producto usa, la pantalla hereda un color impredecible y no hay consola
   que avise. Si sobra una que nadie usa, es peso muerto que alguien va a
   mantener creyendo que sirve.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Tipografía ───────────────────────────────────────────────────────────
     Las tres familias autoalojadas del proyecto. Van acá porque la tipografía
     es marca, igual que el color: la escuela del concesionario tiene la suya. */
  --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 logotipo de VITTA es un disco: redondo del todo y sin margen interno,
     exactamente lo que la hoja tenía escrito en las tres reglas.

     Los TRES tamaños son los que estaban: 56 px en la barra lateral, 92 px en
     el ingreso y 148 px en el splash. Los dos últimos vivían clavados dentro
     de `.v-login-mark` y `.v-splash-disc`, así que una marca no podía ajustar
     su placa al arte que entrega — que es justamente lo que le hacía falta a
     la escuela de autos. Acá no cambia nada: son los mismos números.

     ⚠️ La placa de VITTA es MÁS GRANDE que su imagen a propósito, y puede
     serlo: el logotipo de retail ocupa el 82,0 % de su lienzo —es una silueta
     con su aire ya incluido— así que la placa no le dibuja un segundo borde.
     Un arte que llegue al filo de su archivo necesita lo contrario. Ver
     `marca-cars.css`. */
  --m-marca-tamano:          56px;
  --m-marca-tamano-ingreso:  92px;
  --m-marca-tamano-splash:  148px;
  --m-marca-radio:       50%;
  --m-marca-aislamiento: 0;
  /* Blanco: es EL MISMO valor que `--v-on-deep`, que es lo que las tres
     reglas tenían escrito antes de que la placa fuera configurable.

     ⚠️ MEDIDO, y el número NO favorece a esta placa: el perímetro del logotipo
     de VITTA da 4,21:1 de media sobre blanco y 4,20:1 sobre su propio verde
     profundo, con 65,7 % del contorno por debajo de 3:1 sobre blanco contra
     30,4 % sobre el verde. O sea: para SU arte, esta placa no aporta y estorba
     un poco. No se toca igual —mover la marca de una instalación con gente
     adentro no se decide en una corrección de defectos— y queda anotado en
     `tools/marca-legible.php`, que es el que lo mide en cada `make check`. */
  --m-marca-placa:       #FFFFFF;

  /* ── La superficie profunda ───────────────────────────────────────────────
     El verde profundo del sidebar y de las tarjetas oscuras. Los dos SÍ varían
     con el tema —un verde pensado para contrastar contra una página clara se ve
     gris apagado cuando la página ya es oscura—, y por eso llevan
     `light-dark()`. */
  --m-profundo:        light-dark(#0C3B36, #081F1C);
  --m-profundo-2:      light-dark(#14524A, #103A34);
  /* Separadores y pistas de barra sobre el fondo profundo. */
  --m-linea-profunda:  #1E635A;
  /* Lo que se escribe encima del fondo profundo. Blanco fijo: la superficie
     tampoco se remapea. */
  --m-sobre-profundo:       #FFFFFF;
  --m-sobre-profundo-suave: #BFD1CC;
  /* 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. Hoy vale
     exactamente lo mismo que `--m-apagado`, que es lo que la hoja hacía antes
     de que este rol tuviera nombre propio. Tenerlo separado es lo que le
     permite a otra marca elegir un gris que se lea sobre SU superficie. */
  --m-apagado-profundo: light-dark(#7E938E, #8AA39D);

  /* ── El acento ────────────────────────────────────────────────────────────
     No varían con el tema a propósito: el botón primario es el mismo en claro y
     en oscuro. */
  --m-acento:        #14A07A;  /* acciones, enlaces, foco */
  --m-acento-fuerte: #0B6B58;  /* disco de iniciales, estados certificados */
  --m-acento-hover:  #0E8161;  /* hover de enlaces */
  /* 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. En VITTA es el mismo verde que el acento general —y por eso la
     hoja lo tenía escrito con un solo token—, pero son dos roles distintos: uno
     se apoya en papel claro y el otro en un fondo saturado. Una marca con un
     solo color de acento no puede usarlo en los dos lados. */
  --m-acento-profundo:        #14A07A;
  --m-sobre-acento-profundo:  #FFFFFF;
  /* La chispa: el verde claro del logotipo. «RETAIL», la barra del splash y el
     arco que se dibuja alrededor del disco. Siempre sobre fondo profundo. */
  --m-chispa: #8ACE2A;

  /* ── Tinta ────────────────────────────────────────────────────────────────*/
  --m-tinta:     light-dark(#10302B, #E8F1EE);
  --m-tinta-2:   light-dark(#5C6B67, #A9BEB8);
  --m-apagado:   light-dark(#7E938E, #8AA39D);
  --m-apagado-2: light-dark(#A6BAB4, #6E8781);

  /* ── Superficies claras ───────────────────────────────────────────────────*/
  --m-fondo:      light-dark(#F4F7F5, #0A1917);
  --m-superficie: light-dark(#FFFFFF, #122622);
  --m-borde:      light-dark(#DDE7E3, #24413A);
  --m-relleno:    light-dark(#E7EEEB, #1B322D);
  --m-relleno-2:  light-dark(#E9F0ED, #1E3831);
  --m-relleno-3:  light-dark(#F2FAF7, #16332B);  /* casilla marcada, realce suave */
  --m-realce:     light-dark(#E4F4EE, #133D32);  /* fila propia, lección activa, «Nuevo» */

  /* ── Efectos teñidos por la marca ─────────────────────────────────────────
     El halo del foco y la sombra media llevan el color de la marca con
     opacidad. El día que la marca cambie de verde tienen que cambiar acá y no
     en un `@keyframes` perdido a mitad de la hoja. */

  /* Los canales del color profundo, para los velos.
   *
   * ⚠️ Va como CANALES sueltos y no como color: 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. Con los canales, el producto escribe
   * `rgba(var(--m-profundo-canales), .55)` y la marca sigue siendo la que
   * decide QUÉ color es.
   *
   * Sin esto había siete velos con el verde de VITTA escrito a mano: en Cars
   * salían verdes sobre una plataforma azul. */
  --m-profundo-canales: 12, 59, 54;  /* el verde profundo de VITTA */

  --m-halo:         rgba(20, 160, 122, .16);
  --m-halo-latido:  rgba(20, 160, 122, .38);
  --m-sombra-media: light-dark(rgba(12, 59, 54, .10), rgba(0, 0, 0, .45));
  --m-barra:        light-dark(#C9D8D3, #2C4B43);

  /* ── Papel ────────────────────────────────────────────────────────────────
     Tres superficies de la plataforma son papel y no pantalla: el diploma, el
     marco de la cápsula SCORM y el botón claro sobre fondo oscuro fijo. No
     siguen el tema. Estas primitivas son la rama CLARA, clavada, y existen para
     que el bloque PAPEL de `vitta.css` no tenga que escribir ningún hex.

     Se declaran aparte en vez de derivarse de las de arriba porque un cliente
     puede querer que su diploma no sea del mismo blanco que su interfaz. */
  --m-papel-superficie: #FFFFFF;
  --m-papel-fondo:      #F4F7F5;
  --m-papel-tinta:      #10302B;
  --m-papel-tinta-2:    #5C6B67;
  --m-papel-apagado:    #7E938E;
  --m-papel-borde:      #DDE7E3;
  --m-papel-profundo:   #0C3B36;
}