/* =====================================================================
   Día del Tendero — Sistema de tokens (identidad FENALCO)
   Fuente única. Los componentes SOLO leen de aquí (DIRECCION-ARTE §2).
   Marca: verde #00CE7C · morado #280071 · blanco dominante · Metropolis.
   ===================================================================== */

/* ---------- Metropolis self-host (pesos 400/500/600/700/800) ---------- */
@font-face{
  font-family:"Metropolis"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/metropolis-400.woff2") format("woff2");
}
@font-face{
  font-family:"Metropolis"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/metropolis-500.woff2") format("woff2");
}
@font-face{
  font-family:"Metropolis"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/metropolis-600.woff2") format("woff2");
}
@font-face{
  font-family:"Metropolis"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/metropolis-700.woff2") format("woff2");
}
@font-face{
  font-family:"Metropolis"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/metropolis-800.woff2") format("woff2");
}

:root{
  /* ---------- MARCA (paleta principal FENALCO, ≥70% de cada pieza) ---------- */
  --fen-verde:      #00CE7C;   /* verde de marca — RELLENOS, formas, señal positiva. NO texto sobre blanco (2.1:1, falla) */
  --fen-morado:     #280071;   /* morado de marca — TEXTO/titulares/CTA. Sobre blanco 14.3:1 (AAA). Estrella tipográfica */
  --fen-blanco:     #FFFFFF;

  /* ---------- VERSIONES AA-SAFE PARA TEXTO ---------- */
  --verde-txt:      #007A46;   /* verde para TEXTO/links/números pequeños sobre blanco — ~5.2:1 (AA, incl. texto chico) */
  --morado-txt:     #280071;   /* el morado ya sirve como texto tal cual */

  /* ---------- ACENTOS (secundaria FENALCO — máx 30%, dinamismo/dato) ---------- */
  --coral:          #FF8674;   /* relleno/acento cálido. NO texto sobre blanco */
  --turquesa:       #2CD5C4;   /* relleno/acento. NO texto sobre blanco */
  --azul:           #009CDE;   /* relleno/acento. NO texto sobre blanco */
  --ambar:          #FFB549;   /* relleno/atención. NO texto sobre blanco */
  --verde-lima:     #84BD00;   /* relleno */
  --magenta:        #890C58;   /* acento oscuro — SÍ sirve como texto (~8:1 AA) */
  --menta:          #9BE3BF;   /* relleno muy claro / fondos de éxito suaves */

  /* ---------- TEXTO Y UI (complementarios / neutros) ---------- */
  --tinta:          #1C1F2A;   /* casi-negro FENALCO — cuerpo principal, ~15:1 */
  --tinta-70:       #4B4F54;   /* gris FENALCO — texto secundario, ~7:1 (AA) */
  --tinta-55:       #75787B;   /* gris FENALCO — texto terciario/hints, ~4.6:1 (AA texto normal) */
  --petroleo-txt:   #007681;   /* teal FENALCO — texto/acento de dato frío, ~5.4:1 (AA) */
  --azul-marino:    #0C2340;   /* azul marino FENALCO — cabeceras alternativas */

  /* ---------- SUPERFICIES ---------- */
  --plaza:          #FFFFFF;   /* fondo dominante (chasis claro) */
  --plaza-2:        #F6F8FA;   /* zona de reposo / fondo de sección alterna (gris azulado casi blanco) */
  --tarjeta:        #FFFFFF;   /* superficie de tarjeta */
  --menta-bg:       #EAF9F1;   /* fondo de éxito/positivo (verde muy lavado, texto verde-txt encima OK) */
  --ambar-bg:       #FFF4E0;   /* fondo de atención (texto #8A5A00 encima) */
  --coral-bg:       #FFEDE9;   /* fondo de error/alerta (texto #B23A22 encima) */
  --morado-bg:      #F1EEF8;   /* fondo lavado morado para bloques de marca suaves */

  /* ---------- LÍNEAS ---------- */
  --linea:          rgba(28,31,42,.12);   /* borde estándar */
  --linea-fuerte:   rgba(28,31,42,.20);   /* borde de énfasis */
  --morado-linea:   rgba(40,0,113,.16);   /* borde teñido de marca */

  /* ---------- SEMÁFORO (dashboard — significado, AA como texto sobre blanco) ---------- */
  --sem-verde-txt:  #00713F;   /* "en meta" — ~5.6:1 */
  --sem-ambar-txt:  #8A5A00;   /* "atención" — ~5.0:1 */
  --sem-rojo-txt:   #B23A22;   /* "crítico" — ~5.1:1 */
  --sem-verde-fill: #00CE7C;   /* relleno positivo (usa verde de marca) */
  --sem-ambar-fill: #FFB549;   /* relleno atención (ámbar de marca) */
  --sem-rojo-fill:  #FF8674;   /* relleno alerta (coral de marca) */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: "Metropolis", Arial, system-ui, sans-serif;  /* titulares y destacados */
  --font-body:    "Metropolis", Arial, system-ui, sans-serif;  /* cuerpo y UI */
  --num-tabular:  "tnum" 1, "lnum" 1;   /* font-feature-settings para códigos/cifras */

  /* Escala tipográfica (móvil-primero; los clamp() crecen a desktop) */
  --fs-hero:    clamp(2.2rem, 9vw, 3.4rem);   /* nombre del evento / nombre del tendero */
  --fs-h1:      clamp(1.7rem, 6vw, 2.4rem);
  --fs-h2:      1.3rem;
  --fs-h3:      1.08rem;
  --fs-body:    1rem;      /* 16px mínimo real en móvil — nunca menos en campos */
  --fs-sub:     .94rem;
  --fs-small:   .82rem;
  --fs-micro:   .74rem;
  --fs-codigo:  1.6rem;    /* el código XXXX-XXXX en el ticket */
  --fs-dato-xl: clamp(3rem, 14vw, 4rem);   /* nº de chances, cifras grandes */

  /* Pesos Metropolis */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  --lh-tight:   1.08;
  --lh-body:    1.5;
  --tracking-eyebrow: .14em;

  /* ---------- ESPACIADO (escala 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-10: 64px;
  --pagina-max: 560px;
  --pagina-pad: 20px;

  /* ---------- RADIOS ---------- */
  --r-pill:   999px;   /* SOLO piezas pequeñas: botones, chips, badges, barra de progreso, píldora de URL */
  --r-card:   18px;    /* tarjetas y contenedores grandes */
  --r-input:  12px;    /* campos de formulario */
  --r-qr:     14px;    /* caja del QR */
  --r-blob:   40% 60% 62% 38% / 42% 40% 60% 58%;  /* forma orgánica FENALCO (adornos) */

  /* ---------- SOMBRAS (suaves, teñidas de morado; nunca pesadas) ---------- */
  --sombra-1: 0 1px 2px rgba(40,0,113,.06), 0 2px 8px rgba(40,0,113,.05);
  --sombra-2: 0 4px 16px rgba(40,0,113,.10);
  --sombra-focus: 0 0 0 3px rgba(0,206,124,.45);

  /* ---------- MOTION (regla emil: solo transform/opacity, <300ms, nunca ease-in en UI) ---------- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   300ms;
}