/* ===========================================================================
   tokens.css — la fuente de verdad del sistema visual de VATcodex (29-09-2026).

   La misma factura que Doctrina IVA (la herramienta hermana de Daniel para la
   DGT y los TEA): neutros de un solo tinte, filetes de 1 px en vez de
   sombras, un solo color de acento que solo aparece cuando algo esta activo,
   cifras tabulares y dos voces tipograficas —serif para leer, sans para
   operar—. El acento es el granate de VATcodex, no el azul de Doctrina IVA: son
   hermanas, pero se distinguen.

   Se carga DESPUES de app.css en todas las paginas: los alias del final
   traducen los nombres antiguos (--bg, --ink, --burgundy…) a esta rampa, asi
   que las paginas que aun no se han rehecho toman los mismos colores.

   El tema lo pone assets/tema.js antes de pintar: data-theme="light" | "dark"
   es el que se ve (el elegido, o el del sistema si se deja en Auto).
   =========================================================================== */
:root {
  /* La herramienta, en frio; el papel, solo para leer (02-10-2026, como quedo
     en Doctrina IVA). Daniel: «el tono del color de la letra y el background
     hace la lectura muy poco comoda». El primer arreglo (30-09) entibio TODO
     el sitio; lo que cansaba era otra cosa: el lienzo casi blanco no separaba
     la lista del lector, los grises de los rotulos de 11-12 px se quedaban
     cortos y el texto largo iba en tinta casi negra sobre blanco puro. Ahora
     el lienzo va un punto mas marcado, los dos grises son mas oscuros
     (--tinta-2 8,3:1 y --tinta-3 5,8:1 sobre el lienzo) y la interfaz sigue
     fria y blanca, que es lo que separa el documento de la herramienta. */
  --papel: #f0f2f5; --hoja: #ffffff; --tinta: #14181e; --tinta-2: #3f4853; --tinta-3: #55606c;
  --regla: #d3d8df; --regla-2: #e2e6eb; --sel: #e7ebf0;
  /* Un solo acento, granate, y solo donde algo esta activo, seleccionado,
     enfocado o es la accion primaria. */
  --acento: #8a1c2e; --acento-2: #6e1423; --acento-suave: #f8edef; --sobre-acento: #ffffff;
  --peligro: #b3261e;
  /* Marcas sobre el texto: seleccion, coincidencias y tus cuatro subrayados. */
  --marca-sel: #f3d3d9; --marca-sel-tinta: #14181e;
  --busq: #fdeeb8; --busq-fondo: #fff5d6; --busq-trazo: #c98a11;
  --s-amarillo: #fceea6; --s-verde: #cdebc0; --s-azul: #cddff7; --s-rosa: #f7d2dd;
  --p-amarillo: #f5d94f; --p-verde: #92cf6f; --p-azul: #7fb0e6; --p-rosa: #ec96aa;
  /* Dos voces: sans para operar, serif para leer y para la voz propia. */
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  /* Radios y un solo tiempo de transicion. */
  --r: 6px; --r-sm: 4px; --r-lg: 10px; --r-xs: 2px; --r-pill: 99px;
  --paso: 140ms cubic-bezier(.22, 1, .36, 1);
  --sombra-sm: 0 1px 2px rgb(16 24 40 / .06), 0 2px 6px -2px rgb(16 24 40 / .08);
  --sombra: 0 1px 2px rgb(16 24 40 / .08), 0 6px 12px -4px rgb(16 24 40 / .12);
  --sombra-cajon: 0 0 0 1px rgb(16 24 40 / .04), -24px 0 48px -12px rgb(16 24 40 / .22);
  --chevron-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --linea-fuerte: #c3c9d2;
  color-scheme: light;
}
html[data-theme="dark"] {
  /* En oscuro, la rampa fria de siempre: aqui no hay papel que valga. Tinta
     13,5:1 sobre la hoja; el gris secundario mas claro, 5,6:1. */
  --papel: #111317; --hoja: #181b20; --tinta: #e8eaee; --tinta-2: #b0b6bf; --tinta-3: #939aa5;
  --regla: #2b3038; --regla-2: #21252c; --sel: #1f2329;
  --acento: #ee8d9d; --acento-2: #f5aebb; --acento-suave: #2e1b21; --sobre-acento: #111317;
  --peligro: #ef8078;
  --marca-sel: #5a2a35; --marca-sel-tinta: #f3eef0;
  --busq: #4f4113; --busq-fondo: #2b2514; --busq-trazo: #c9a14a;
  --s-amarillo: #5f5213; --s-verde: #2c4a2f; --s-azul: #23405c; --s-rosa: #572b37;
  --sombra-sm: 0 1px 2px rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .45);
  --sombra: 0 1px 2px rgb(0 0 0 / .45), 0 6px 12px -4px rgb(0 0 0 / .5);
  --sombra-cajon: -24px 0 48px -12px rgb(0 0 0 / .7);
  --linea-fuerte: #3a404a;
  color-scheme: dark;
}

/* --- La hoja de lectura es papel, no pantalla --------------------------------
   El blanco puro con tinta casi negra (18:1) es el contraste maximo y cansa en
   lecturas largas; un blanco roto, apenas calido, deja el texto en 17:1 y quita
   el deslumbramiento. Solo cambia donde se LEE: el asunto y el articulo
   (#w-lector), la pagina del asunto, la ventana de lectura, el cajon del
   articulo y la ficha emergente de una cita. Se vuelve al blanco en
   «Aa › Background» (data-fondo="blanco" en <html>). En oscuro no aplica. */
html[data-theme="light"]:not([data-fondo="blanco"]) :is(#w-lector, .w-lector-pagina, .rd-panel, .w-cajon, .refpop) {
  --hoja: #fbfaf7; --papel: #f3f1eb; --regla: #dcd8cf; --regla-2: #e8e5dd; --sel: #eeebe4;
  --linea-fuerte: #cfc9bd;
}

/* --- Puente con los nombres antiguos de app.css ---------------------------
   Las piezas que aun vienen de app.css (texto integro, ventana de lectura,
   fichas de las citas, calendario, discusion, legales) toman esta misma rampa.
   Las superficies de lectura van tambien en la lista: un alias se resuelve
   donde se declara, y declarado solo en la raiz seguiria valiendo el blanco de
   la herramienta dentro de la hoja de papel. */
:root, html[data-theme="dark"], #w-lector, .w-lector-pagina, .rd-panel, .w-cajon, .refpop {
  --bg: var(--hoja); --bg-raised: var(--hoja); --bg-sunken: var(--papel);
  --ink: var(--tinta); --ink-soft: var(--tinta-2); --ink-faint: var(--tinta-3);
  --line: var(--regla); --line-strong: var(--linea-fuerte);
  --burgundy: var(--acento); --burgundy-soft: var(--acento-2); --accent: var(--acento);
  --chip-bg: var(--acento-suave); --chip-ink: var(--acento);
  --surface: var(--papel); --surface-hover: var(--sel);
  --font-sans: var(--sans); --font-serif: var(--serif);
  --muted: var(--tinta-3); --fg-soft: var(--tinta-2); --bg-soft: var(--papel);
  /* Las sombras de app.css iban teñidas de granate (rgba(74,14,24)): en oscuro
     eran un halo de color alrededor de la ficha emergente, el lector y el botón
     de volver arriba. Neutras, como las del sistema. */
  --shadow: var(--sombra); --shadow-sm: var(--sombra-sm);
  --shadow-bar: 0 4px 12px -8px rgb(16 24 40 / .35);
}