/* tokens.css — Valores con nombre del aspecto de la web.
   Definir aquí y consumir con var() en el resto de hojas: cambiar el aspecto
   debe ser editar este bloque, no buscar y reemplazar hexadecimales.

   Paleta y escalas tomadas del sistema «Organic» (claude.ai/design), con dos
   cambios deliberados:
     1. El acento de marca es la salvia, no el terracota del sistema. El
        terracota (#c67139) está a 1 grado de tono del marrón «satelital» y a
        9 del naranja de alerta: como acento general competiría con colores
        que aquí significan un dato.
     2. El terracota se reserva a enlaces y en su paso oscuro (#8c491a), que
        da 5,7:1 sobre el fondo. El terracota base solo llega a 3,03:1 y no
        cumple AA para texto normal.

   Los colores de estado de incendio y de nivel de alerta NO viven aquí: son
   datos con fuente oficial detrás, no decoración. Se definen en el :root de
   cada página que los usa: index.html y campana-2026.html. */

:root {
  /* ---- Superficies e ink ---- */
  --fondo: #f5ead8;
  --superficie: #f9f4ed;
  --superficie-honda: #ebddc5;
  --tinta: #201e1d;          /* 13,9:1 sobre el fondo */
  --tinta-suave: #645c50;    /* 5,9:1 — texto secundario */
  --tinta-tenue: #82796a;    /* 3,9:1 — solo texto grande o apoyo */
  --borde: #dcd3c4;

  /* ---- Acentos ---- */
  --acento: #7a8a5e;         /* salvia: marca, botones, sección activa */
  --acento-hondo: #56633f;
  --acento-tinte: #f0fae1;
  --enlace: #8c491a;         /* terracota paso 700 */
  --enlace-tinte: #fff2eb;

  /* ---- Tipografía ---- */
  --fuente-titulo: "Caprasimo", Georgia, serif;
  --fuente-texto: "Figtree", "Inter", system-ui, sans-serif;

  /* ---- Retícula vertical: una unidad de 28 px y su medio paso ----
     Todo margen y toda altura de línea son múltiplos de estos dos valores.
     Sustituye a los mt-1/mt-2/mt-3/mt-4/mb-4/mt-20 elegidos caso a caso. */
  --ritmo: 28px;
  --medio-ritmo: 14px;

  /* Tope de medida de línea. El artículo estaba a 81 caracteres por línea;
     el rango cómodo de lectura está entre 45 y 75. */
  --medida: 62ch;

  /* ---- Cromo de graficos y esquemas ----
     Solo lo neutro: rejilla, ejes, barras sin destacar y el halo que separa
     una etiqueta del fondo. Los colores con significado dentro de un esquema
     (el rojo del limite de extincion, el verde del dia normal, el naranja del
     dia extremo) NO son tokens: dicen algo, como los estados de incendio. */
  --grafico-rejilla: #ded3c0;
  --grafico-eje: #c0b6a5;
  --grafico-texto: #82796a;
  --grafico-barra: #b3a794;
  --grafico-panel: #f9f4ed;
  --grafico-halo: #f5ead8;

  /* ---- Forma ---- */
  --radio: 16px;
  --radio-grande: 28px;
  --sombra-suave: 0 1px 2px rgba(46, 43, 37, .14);
}