/* ═══════════════════════════════════════════════════════════════════════════════════════
   LYVA — TOKENS.  Una sola fuente para color, tipografia, sombra y movimiento.       (O0)
   ═══════════════════════════════════════════════════════════════════════════════════════

   Antes de este archivo los mismos tokens vivian en CINCO sitios: shared/style.css,
   site/site.css y un <style> en cada una de las tres legales. Cinco copias no es una
   molestia de mantenimiento: es la garantia de que tarde o temprano una se queda atras y
   nadie se entera, porque una pantalla con el verde de hace tres meses se ve bien.

   COMO SE CARGA: con <link rel="stylesheet" href="/shared/tokens.css"> ANTES de la hoja
   de cada superficie, en las 16 paginas. No con @import dentro de las hojas: @import
   serializa la descarga (el navegador no sabe que existe este archivo hasta que parseo la
   otra hoja) y eso es exactamente el salto de layout que costo bajar a CLS 0. Una guarda
   de CI vigila que ninguna pagina enlace una hoja sin enlazar antes los tokens.

   PRUEBA DE QUE NO QUEDA NINGUNA COPIA VIVA: cambia --accent a rojo aqui abajo y recorre
   las 16 pantallas. La que siga verde es una copia que sobrevivio.

   MODO OSCURO: NO. Decision de Axel, 14-sep-2026. Por eso los tokens se declaran PLANOS y
   no como pares semanticos (--fondo-1 / --fondo-2 ...), que es lo que habria que hacer si
   algun dia fuera a existir un segundo tema. No hay ni un `prefers-color-scheme` en el
   repo y este archivo no lo introduce. Si algun dia cambia, se reescribe ESTE archivo y
   nada mas — que es justamente para lo que sirve.

   NO RENOMBRAR. Los nombres son los que ya usaban las hojas y los que documenta
   «LYVA — Sistema de color v6 (corregido)». Un rename aqui es un rename en ~9 300 lineas
   de JS y en un doc canonico, a cambio de cero.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color · Sistema de color v6 ─────────────────────────────────────────────────── */
  --bg:#faf9f7;            /* papel cálido */
  --panel:#ffffff;         /* tarjetas — NUNCA como fondo de sección: las tarjetas desaparecerían */
  --panel2:#f3f1ec;        /* inputs, fondos suaves */
  --line:#ebe9e3;          /* divisores */
  --text:#1b2420;          /* texto principal — 15.1:1 sobre --bg */
  --dim:#58655e;           /* secundario — 5.8:1 sobre --bg */
  --accent:#15804f;        /* verde progreso — acción primaria. NO es color de texto chico (4.72) */
  --accent2:#0e6440;       /* verde profundo — énfasis, y el verde de TEXTO (6.85) */
  --accent-soft:#e6f4ec;   /* verde teñido de fondo */
  --green:#15804f;
  --red:#a8392c;           /* SOLO errores reales */
  --amber:#996310;         /* atención. Como TEXTO solo aguanta sobre --panel blanco (5.06) */
  --amber-soft:#faf0dd;
  --amber-ink:#6b4a12;     /* la tinta ámbar sobre CUALQUIER fondo teñido (7.11 / 7.09) */
  --gray:#6f7b74;          /* trazo SVG. NO es color de texto: 4.19 / 4.41 / 3.91, falla AA */

  /* ── MATRIZ DE CONTRASTE · medida contra el fondo COMPUESTO (O4, 14-sep) ──────────────
     Cada tinta contra cada superficie. AA para texto normal = 4.5; para texto grande
     (>=24px, o >=18.66px con peso >=700) = 3.0; para iconos y trazo = 3.0.

                      bg     panel   panel2   accent-soft  amber-soft    g0
       --text       15.12    15.91    14.10      14.03       14.07     13.13
       --dim         5.81     6.11     5.41       5.39        5.40      5.04
       --accent2     6.85     7.20     6.38       6.35        6.37      5.94
       --amber-ink   7.64     8.04     7.12       7.09        7.11      6.63
       --red         6.07     6.39     5.66       5.63        5.65      5.27
       --accent      4.72     4.96     4.40 X     4.37 X      4.39 X    4.09 X
       --green       4.72     4.96     4.40 X     4.37 X      4.39 X    4.09 X
       --amber       4.81     5.06     4.49 X     4.47 X      4.48 X    4.18 X
       --gray        4.19 X   4.41 X   3.91 X     3.89 X      3.90 X    3.64 X

     LA REGLA, en una linea: --text, --dim, --accent2, --amber-ink y --red pasan sobre
     TODAS las superficies. Las otras cuatro son las peligrosas, y solo sobre las cuatro
     superficies tenidas. Si tienes que elegir tinta sin pensar, elige de las cinco buenas.

       · --gray NO es color de texto en ningun sitio (falla hasta sobre blanco). Trazo SVG.
       · --amber como TEXTO solo aguanta sobre --bg y --panel. Sobre cualquier fondo
         tenido, la tinta es --amber-ink.
       · --accent/--green como TEXTO solo sobre --bg y --panel, y aun ahi va justo (4.72).
         Para texto chico en verde, --accent2. --accent queda para titulos grandes,
         fondos, trazo y iconos, donde 3.0 basta y le sobra.

     Una guarda de CI RECALCULA esta matriz desde los valores de aqui abajo en cada
     corrida: si alguien toca un token, la prueba lo mide de nuevo y no se queda vieja. */

  /* ── Serie secundaria de las graficas de /admin ──────────────────────────────────────
     Las barras comparadas necesitan un segundo color, y el sistema no tenia ninguno: por eso
     /admin llevaba cinco hex sueltos. Peor: «Clientes» era #c9d6cf en una grafica y #2a6fc9
     —un AZUL, en una marca verde— en la de al lado. La misma serie, dos colores, en la misma
     pagina. Un token, un significado.
     Va desaturado a proposito: la serie principal es --accent y tiene que ganar la mirada. */
  --serie-2:#c9d6cf;

  /* ── Heatmap de constancia ───────────────────────────────────────────────────────── */
  --g0:#ece9e3; --g1:#bfe0cb; --g2:#7fc59c; --g3:#3f9e6e; --g4:#15804f;

  /* ── Tipografía ──────────────────────────────────────────────────────────────────── */
  --font-display:'Bricolage Grotesque','Avenir Next','Helvetica Neue',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;

  /* ── Sombra ──────────────────────────────────────────────────────────────────────── */
  --sh-sm:0 1px 2px rgba(27,36,32,.05);
  --sh-md:0 1px 2px rgba(27,36,32,.04), 0 12px 30px rgba(27,36,32,.08);

  /* ── Escala · DECLARADA aquí, TODAVÍA NO APLICADA ────────────────────────────────────
     La migración de los ~1 160 literales `px` es O1, no O0. Se declaran ya para que O1 no
     tenga que reabrir este archivo, y en `rem` porque hoy NADA de la app escala con la
     preferencia de tamaño de texto del sistema: es el arreglo de accesibilidad de mayor
     alcance del plan y no cuesta diseño. */
  --t-xs:.75rem;           /* 12px — etiquetas, ejes, chips */
  --t-sm:.8125rem;         /* 13px — secundario */
  --t-base:.875rem;        /* 14px — cuerpo de la app */
  --t-md:1rem;             /* 16px — lectura larga */
  --t-lg:1.3125rem;        /* 21px — títulos de pantalla */
  --t-xl:clamp(1.625rem, 4vw, 2rem);
  --t-2xl:clamp(2rem, 6vw, 2.75rem);
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
  --r-sm:8px; --r-md:14px; --r-full:999px;
}

/* ── Las caras de la tipografia ──────────────────────────────────────────────────────────
   Estaban DUPLICADAS: 7 caras en shared/style.css y 5 en site/site.css, y las tres legales
   no las declaraban en ningun sitio — pedian Inter y caian a la fuente del sistema, que es
   justo lo que O6 venia a arreglar. Viven aqui porque este archivo ya es el dueno de
   --font-display y --font-body: la fuente es UNA cosa, no tres.
   Declarar una cara que una superficie no use no cuesta nada: @font-face solo descarga
   cuando algo la pide. */
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Movimiento ─────────────────────────────────────────────────────────────────────────
   El reset vivía duplicado en las dos hojas grandes (y la del sitio además apagaba el
   scroll suave). Se unifica aquí, con las dos cosas.
   Sigue ganando aunque este archivo cargue PRIMERO: `!important` vence a cualquier
   declaración normal sin importar el orden, y en las dos hojas no queda ni un `!important`
   de animación que pudiera disputárselo.
   OJO, y es la trampa que costo el 14-sep: esto apaga la ANIMACION, pero NO deshace un
   estado inicial sembrado en CSS (un `stroke-dashoffset`, un `opacity:0`, un `scale(0)`).
   Toda animacion que siembre un estado inicial va dentro de
   `@media (prefers-reduced-motion: no-preference)`, o el modo accesible la deja sembrada. */
@media (prefers-reduced-motion:reduce) {
  * { transition:none!important; animation:none!important; scroll-behavior:auto; }
}