/* ============================================================================
   tokens.css — Facto Valid · Design System «Valid facto» (F6)
   Fuente de verdad: BrandGuide_Valid (valid-design-tokens.css).
   Marca: verde #62BD88 → #41924F · navy #325271. Fuentes self-host.
   Regla: el VERDE es solo marca / botón primario, NUNCA estado. Éxito = teal.
   Métricas DENSAS (utilitarian) — ver --fs-* y layout. NO usar 16px/1.6 base.
   ============================================================================ */

:root {
  /* ─── Escala · verde marca (primario, NO estado) ─── */
  --vg-50:#F4F8F5; --vg-100:#E6EFE7; --vg-200:#CBE1CF; --vg-300:#A8D2AF;
  --vg-400:#62BD88; --vg-500:#52A86C; --vg-600:#41924F; --vg-700:#3B8247;
  --vg-800:#31663A; --vg-900:#274C2D; --vg-950:#1C3320;

  /* ─── Escala · navy (secundario, títulos, chrome) ─── */
  --vn-50:#F4F6F8; --vn-100:#E6EBEF; --vn-200:#CBD6E2; --vn-300:#A8BDD2;
  --vn-400:#7FA1C2; --vn-500:#5B89B6; --vn-600:#46739F; --vn-700:#325271;
  --vn-800:#304C66; --vn-900:#273A4C; --vn-950:#1C2833;

  /* ─── Escala · neutral (texto, bordes, fondos de tabla) ─── */
  --ne-50:#F5F6F7; --ne-100:#E9EBEC; --ne-200:#D2D7DA; --ne-300:#B5BDC4;
  --ne-400:#95A2AD; --ne-500:#788A99; --ne-600:#637483; --ne-700:#52606B;
  --ne-800:#424C55; --ne-900:#333A40; --ne-950:#23282C;

  /* ─── Paleta de estado · fría (sin semáforo). -soft fondo, base punto, -text AA ─── */
  --st-ok-soft:#F2FAF9;  --st-ok:#0E9488;   --st-ok-text:#0F7B71;   /* validado · teal */
  --st-ok-bgd:#0E433E;   --st-ok-textd:#5FE8DB;
  --st-proc-soft:#F3F4FA; --st-proc:#4660E0; --st-proc-text:#162673; /* en proceso · índigo */
  --st-proc-bgd:#121A3F;  --st-proc-textd:#9AA7E5;
  --st-att-soft:#F5F3F9;  --st-att:#7C5CCE;  --st-att-text:#352268;  /* requiere atención · violeta */
  --st-att-bgd:#21183A;   --st-att-textd:#B3A3DB;
  --st-rej-soft:#F9F3F6;  --st-rej:#C84B7C;  --st-rej-text:#68223D;  /* rechazado · rosa */
  --st-rej-bgd:#3A1825;   --st-rej-textd:#DBA3B9;

  /* ─── Roles semánticos (capa que consumen los componentes) ─── */
  --color-primary:#41924F;  --color-primary-hover:var(--vg-700); --color-primary-soft:var(--vg-50); --color-on-primary:#FFFFFF;
  --color-secondary:var(--vn-700); --color-secondary-hover:var(--vn-800); --color-secondary-soft:var(--vn-50); --color-on-secondary:#FFFFFF;
  --color-success:var(--st-ok);  --color-success-soft:var(--st-ok-soft);  --color-success-text:var(--st-ok-text);
  --color-danger:var(--st-rej);  --color-danger-soft:var(--st-rej-soft);  --color-danger-text:var(--st-rej-text);
  --color-warning:var(--st-att); --color-warning-soft:var(--st-att-soft); --color-warning-text:var(--st-att-text);
  --color-info:var(--st-proc);   --color-info-soft:var(--st-proc-soft);   --color-info-text:var(--st-proc-text);

  /* ─── Superficies y texto (modo claro) ─── */
  --bg-page:var(--ne-50); --bg-surface:#FFFFFF; --bg-muted:var(--ne-100);
  --text-primary:var(--vn-900); --text-body:var(--ne-800); --text-muted:var(--ne-600);
  --border-subtle:var(--ne-200); --border-strong:var(--ne-300);
  /* Veta de tabla (zebra) — tinte navy sutil pero perceptible sobre la superficie */
  --row-stripe:color-mix(in srgb, var(--vn-700) 4.5%, var(--bg-surface));

  /* ─── Degradado de marca (isomono / header / acentos · NO texto/tablas) ─── */
  --brand-gradient:linear-gradient(0deg,#41924F,#62BD88);
  --brand-gradient-90:linear-gradient(90deg,#41924F,#62BD88);
  --brand-gradient-135:linear-gradient(135deg,#41924F,#62BD88);

  /* ─── Tipografía · self-host (woff2 variable, @font-face abajo) ─── */
  --font-title:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* ─── Radios / sombras / espacio (marca) ─── */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --shadow-sm:0 1px 2px rgba(28,40,51,.06);
  --shadow-md:0 4px 12px rgba(28,40,51,.10);
  --shadow-lg:0 12px 40px rgba(28,40,51,.20);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  /* ─── Shell denso (no viene en el brand file; lo necesita el micro-frontend) ─── */
  --topbar-h:48px; --rail-w:56px; --subnav-w:208px;

  /* ─── Escala tipográfica DENSA (utilitarian · P6) ─── */
  --fs-xs:10px; --fs-sm:11.5px; --fs-md:12.5px; --fs-lg:14px; --fs-xl:18px; --fs-2xl:22px;
}

/* ─── Modo oscuro (opcional; QA best-effort en F6) ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:#14181C; --bg-surface:var(--vn-950); --bg-muted:var(--ne-900);
    --text-primary:var(--vn-100); --text-body:var(--ne-200); --text-muted:var(--ne-400);
    --border-subtle:var(--ne-800); --border-strong:var(--ne-700);
    --color-primary:var(--vg-500); --color-primary-hover:var(--vg-400); --color-primary-soft:var(--vg-950);
    --color-secondary:var(--vn-500); --color-secondary-soft:var(--vn-950);
    --color-success-soft:var(--st-ok-bgd);  --color-success-text:var(--st-ok-textd);
    --color-danger-soft:var(--st-rej-bgd);  --color-danger-text:var(--st-rej-textd);
    --color-warning-soft:var(--st-att-bgd); --color-warning-text:var(--st-att-textd);
    --color-info-soft:var(--st-proc-bgd);   --color-info-text:var(--st-proc-textd);
  }
}

/* ============================================================================
   @font-face · self-host (woff2 variable, subset latín). Prohibido Google CDN.
   ============================================================================ */
@font-face {
  font-family:"Manrope"; src:url("/static/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight:200 800; font-display:swap; font-style:normal;
}
@font-face {
  font-family:"Open Sans"; src:url("/static/fonts/OpenSans-Variable.woff2") format("woff2");
  font-weight:300 800; font-display:swap; font-style:normal;
}

/* ─── Utilitarias de uso obligatorio (regla fiscal de tipografía) ─── */
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }
/* Etiqueta de campo/sección: sentence-case, hereda la fuente UI (así `.eyebrow.mono` sí queda mono). */
.eyebrow { font-size: 11px; color: var(--text-muted); letter-spacing: .01em; font-weight: 600; }