/* FLANCO — tokens de diseño.
   Fuente: flancotech/flanco @ cbab289 (20 sep 2026) — sitio/*.html (base compartida),
   app/globals.css (spec 018 §9) y docs/marca/.
   Regla heredada del panel: un valor que no esté en :root no entra en una regla.

   Economía del color (filosofía «Retaguardia medida»):
   el fondo domina · el azul organiza · el verde es veredicto · el ámbar es lo
   que el sistema no previó · los grises existen para que esos tres signifiquen algo. */

:root{
  /* ── Tinta: texto y superficies oscuras (nunca negro puro) ── */
  --tinta:#0F172A;          /* texto principal · fondo de portada, barra y pie · 17,85:1 sobre papel */
  --tinta-2:#1B2740;        /* superficie oscura elevada */
  --tinta-3:#334155;        /* texto de lectura larga sobre claro · 10,35:1 */

  /* ── Cobalto: estructura, acción, foco ── */
  --cobalto:#1D4ED8;        /* primario · botones · enlaces · foco sobre claro · 6,70:1 */
  --cobalto-osc:#1A43B8;    /* hover del primario · texto sobre cobalto-claro (6,78:1) */
  --cobalto-claro:#DBEAFE;  /* superficie de «pide atención» · selección de texto */

  /* ── Verde: SOLO veredicto (algo se cerró, se confirmó, se cumplió) ── */
  --verde:#059669;          /* gráfico: rombo, franja, chip con texto OSCURO encima. Nunca texto sobre blanco (3,77:1) */
  --verde-txt:#047857;      /* verde para texto pequeño sobre claro · 5,48:1 */
  --verde-claro:#ECFDF5;    /* superficie del aviso «ok» */
  --menta:#34D399;          /* verde SOLO sobre tinta o cobalto (rombo, foco). Sobre blanco 1,92:1: prohibido */

  /* ── Ámbar: lo no previsto. No puede parecerse a lo previsto ── */
  --ambar:#D97706;          /* borde de campo inválido */
  --ambar-tinta:#78350F;    /* texto sobre ámbar-claro · 8,75:1 */
  --ambar-claro:#FFFBEB;
  --ambar-linea:#FCD34D;

  /* ── Papel y grises ── */
  --papel:#FFFFFF;
  --papel-2:#F6F8FB;        /* fondo alterno de sección · fondo del panel */
  --linea:#E4E9F0;          /* divisores y bordes de bloque */
  --linea-control:#9AA7B8;  /* borde de campo. OJO: 2,44:1 — ver «Pendientes» en LEEME.md */
  --gris:#5B6B82;           /* texto secundario · 5,43:1 sobre papel, 5,10:1 sobre papel-2 */

  /* ── Texto sobre tinta ── */
  --sobre-tinta:#C7D2E4;    /* enlaces y texto · 11,70:1 */
  --bajada:#B9C6DA;         /* párrafos sobre tinta · 10,33:1 */
  --sobre-tinta-2:#8FA3C0;  /* cejillas y texto menor · 6,94:1 */
  --sobre-tinta-3:#8394B0;  /* legal, notas mono · 5,80:1 */

  /* ── Tipografía ── */
  --display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --cuerpo:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala del sitio (superficie pública). Salto violento pero controlado:
     lo monumental y lo diminuto, casi nada en medio. */
  --t-cejilla:12px;         /* mono, versales, tracking .14em */
  --t-mini:13px;            /* legal, notas mono */
  --t-menor:14.5px;         /* barra, pie */
  --t-nota:15.5px;
  --t-cuerpo:17px;          /* 16px en móvil */
  --t-entrada:18px;         /* párrafo que abre una sección */
  --t-bajada:19px;          /* párrafo bajo el h1 de portada */
  --t-h3:19px;
  --t-h2:clamp(30px,3.4vw,42px);
  --t-h1:clamp(42px,5.1vw,66px);
  --t-cifra:34px;           /* números de metas */

  --tracking-titular:-.022em;
  --tracking-versal:.14em;
  --interlineado-cuerpo:1.65;
  --interlineado-titular:1.08;

  /* ── Espacio: pasos de 4 (los del panel) + los de la página ── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:40px; --e8:56px;
  --ancho:1160px;           /* contenedor .env */
  --margen:28px;            /* margen lateral del contenedor (20px en móvil) */
  --seccion:104px;          /* padding vertical de sección (72px en móvil) */
  --medida:680px;           /* medida de lectura: 45–75 caracteres */

  /* ── Radios ── */
  --r-min:4px;              /* foco */
  --r1:6px;                 /* cajas pequeñas, diagramas */
  --r2:8px;                 /* controles del panel */
  --r-boton:10px;           /* botones del sitio */
  --r3:12px;                /* avisos, bloques del panel */
  --r-bloque:14px;          /* rejillas y tarjetas del sitio */
  --r-pildora:999px;        /* chips */

  /* ── Movimiento: dos duraciones y una salida fuerte ── */
  --rapido:140ms;           /* respuesta a la mano (panel: 120ms) */
  --medio:220ms;            /* aparición (panel: 200ms) */
  --entrada-portada:.7s;    /* la portada entra una vez, en orden, 70ms entre piezas */
  --salida:cubic-bezier(.23,1,.32,1);
}