/* OnFarmaNet · FarmaGuard — Design System: TOKENS (única fuente de verdad).
 * Dirección: "Clinical Precision" — instrumento clínico moderno (grotesca Inter, neutros fríos
 * refinados, verde teal como acento de precisión, elevación en capas, números tabulares).
 * Contrato: docs/DESIGN-SYSTEM.md (vivo) · génesis en docs/superpowers/specs/2026-06-26-*.md §5.
 * Valores espejados en deploy/landing (inline) y en extension (ds.css / overlay.ts); la paridad
 * la verifica el gate `scripts/validar_ds.py` (divergencias deliberadas: en su allowlist).
 *
 * VOCABULARIO DE SUFIJOS (contrato de naming — no inventar sinónimos):
 *   -strong / -deep  = más oscuro (énfasis / máxima profundidad de la familia)
 *   -soft / -tint    = fondo lavado de la familia (tint = el más tenue)
 *   -line            = borde de la familia (acompaña a -soft)
 *   -text            = variante AA (≥4.5:1) para TEXTO sobre blanco
 *   -raised / -sunken= elevación de superficie (arriba / hundida)
 *   Regla: familia primero, modificador después (--danger-soft, jamás --soft-danger). */

/* ── Tipografía self-hosted (Inter variable, subset latin, woff2). Sin request externo →
 *    privacidad + performance + CSP-safe. La url() relativa la reescribe el manifest de WhiteNoise. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
}

:root {
  /* ── Marca (identidad teal, acento de precisión) ── */
  --brand: #0b7a6b;
  --brand-strong: #0a6457;
  --brand-deep: #073f37;
  --brand-soft: #e3f1ee;
  --brand-tint: #f0f7f5;

  /* ── Neutros fríos (slate clínico) ── */
  --ink: #101a22;
  --ink-muted: #56646f;
  --ink-subtle: #8794a0;
  --surface: #f5f7f9;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1f4;
  --border: #e4e9ee;
  --border-strong: #d2dae1;
  --overlay-scrim: rgba(16, 26, 34, 0.44);

  /* ── Foco (alias de marca: cambiar el teal = una línea) ── */
  --ring: var(--brand);
  --ring-glow: 0 0 0 3px rgba(11, 122, 107, 0.22);

  /* ── Severidad / estado clínico (semántica separada de la marca) ──
   * *-fill/-border: vívido. *-text: variante AA sobre blanco (≥4.5:1). Espejados en la extensión.
   * --danger-deep: SOLO para el relleno CRITICAL de charts (CRITICAL y HIGH eran indistinguibles
   * en barras — auditoría DS 2026-07-30); los badges siguen siendo la fuente semántica del color. */
  --danger: #c0392b;   --danger-text: #a32319;   --danger-soft: #fdecea;   --danger-line: #f3c4bd;
  --danger-deep: #8e2317;
  --warning: #e67e22;  --warning-text: #8a5304;  --warning-soft: #fdf1e7;  --warning-line: #f6d4b3;
  --caution: #d4a012;  --caution-text: #7a5b00;  --caution-soft: #fbf4dd;  --caution-line: #ecdca0;
  --success: #27ae60;  --success-text: #0b7a4e;  --success-soft: #e7f6ee;  --success-line: #b9e3cb;
  --info: var(--brand); --info-text: #095e52;    --info-soft: var(--brand-soft); --info-line: #bfe0d9;

  /* ── Tipografía ──
   * Escala en rem (respeta la preferencia de tamaño de fuente del navegador — un QF con «fuente
   * grande» configurada antes no recibía nada; auditoría DS 2026-07-30). Equivalencias a 16px de
   * base del navegador en comentario. Escala a mano (no modular): la densidad de datos manda.
   * px se conserva A PROPÓSITO en radios/bordes/sombras (no deben escalar con el texto). */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.8125rem;    /* 13px */
  --fs-base: 0.90625rem; /* 14.5px */
  --fs-md: 1rem;         /* 16px */
  --fs-lg: 1.15625rem;   /* 18.5px */
  --fs-xl: 1.4375rem;    /* 23px */
  --fs-2xl: 1.8125rem;   /* 29px */
  --fs-3xl: 2.3125rem;   /* 37px */
  --fs-display: clamp(2rem, 5vw, 3.125rem);
  --lh-body: 1.55;
  --lh-tight: 1.12;
  --measure: 66ch;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ── Espaciado (escala 4px) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ── Radios (anidados: radio interno = radio externo − gap) ── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* ── Elevación (en capas, tinte frío, sutil) ──
   * Escalera semántica: reposo = xs/sm; md se GANA con hover/interacción; lg = flotantes.
   * Nunca una tarjeta estática con md+ (auditoría DS 2026-07-30). */
  --shadow-xs: 0 1px 1px rgba(16, 26, 34, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 26, 34, 0.06), 0 1px 1px rgba(16, 26, 34, 0.04);
  --shadow-md: 0 6px 16px -6px rgba(16, 26, 34, 0.12), 0 2px 6px -3px rgba(16, 26, 34, 0.07);
  --shadow-lg: 0 18px 40px -12px rgba(16, 26, 34, 0.18), 0 4px 10px -4px rgba(16, 26, 34, 0.08);

  /* ── Motion (duración y curva en familias separadas; los compuestos son la API de uso) ── */
  --duration-fast: 130ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --easing-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease: var(--duration-fast) var(--easing-standard);      /* micro-cambios (color, borde) */
  --ease-out: var(--duration-base) var(--easing-entrance);  /* entradas / desplazamientos */

  /* ── Layout ── */
  --container: 1040px;
  --container-narrow: 440px;
  --container-prose: 720px;
  --topbar-h: 60px;
}