/* soycaminante — tokens de diseño
 *
 * Paleta tomada de la Agenda Personal del Caminante (AGSCh, 2020), medida por
 * superficie de relleno en sus 88 páginas, y de la lámina del camino simbólico.
 * Sin build step (constitución X): CSS plano, variables nativas.
 *
 * Contraste (WCAG 2.1, sobre --papel #FFFFFF):
 *   --rojo       #ED1C24  4.4:1  → solo texto grande (≥ 24px o ≥ 19px bold) y rellenos
 *   --rojo-tinta #B0222C  6.7:1  → texto normal, enlaces
 *   --tinta      #231F20 16.3:1
 *   --mostaza    #EBAA34  2.0:1  → NUNCA texto sobre blanco; sí fondo con --tinta encima (8.0:1)
 *   --amarillo   #F9E02D  sobre --tinta 12.2:1 (así lo usan las insignias)
 */

:root {
  /* ── Colores de la Agenda ───────────────────────────── */
  --ag-negro:      #231F20;  /* fondo de insignias, páginas oscuras, texto */
  --ag-rojo:       #ED1C24;  /* color de la Rama Caminantes (M p. 170) */
  --ag-rojo-osc:   #B0222C;
  --ag-mostaza:    #EBAA34;  /* páginas "Reformula", "Proyecto colectivo" */
  --ag-mostaza-osc:#B58736;
  --ag-amarillo:   #F9E02D;  /* borde y llama de Fuego y Antorcha */
  --ag-naranjo:    #F36B35;
  --ag-rosado:     #F2C9C7;
  --ag-gris:       #939598;
  --ag-turquesa:   #2B9198;  /* silueta de la lámina del camino simbólico */
  --ag-turquesa-cl:#98CFD1;

  /* ── Roles (tema claro) ─────────────────────────────── */
  --papel:         #FFFFFF;
  --papel-2:       #FAF7F2;  /* hoja de agenda, cálida */
  --papel-3:       #F2ECE3;
  --tinta:         var(--ag-negro);
  --tinta-2:       #5B5557;  /* 7.3:1 */
  --tinta-3:       #767072;  /* 4.8:1 (4.5 sobre papel-2), lo mínimo para texto secundario */
  --linea:         #E4DDD3;  /* renglones de la agenda */
  --linea-fuerte:  #C9C0B4;

  --acento:        var(--ag-rojo);
  --acento-tinta:  var(--ag-rojo-osc);
  --sobre-acento:  #FFFFFF;
  --destacado:     var(--ag-mostaza);
  --sobre-destacado: var(--ag-negro);
  --fuego:         var(--ag-amarillo);

  /* Campos de acción prioritarios: se distinguen por ícono y texto; el color es apoyo.
     Ninguno alcanza 4.5:1 con texto blanco: se usan como punto o borde, con texto --tinta. */
  --campo-servicio:   var(--ag-rojo);
  --campo-naturaleza: #3E8E41;
  --campo-trabajo:    var(--ag-mostaza-osc);
  --campo-viaje:      var(--ag-turquesa);

  /* Estados de un objetivo: neutrales a propósito (constitución III, nada de semáforo) */
  --estado-camino:  var(--papel-3);
  --estado-logre:   #FCEFD2;
  --estado-dejo:    var(--papel-3);
  --estado-cambio:  #FBE3E1;

  /* ── Tipografía ─────────────────────────────────────── */
  /* Títulos: la Agenda usa DK Lemon Yellow Sun (licencia comercial). Sustituto libre: Amatic SC.
     Texto: la Agenda usa Myriad Pro (Adobe). Sustituto libre: Source Sans 3.
     En producción se autoalojan en assets/fonts/ (offline-first). */
  --f-titulo: "Amatic SC", "Arial Narrow", sans-serif;
  --f-texto:  "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif;

  --t-xs: 0.8125rem;   /* 13 */
  --t-s:  0.9375rem;   /* 15 */
  --t-m:  1.0625rem;   /* 17, base: se lee en el teléfono, a veces con linterna */
  --t-l:  1.25rem;     /* 20 */
  --t-xl: 1.625rem;    /* 26 */
  --t-titulo:   2.5rem;   /* Amatic es angosta: necesita tamaño */
  --t-titulo-l: 3.25rem;
  --interlinea: 1.5;

  /* ── Espacio, forma, sombra ─────────────────────────── */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --r-s: 6px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgb(35 31 32 / .08), 0 1px 3px rgb(35 31 32 / .06);
  --sombra-2: 0 4px 14px rgb(35 31 32 / .12);
  /* La Agenda corta sus bloques en diagonal: se usa en cabeceras */
  --diagonal: polygon(0 0, 100% 0, 100% 86%, 0 100%);

  --toque-min: 44px;   /* objetivo táctil mínimo */
  --ancho-lectura: 38rem;
}

/* ── Tema oscuro: la Agenda ya tiene páginas negras; en campamento se usa de noche ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:        #1A1718;
    --papel-2:      #231F20;
    --papel-3:      #2E292A;
    --tinta:        #F4EFE8;
    --tinta-2:      #CFC7BD;
    --tinta-3:      #A8A09A;
    --linea:        #3A3435;
    --linea-fuerte: #544D4E;
    --acento-tinta: #FF6B6F;   /* rojo legible sobre negro: 6.4:1 */
    --estado-logre:  #3A3020;
    --estado-cambio: #3D2224;
  }
}
:root[data-tema="oscuro"] {
  --papel:        #1A1718;
  --papel-2:      #231F20;
  --papel-3:      #2E292A;
  --tinta:        #F4EFE8;
  --tinta-2:      #CFC7BD;
  --tinta-3:      #A8A09A;
  --linea:        #3A3435;
  --linea-fuerte: #544D4E;
  --acento-tinta: #FF6B6F;
  --estado-logre:  #3A3020;
  --estado-cambio: #3D2224;
}