/* GENERADO por build.js desde ../../../marca/tokens.css — NO EDITAR ACÁ.
   Fuente de verdad: clientes/<cliente>/marca/. */
/* ============================================================================
   tokens.css — Identidad de Movimiento Industrial en variables CSS.
   FUENTE DE VERDAD de la marca del cliente, transversal a todos sus proyectos.

   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.

   Los valores salen del manual de identidad que entregó el cliente
   (Documentos/Identidad de marca/): los hex se leyeron de los SVG del logo y se
   contrastaron contra las piezas aplicadas (newsletter, posteos, credencial).
   La trazabilidad completa está en marca.md.
   ========================================================================== */

/* Caras de la marca, empaquetadas locales (SIL OFL, subset latín).
   Inter es la tipográfica del sistema; IBM Plex Mono es el acento de rótulo. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/inter-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/inter-semibold.woff2') format('woff2');
}
/* El peso 700 no está en la escala del manual (que llega a SemiBold), pero el VA App Kit
   pide 700 a 900 en sus títulos: sin una cara real, el navegador sintetiza la negrita y el
   texto se deforma. Se empaqueta para que esos pesos resuelvan a un dibujo real. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/inter-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/ibm-plex-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/ibm-plex-mono-medium.woff2') format('woff2');
}

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

  /* --- Color de marca ---
     El manual (pág. 34) declara el Celeste Cielo como color protagónico y el Azul
     Profundo como secundario. En pantalla el celeste no sostiene texto ni acciones
     (1,5:1 sobre blanco), así que se reparte el rol como ya lo hacen las piezas del
     estudio: el celeste es superficie protagónica y el azul carga texto y acción. */
  --marca:            #0d5099;   /* REQUERIDO: Azul Profundo. 8,0:1 sobre blanco */
  --marca-contenido:  #ffffff;   /* texto/íconos SOBRE --marca. Kit. */
  --marca-fuerte:     #0a3f78;   /* azul intenso: hover de botón, énfasis */
  --marca-suave:      #cdedf6;   /* tinte del Celeste Cielo: fila activa, badge, aviso */
  --marca-suave-contenido: #0a3f78; /* texto sobre --marca-suave (6,7:1). Kit. */
  --acento:           #9bdfec;   /* Celeste Cielo, el protagónico del manual */
  --acento-contenido: #1e1e1e;   /* texto sobre el celeste (11,7:1) */
  --acento-medio:     #7fc1db;   /* celeste apagado: bordes y separadores sobre celeste */
  --acento-fuerte:    #4295b6;   /* celeste legible: el único que pasa 3:1 sobre --fondo */
  --destacado:        #fddf59;   /* Amarillo del sol. Uso puntual: la acción principal */
  --destacado-contenido: #1e1e1e;/* texto sobre el amarillo (13,1:1) */

  /* --- Acentos territoriales (paleta secundaria del manual, pág. 35) ---
     Son acentos, no identidad: se priorizan en contenidos por provincia y región,
     y nunca desplazan al azul. En el portal alimentan las series de gráfico. */
  --territorio-verde:     #193f05;  /* Verde Campo */
  --territorio-terracota: #a4452a;  /* Terracota Mineral */
  --territorio-naranja:   #d9792c;  /* Naranja */
  --territorio-naranja-legible: #c96d24; /* el naranja apenas bajado, para pasar 3:1 sobre --fondo */

  /* --- Superficies y texto --- */
  --fondo:          #f1f5f8;  /* REQUERIDO: el claro de las piezas aplicadas */
  --superficie:     #ffffff;  /* REQUERIDO: tarjetas y paneles */
  --superficie-alt: #f5f5f5;  /* superficie alterna: Blanco Tiza del manual */
  --elevado:        #ffffff;  /* modales, menús, paneles laterales. Kit. */
  --tinta:          #1e1e1e;  /* REQUERIDO: Negro carbón (15,9:1 sobre el fondo) */
  --tinta-suave:    #4a5560;  /* texto secundario */
  --tinta-tenue:    #65717f;  /* texto terciario. 4,5:1 sobre --fondo: es el color
                                 del rótulo en mono, que se lee a 11 px */
  --borde:          #d8e0e9;  /* REQUERIDO: bordes */
  --borde-suave:    #e7edf3;  /* bordes sutiles */
  --foco:           #0d5099;  /* anillo de foco por teclado. Kit. (7,3:1 sobre el fondo) */

  /* --- Tipografía --- */
  --fuente:        'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: var(--fuente);
  --fuente-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Funcionales de estado (señal, no identidad) ---
     Se eligieron fuera del eje azul para no confundirse con la marca. */
  --ok:        #1b6e49;  --ok-bg:       #e2f1ea;
  --atencion:  #8d620f;  --atencion-bg: #fbf0d6;
  --error:     #b03028;  --error-bg:    #f9e3e1;
  --info:      #0d5099;  --info-bg:     #e3edf7;

  /* --- Series de gráfico (para tableros; las usa el charts.js propio). Kit. ---
     La 1 es el color de marca; las demás salen de la paleta secundaria territorial
     del manual, que existe justamente para acentuar. Las cinco pasan 3:1 sobre
     --fondo (el mínimo de un elemento gráfico), y el orden alterna tono frío y
     cálido para que dos series contiguas no se confundan. */
  --serie-1: #0d5099;  /* Azul Profundo */
  --serie-2: #4295b6;  /* Celeste Cielo llevado a contraste legible */
  --serie-3: #c96d24;  /* Naranja */
  --serie-4: #193f05;  /* Verde Campo */
  --serie-5: #a4452a;  /* Terracota Mineral */

  /* --- Forma: radios y sombras ---
     El sistema gráfico usa esquinas generosas y píldoras; nada de sombras duras. */
  --radio-sm: 6px;
  --radio:    10px;
  --radio-lg: 18px;
  --radio-pill: 999px;
  --sombra-sm: 0 1px 2px rgba(13, 80, 153, .07);
  --sombra:    0 4px 16px rgba(13, 80, 153, .10);
  --sombra-lg: 0 14px 38px rgba(13, 80, 153, .16);
}