/* ============================================================
   Llankana — Tokens visuales
   ============================================================

   ÚNICA FUENTE de color y tipografía.

   ⚠️  Si falta una variable, el navegador NO avisa: aplica el valor inicial de
   cada propiedad y la pantalla se ve "casi bien" — bordes negros (currentColor),
   fondos transparentes, badges invisibles. Ya pasó una vez y tardó semanas en
   detectarse. `scripts/invariantes.py` falla si index.html usa una variable que
   este archivo no define. No borres ese guarda.

   ── Accesibilidad ────────────────────────────────────────────
   Los colores de la fiesta son saturados: buenos para RELLENOS, malos para
   TEXTO. La paleta va en dos capas:

     · Colores de marca (--rosa, --sol, --maiz…) → rellenos, barras, acentos.
     · Variantes «-ink»                          → texto y cifras. WCAG 2.1 AA
                                                   (≥4,5:1), verificado por test.

   Si un color lleva texto encima o ES texto, usa su variante -ink. El usuario
   objetivo incluye adultos mayores leyendo al sol en teléfonos viejos: el
   contraste no es cumplimiento, es el producto.

   ── Paleta ───────────────────────────────────────────────────
   Los colores son de la fiesta de San Pedro. El violeta queda reservado a
   terceros: ningún elemento propio lo usa (ver docs/BRAND.md §3).
   ============================================================ */

/* ---------- Tipografía ALOJADA (offline-first) ----------
   Las fuentes viven en el propio dominio (assets/fonts, subconjunto latino), no
   en Google Fonts. Así la app se ve igual SIN conexión y sin depender de un CDN
   externo — clave para el uso en parroquias con internet intermitente. `swap`:
   el texto se pinta con la fuente del sistema y cambia al cargar la de marca. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/fredoka-400.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('../../assets/fonts/fredoka-500.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('../../assets/fonts/fredoka-600.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('../../assets/fonts/fredoka-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../../assets/fonts/nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../../assets/fonts/nunito-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../../assets/fonts/nunito-800.woff2') format('woff2')}

:root {
  /* ---------- Tipografía ---------- */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  /* ---------- Base ---------- */
  --papel: #fdf6ec;   /* fondo */
  --tinta: #2d2a26;   /* texto principal — 14,3:1 sobre papel */

  /* ---------- Colores de la fiesta (RELLENOS) ---------- */
  --azul: #1b4965;    /* autoridad, títulos */
  --cielo: #a8d8ea;   /* detalles fríos */
  --rojo: #c0392b;    /* acento del linaje */
  --rosa: #e63973;    /* comparsa, selección */
  --sol: #f4a259;     /* acción */
  --maiz: #f2cc8f;    /* monedas, avisos */
  --verde: #6a994e;   /* confirmación */
  --verde2: #386641;  /* verde profundo */
  --tierra: #8d6e63;  /* neutro cálido */
  --gris: #b8b2a7;    /* bordes, inactivo */

  /* ---------- Variantes «ink» (TEXTO) ----------
     Derivadas de cada color de marca bajando luminosidad y conservando el tono,
     hasta alcanzar ≥4,5:1. No son colores nuevos: son el mismo color, legible. */
  --rosa-ink: #d1174f;    /* blanco encima = 5,2:1 */
  --sol-ink: #a85a12;     /* sobre papel = 4,9:1 */
  --maiz-ink: #8a5a0d;    /* sobre papel = 5,4:1 — la cifra de cayambitas */
  --tierra-ink: #7a5f55;  /* sobre papel = 5,4:1 — botón «← Volver» */
  --gris-ink: #6f6250;    /* sobre papel = 5,7:1 — notas al pie */
  --gris-ink-crema: #6b5f48; /* sobre crema #eee5d5 = 5,1:1 — badge sin elegir */
  --verde-ink: #3d6b2a;   /* sobre blanco = 5,3:1 */

  /* ---------- Superficies ---------- */
  --superficie: #ffffff;
  --crema: #eee5d5;       /* pistas, badges neutros */
  --rosa-suave: #fff0f5;  /* tarjeta seleccionada */
  --verde-suave: #eef6e6; /* chip seleccionado */

  /* ---------- Nombres heredados ----------
     El index.html los usa desde un refactor anterior. Se mantienen mapeados en
     vez de renombrarlos en 40 sitios. */
  --brand-gold: #E8A838;
  --brand-ice-light: #D8EFF4;

  /* ---------- Sombras ---------- */
  --sombra: 0 6px 0 rgba(0, 0, 0, .12);
  --sombra2: 0 4px 0 rgba(0, 0, 0, .08);

  /* ---------- Foco visible ----------
     WCAG 2.4.7. Sin esto, quien navega con teclado no sabe dónde está. */
  --foco: 3px solid #1b4965;
  --foco-offset: 2px;

  /* ---------- RESERVADO ----------
     Violeta = terceros. Ningún elemento propio debe usarlo. Está aquí para que,
     si algún día se compara con otra herramienta, salga de un token. */
  --tercero: #7C3AED;
}

/* Foco visible en todo lo interactivo. El demo se opera con el pulgar, pero un
   veedor o un funcionario lo va a recorrer con teclado. */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="radio"]:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-offset);
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}