/* Tokens de marca VETTRA — derivados de marca/tokens/vettra-design.tokens.json
 *
 * FUENTE ÚNICA DE COLOR. No inventar colores sueltos acá ni en estilos.css.
 * De dónde sale cada valor (oficial vs. derivado) y por qué:
 * marca/VIGENCIA_TOKENS.md. La paleta operativa oficial es la de la Guía de
 * logo, color y aplicaciones v1.0 (2026-08-23), §3.
 *
 * Verificado por motor_clinico/test_marca_contraste.py, que falla si un par
 * de color cae bajo WCAG AA o si este archivo se despega del JSON.
 *
 * Tipografía (D2, 2026-08-24): el sistema aprobado en el documento maestro
 * v2.0 (VISD-005) — Space Grotesk (display), Inter (interfaz y lectura),
 * IBM Plex Mono (datos y estados) — quedó licenciado (SIL OFL 1.1, textos
 * verbatim en marca/licencias/) y AUTOALOJADO en /static/fonts/: ningún CDN,
 * ninguna IP de veterinario expuesta a un tercero al cargar la app.
 * Procedencia y hash de cada binario: marca/licencias/PROCEDENCIA_FUENTES.md.
 * Las cadenas de respaldo se conservan: son lo que se ve si una fuente aún
 * no cargó (font-display: swap) o si el navegador no soporta woff2 variable.
 */

/* Las tres familias, autoalojadas. Los archivos están en el SHELL del service
 * worker: se cachean con la app y no se piden de nuevo en cada carga. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGroteskVariable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Marca (paleta operativa oficial) ---- */
  --vt-petroleo-profundo: #013F4C;  /* texto, títulos, acción primaria */
  --vt-petroleo-oscuro: #02323F;    /* superficies de alta jerarquía, theme_color */
  --vt-verde-clinico: #048067;      /* enlaces e información (AA como texto) */
  --vt-jade-medio: #32AB84;         /* acento y gráficos; NUNCA texto */
  --vt-menta-clara: #9FDEC4;        /* fondo o acento; foco sobre oscuro */
  --vt-grafito: #3F4650;            /* texto secundario */

  /* ---- Superficies ---- */
  --vt-superficie-lienzo: #F6F8F8;   /* hueso: fondo autorizado para el logo */
  --vt-superficie-sutil: #EDF2F1;    /* derivado */
  --vt-superficie-elevada: #FFFFFF;  /* blanco: fondo autorizado para el logo */
  --vt-superficie-inversa: #02323F;  /* el logo a color NO va encima */

  /* ---- Texto ---- */
  --vt-texto-principal: #013F4C;
  --vt-texto-secundario: #3F4650;
  --vt-texto-tenue: #7F8A9A;     /* derivado de grafito: solo texto grande (3.28:1) */
  --vt-texto-inverso: #FFFFFF;

  /* ---- Estado ---- */
  --vt-estado-info: #048067;         /* verde clínico */
  --vt-estado-advertencia: #925211;  /* pendientes; fuera de la marca a propósito */
  --vt-estado-error: #A43B32;
  --vt-estado-exito: #206E55;        /* derivado de jade: jade no sirve como texto */

  /* ---- Bordes ---- */
  --vt-borde: #D4D8DD;
  --vt-borde-fuerte: #7F8A9A;    /* 3.28:1 sobre hueso, cumple 1.4.11 */
  --vt-borde-foco: #9FDEC4;      /* menta sobre petróleo: 8.96:1 */

  /* ---- Derivados accesibles ----
   *
   * La guía v3.0 define seis colores y dos fondos; no define bordes de
   * control ni texto atenuado. Estos dos salen del grafito oficial con el
   * mismo matiz y saturación, bajando solo la luminosidad hasta cumplir el
   * umbral donde aplica (medido con test_marca_contraste.py):
   *
   *   --vt-borde-control  -> 3.93:1 sobre hueso (WCAG 1.4.11 exige 3.0; el
   *                          vigente en producción rendía 3.03:1: no regresa)
   *   --vt-texto-tenue-aa -> 4.71:1 sobre hueso (WCAG 1.4.3 exige 4.5)
   *
   * Ver marca/VIGENCIA_TOKENS.md §4.
   */
  --vt-borde-control: #707D8F;
  --vt-texto-tenue-aa: #657080;

  /* ---- Tipografía (oficial autoalojada + respaldo del sistema) ---- */
  --vt-fuente-display: "Space Grotesk", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --vt-fuente-cuerpo: "Inter", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
  --vt-fuente-mono: "IBM Plex Mono", Consolas, ui-monospace, "Cascadia Mono", monospace;

  --vt-texto-xs: 12px;
  --vt-texto-sm: 13px;
  --vt-texto-base: 16px;
  --vt-texto-lead: 19px;
  --vt-texto-h3: 22px;

  --vt-interlinea-ajustada: 1.08;
  --vt-interlinea-cuerpo: 1.55;

  --vt-peso-regular: 400;
  --vt-peso-medio: 500;
  --vt-peso-semi: 650;
  --vt-peso-fuerte: 750;

  /* ---- Espaciado ---- */
  --vt-e1: 4px;
  --vt-e2: 8px;
  --vt-e3: 12px;
  --vt-e4: 16px;
  --vt-e5: 20px;
  --vt-e6: 24px;
  --vt-e8: 32px;
  --vt-e10: 40px;
  --vt-e12: 48px;
  --vt-e16: 64px;
  --vt-e20: 80px;

  /* ---- Forma ---- */
  --vt-radio-sm: 8px;
  --vt-radio-md: 14px;
  --vt-radio-lg: 22px;
  --vt-radio-pill: 999px;

  /* ---- Layout ---- */
  --vt-ancho-contenido: 1220px;
  --vt-rail-contextual: 340px;
  --vt-objetivo-tactil: 44px;

  /* ---- Movimiento ---- */
  --vt-mov-rapido: 120ms;
  --vt-mov-normal: 180ms;
  --vt-mov-lento: 320ms;
  --vt-mov-easing: cubic-bezier(.2, .8, .2, 1);
}

/* La marca exige que el movimiento no esencial se desactive. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vt-mov-rapido: 0ms;
    --vt-mov-normal: 0ms;
    --vt-mov-lento: 0ms;
  }
}