/*
  Tokens de diseño — ver docs/03-sistema-diseno.md
  Nada se define acá "porque sí": cada valor está justificado en ese documento.
  Las páginas nuevas se construyen leyendo tokens, nunca inventando un color,
  tamaño o espaciado nuevo fuera de este archivo.

  2026-09: el sistema dejó de "mirar al impreso desde otro ángulo" y pasó a ser
  la otra expresión de la misma pieza. La paleta es la del manual: negro,
  blanco, grises de afiche y UN naranja. No hay rojo ni verde — medido sobre
  las 21 páginas de fuente/manual_final_final.pdf, el único matiz saturado que
  existe en todo el impreso es el naranja (15°-45°).
*/

:root {
  /* ---- color (nombre y función: docs/03-sistema-diseno.md, sección Paleta) ---- */

  --color-papel: #fbfaf8;       /* el papel: blanco, apenas cálido para no
     encandilar en pantalla retroiluminada. El impreso es #ffffff. */
  --color-tinta: #141414;       /* negro de impresión. Casi neutro y casi puro:
     el impreso imprime en #000, acá se levanta apenas para no cansar la vista
     en párrafos largos. 17.7:1 sobre papel. */

  --color-naranja: #ffa027;     /* EL color del manual, sin atenuar (muestreado
     de la tapa). Uso: RELLENO sólido de bloque —tarjeta, panel de dato,
     apertura, marca de énfasis— siempre con --color-tinta encima (9:1). Nunca
     como texto ni borde fino sobre papel: ahí da 1.9:1 y no pasa ni como texto
     grande. Para eso está --color-naranja-texto. */
  --color-naranja-marcador: #ffb864; /* el resaltador del impreso
     (fuente/resaltado.svg): fondo detrás de texto tinta, 10.8:1. Nunca como
     texto ni relleno de figura. */
  --color-naranja-texto: #915c1c;    /* el mismo naranja bajado hasta que pasa
     AA como texto y borde fino sobre papel (5.4:1). Es el naranja cuando tiene
     que leerse, no cuando tiene que pesar. */

  --color-gris-afiche: #dadada; /* el gris de los fondos de afiche del impreso
     (páginas 2-3, 7, 16). Es superficie, no línea: se percibe por área y por
     la trama de grano que lleva encima, no por contraste de borde. Encima va
     tinta (13.2:1) — nunca --color-gris, que ahí queda en 3.8:1. */
  --color-gris: #6b6b6b;        /* texto secundario, líneas, pies de figura.
     5.1:1 sobre papel. Neutro, como los grises del impreso. */

  /* variante de superficie derivada (no es un color nuevo: es Tinta con
     transparencia, para fondos apenas marcados de tarjeta/panel neutro) */
  --color-gris-suave: rgb(20 20 20 / 6%);

  /* --color-naranja-suave (naranja al 16%) se retiró en 2026-09: todo lo que
     era tinte naranja pasó a naranja pleno con Tinta encima. Si aparece la
     necesidad de un naranja translúcido, revisar primero si no corresponde
     naranja pleno o --color-naranja-marcador. */

  /* ---- tramas (docs/03-sistema-diseno.md, sección Tramas de afiche) ----
     Las tres tramas del impreso, hechas con gradientes y ruido SVG en vez de
     imágenes: pesan bytes, no kilobytes, y escalan sin pixelarse. */

  --trama-puntos: radial-gradient(var(--color-tinta) 0.9px, transparent 1px);
  --trama-puntos-medida: 6px 6px;   /* paso de la grilla de puntos */

  --trama-diagonal: repeating-linear-gradient(
    45deg,
    var(--color-naranja) 0 2px,
    transparent 2px 6px
  );

  /* grano de serigrafía: ruido fractal en escala de grises, el moteado fino
     con veteado que tienen los fondos grises del impreso. */
  --trama-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");

  /* ---- tipografía (roles: docs/03-sistema-diseno.md, sección Tipografía) ---- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-stencil: "Allerta Stencil", "Arial Narrow", sans-serif;
  --font-texto: "Bitter", Georgia, serif;
  --font-utilidad: "IBM Plex Mono", "Courier New", monospace;

  /* escala tipográfica fluida (min móvil 360px → máx escritorio 1280px+) */
  --size-display-xl: clamp(2.75rem, 1.55rem + 5.5vw, 5.5rem);
  --size-display-l: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  --size-display-m: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --size-body-l: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
  --size-body: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --size-body-s: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --size-label: 0.75rem;
  --size-data: clamp(2rem, 1.2rem + 4vw, 3.5rem);
  --size-legal: 0.8125rem;

  /* ---- espaciado, base 8px (docs/03-sistema-diseno.md, Grilla y ritmo vertical) ---- */
  --space-1: 0.25rem;  /* 4px  — solo para ajustes finos de íconos/sellos */
  --space-2: 0.5rem;   /* 8px  — unidad base */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px — ritmo entre párrafos de un bloque */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px — ritmo entre bloques temáticos */
  --space-8: 6rem;     /* 96px — ritmo entre secciones mayores */

  /* ---- layout ---- */
  --ancho-lectura: 42.5rem;    /* 680px, para cuerpo de texto largo */
  --ancho-contenedor: 80rem;   /* 1280px, para grillas de tarjetas */
  --margen-movil: 1.25rem;     /* 20px, piso 360px */
  --margen-escritorio: 2rem;   /* 32px */

  /* ---- foco de teclado (nunca se remueve sin reemplazo) ----
     va en naranja-texto, no en el naranja pleno: el anillo es línea fina y
     necesita pasar 3:1 contra el papel (5.4:1). */
  --anillo-foco: 3px solid var(--color-naranja-texto);
  --anillo-foco-offset: 2px;
}