/* Generado por scripts/build.js desde kit/contrato/contrato.css — no editar acá. */
/* ============================================================================
   contrato.css — CONTRATO DE TOKENS del VA App Kit.

   Es la capa de FALLBACK + la definición canónica de los tokens que consumen los
   componentes del kit (kit.css). Usa el MISMO vocabulario que la marca del cliente
   (clientes/<c>/marca/tokens.css): --marca, --fondo, --tinta, --borde, --radio,
   --ok-bg, etc. No inventa un dialecto nuevo; extiende el contrato de marca con lo
   que el kit necesita y a las marcas les faltaba: el par superficie/contenido de la
   marca (--marca-contenido), el foco accesible (--foco) y las series de gráfico
   (--serie-1..5).

   Orden de carga en una app:
     1) contrato.css     — nombres + NEUTRO de referencia (por si falta un token)
     2) marca/tokens.css — VALORES de la marca del cliente (pisa el neutro)
     3) kit.css          — componentes que consumen los tokens
   Así, aunque la marca de un cliente no traiga --foco o --serie-*, el kit igual
   renderiza con el neutro. La identidad la fija SIEMPRE la marca del cliente.
   ========================================================================== */

:root {
  /* --- Identidad: la fija la marca del cliente --- */
  --marca:                 #3f4b5b;   /* color dominante */
  --marca-contenido:       #ffffff;   /* texto/íconos SOBRE --marca (contraste correcto) */
  --marca-fuerte:          #2c3644;   /* hover / énfasis */
  --marca-suave:           #eef1f4;   /* fondo tenue de estado activo/hover */
  --marca-suave-contenido: #2c3644;   /* texto sobre --marca-suave */

  /* --- Superficies y texto --- */
  --fondo:         #f6f7f8;   /* fondo de página */
  --superficie:    #ffffff;   /* tarjetas y paneles */
  --superficie-alt:#f1f3f5;   /* superficie alterna / hover de fila */
  --elevado:       #ffffff;   /* modales, menús, paneles laterales */
  --tinta:         #1a1f26;   /* texto principal */
  --tinta-suave:   #4a5460;   /* texto secundario */
  --tinta-tenue:   #8a929c;   /* texto terciario / mute */
  --borde:         #e2e6ea;   /* bordes */
  --borde-suave:   #eef1f3;   /* bordes sutiles internos */
  --foco:          #64748b;   /* anillo de foco — ACCESIBILIDAD (>=3:1 sobre blanco, WCAG 1.4.11) */

  /* --- Tipografía --- */
  --fuente:        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: var(--fuente);

  /* --- Estado (señal, no identidad) --- */
  --ok:        #2f7d5b;  --ok-bg:        #e6f1ea;
  --atencion:  #b0791e;  --atencion-bg:  #f8efdc;
  --error:     #b23b2e;  --error-bg:     #f6e5e1;
  --info:      #3d6f8a;  --info-bg:      #e9f0f4;

  /* --- Series de gráfico (para el charting: charts.js propio) --- */
  --serie-1: #3f4b5b;
  --serie-2: #6b8fa8;
  --serie-3: #2f7d5b;
  --serie-4: #b0791e;
  --serie-5: #8a929c;

  /* --- Forma --- */
  --radio-sm: 4px;
  --radio:    8px;
  --radio-lg: 14px;
  --sombra-sm: 0 1px 2px rgba(20, 24, 30, .06);
  --sombra:    0 4px 16px rgba(20, 24, 30, .09);
  --sombra-lg: 0 14px 38px rgba(20, 24, 30, .16);

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