/* Generado por scripts/build.js desde marca/tokens.css — no editar acá. */
/* ============================================================================
   tokens.css — Identidad de Grupo VEX en variables CSS.
   FUENTE DE VERDAD de la marca del cliente, transversal a todos sus proyectos.

   Tifox es una marca DENTRO de Grupo VEX, junto con Elite Sport y Compressport.
   La plataforma B2B las reúne a las tres, así que la identidad que viste el
   producto es la del grupo, no la de una de sus marcas. Todo lo de acá sale del
   manual oficial (Manual de marca_VEX 2025, La Cabin, mayo 2025). Ver marca.md.

   El build de cada app copia este archivo a su public/ (con cabecera "generado,
   no editar"), así todas las apps del cliente consumen la MISMA identidad. Las
   apps referencian SOLO estos tokens (var(--...)); nunca un color literal suelto.

   OJO al cablear una app: las @font-face de abajo apuntan a ./assets/fonts/,
   relativo a ESTE archivo. El `sync` del va.app.json tiene que copiar las cuatro
   .woff2 a una carpeta assets/fonts/ colgada de donde quede el tokens.css (si el
   CSS va a public/styles/, las caras van a public/styles/assets/fonts/). Si sólo
   se copia el tokens.css, la app renderiza con la fuente de sistema y nadie avisa.
   ========================================================================== */

/* Prompt — la familia del logotipo. En el manual es la tipográfica principal,
   elegida por "su fuerza visual y geometría contemporánea". Acá viste títulos y
   rótulos. Subset latin de Google Fonts (SIL OFL 1.1). */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/prompt-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/prompt-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/prompt-700-latin.woff2') format('woff2');
}

/* Open Sans — la familia de textos corridos del manual, por "legibilidad,
   neutralidad y modernidad". Es la cara de la interfaz: cuerpo, tablas y cifras.
   Variable, peso 300 a 800. Subset latin de Google Fonts (SIL OFL 1.1). */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('./assets/fonts/open-sans-latin.woff2') format('woff2');
}

:root {
  /* --- Nombre de marca (string, lo usan headers y mails) --- REQUERIDO --- */
  --marca-nombre: "Grupo VEX";

  /* --- Color de marca ---
     La paleta del manual son cinco valores exactos: azul profundo #20113D, azul
     medio #283287, azul claro #6C88BE, celeste #AFDDF5 y gris claro #EEEFF0.
     Ninguno se inventa ni se corre de tono; lo único derivado son los tintes de
     estado y los grises de texto, que se calculan mezclando el azul profundo con
     el gris claro para que la escala entera viva en la misma familia. */
  --marca:        #283287;   /* REQUERIDO: azul medio, color dominante y de acción */
  --marca-contenido: #ffffff; /* texto/íconos SOBRE --marca (11,3:1). Kit. */
  --marca-fuerte: #20113D;   /* azul profundo: hover, foco y énfasis */
  --marca-suave:  #e8eaf6;   /* tinte del azul medio: fondos activos/hover */
  --marca-suave-contenido: #20113D; /* texto sobre --marca-suave. Kit. */
  --acento:       #6C88BE;   /* azul claro: segundo plano de la paleta, nunca acción */
  --acento-celeste: #AFDDF5; /* celeste: el punto de luz del isotipo, para realces */

  /* --- Superficies y texto --- */
  --fondo:         #EEEFF0;  /* REQUERIDO: gris claro del manual (es el fondo de sus páginas) */
  --superficie:    #ffffff;  /* REQUERIDO: tarjetas y paneles */
  --superficie-alt:#f5f6f9;  /* superficie alterna / hover de fila */
  --elevado:       #ffffff;  /* modales, menús, paneles laterales */
  --tinta:         #20113D;  /* REQUERIDO: azul profundo, texto principal (15,9:1) */
  --tinta-suave:   #625876;  /* texto secundario (6,2:1) */
  /* El terciario sale de la MISMA receta que el resto de los grises (mezcla del azul profundo con
     el gris claro del manual), y estaba al 45 %: daba 3,28:1 sobre blanco y 2,85:1 sobre el fondo
     de página, o sea por debajo de AA en los 36 lugares donde se usa, incluido el subtítulo que
     lleva toda pantalla del back office. Al 62 % pasa AA en las tres superficies (5,47 sobre
     blanco, 4,75 sobre el fondo, 5,06 sobre la superficie alterna) sin salirse de la familia: los
     cinco valores exactos del manual no se tocan, y este no es uno de ellos. */
  --tinta-tenue:   #6e6581;  /* texto terciario / mute (5,47:1 sobre blanco) */
  --borde:         #dcdee6;  /* REQUERIDO: bordes */
  --borde-suave:   #e9eaf0;  /* bordes sutiles internos */
  --foco:          #283287;  /* anillo de foco: el azul de marca, 11,3:1 sobre blanco */

  /* --- Tipografía --- */
  --fuente:        'Open Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fuente-titulo: 'Prompt', 'Open Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Estado (señal, no identidad) ---
     Cada color pasa AA (4,5:1) sobre SU propio -bg, que es donde se usa: el `.pill` es de 12 px
     con weight 700, o sea texto normal para WCAG, y ese par es el que el checklist nombra. El
     amarillo y el verde estaban en 3,28 y 4,31, así que se les bajó la luminosidad lo mínimo que
     los pone arriba de 4,5 (el tono y la saturación no se tocan). Medido, no estimado. */
  --ok:        #2e7958;  --ok-bg:        #e6f1ea;   /* 4,54:1 sobre su -bg */
  --atencion:  #926419;  --atencion-bg:  #f8efdc;   /* 4,53:1 sobre su -bg */
  --error:     #b23b2e;  --error-bg:     #f6e5e1;
  --info:      #283287;  --info-bg:      #e8f4fc;  /* info = azul de marca sobre tinte celeste */

  /* --- Series de gráfico ---
     Las tres primeras son los tres azules del manual, en orden de peso. La marca
     es monocroma, así que para una cuarta y quinta serie distinguible se toman los
     dos funcionales cálidos: en un gráfico la prioridad es que se diferencien. */
  --serie-1: #283287;
  --serie-2: #6C88BE;
  --serie-3: #20113D;
  --serie-4: #2f7d5b;
  --serie-5: #b0791e;

  /* --- Forma ---
     El isotipo son rombos y chevrones a 45 grados, sin una sola curva. El manual
     habla de "geometría limpia y ordenada": radios cortos, nada de píldoras. */
  --radio-sm: 3px;
  --radio:    6px;
  --radio-lg: 10px;
  --sombra-sm: 0 1px 2px rgba(32, 17, 61, .07);
  --sombra:    0 4px 16px rgba(32, 17, 61, .10);
  --sombra-lg: 0 14px 38px rgba(32, 17, 61, .18);

  /* --- Medidas del shell --- */
  --nav-h:     60px;
  --sidebar-w: 232px;
  --ancho-max: 1200px;
}