/* =====================================================================
   FNDGE — Tokens del sistema de diseño
   =====================================================================
   Todos los valores de marca viven acá. Si mañana aparece el manual de
   la agencia con los HEX oficiales, se cambian en este archivo y el
   resto de la app se actualiza solo.

   Los colores se muestrearon de las tres piezas gráficas oficiales
   (encuesta de la peña, portada del reglamento, flyer de personajes).
   ===================================================================== */

:root {
  /* --- Azules: la columna vertebral de la marca ------------------- */
  --azul-900: #072F5C;   /* texto sobre celeste, títulos operativos     */
  --azul-800: #0C4A8C;   /* azul profundo del reglamento. 8.9:1 ✓ AAA   */
  --azul-600: #0F5FB5;
  --azul-500: #006CE4;   /* azul primario, botones. 4.9:1 ✓ AA          */
  --azul-300: #84C0FC;   /* celeste de fondo. NUNCA con texto blanco    */
  --azul-100: #C7E3FF;
  --azul-50:  #DCEEFF;   /* fondo suave de secciones festivas           */

  /* --- Acentos: estrellas, huellas y mascotas --------------------- */
  --amarillo:      #FCD83C;  /* fondo de destacados, sólo texto oscuro  */
  --amarillo-osc:  #6B5200;  /* texto sobre amarillo. 7.4:1 ✓           */
  --dorado:        #E0A000;
  --naranja:       #F06000;
  --naranja-osc:   #8A3400;  /* texto sobre naranja claro               */
  --rosa:          #E56C96;  /* huella del isotipo, tomado del logo     */
  --rosa-osc:      #8A2450;

  /* --- Estado: derivados, no están en las piezas ------------------ */
  --verde:      #2E8B57;  /* en escena, aprobado, guardado             */
  --verde-bg:   #E3F3EA;
  --verde-osc:  #1B5334;
  --rojo:       #C8341F;  /* error, rechazado, ausente                 */
  --rojo-bg:    #FBEAE7;
  --rojo-osc:   #7A1F12;
  --ambar:      #7F6300;  /* pendiente, en espera. 5.1:1 sobre --ambar-bg ✓ AA (antes 4.44:1, fallaba) */
  --ambar-bg:   #FDF3D6;

  /* --- Neutros ---------------------------------------------------- */
  --blanco:     #FFFFFF;
  --gris-50:    #F7F9FC;
  --gris-100:   #EDF1F7;
  --gris-200:   #DCE3ED;
  --gris-400:   #8A96A8;
  --gris-600:   #56607040;
  --texto:      #16273D;
  --texto-2:    #4A5A70;
  --texto-3:    #5C6B80;  /* 5.4:1 sobre blanco ✓ AA (antes 4.25:1, fallaba) */

  /* --- Superficies: las cambia el tema (festivo / operativo) ------ */
  --fondo:        var(--gris-50);
  --superficie:   var(--blanco);
  --borde:        var(--gris-200);
  /* Borde de los CONTROLES (campos, selects, área de archivo). Va aparte de
     --borde, que es para separadores decorativos: WCAG 1.4.11 pide 3:1 para
     el límite de un componente, y --gris-200/--azul-100 daban 1.3:1 — al sol
     directo el borde de un campo desaparecía. Éste da 3.5:1 sobre blanco. */
  --borde-campo:  #7E8A9C;
  --marca:        var(--azul-800);

  /* --- Tipografía -------------------------------------------------- */
  --fuente-titulo: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --fuente-texto:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs:   0.75rem;   /* 12px — metadatos                            */
  --t-sm:   0.875rem;  /* 14px — etiquetas, ayuda                     */
  --t-base: 1rem;      /* 16px — cuerpo. Nunca menos en formularios,
                          si no iOS hace zoom al enfocar un input      */
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;

  /* --- Espaciado: escala de 4px ----------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.25rem;  --e-6: 1.5rem;   --e-8: 2rem;     --e-10: 2.5rem;
  --e-12: 3rem;

  /* --- Radios: generosos, como en las piezas ---------------------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;   /* tarjetas, medido de la encuesta                 */
  --r-full: 999px;

  /* --- Elevación: la marca es plana, casi no se usa --------------- */
  --sombra-sm: 0 1px 2px rgba(7, 47, 92, 0.06);
  --sombra-md: 0 4px 16px rgba(7, 47, 92, 0.10);

  /* --- Movimiento -------------------------------------------------- */
  --vel-rapida: 120ms;
  --vel-base:   220ms;
  --curva:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --rebote:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Estructura -------------------------------------------------- */
  --alto-cabecera: 56px;
  --alto-nav:      64px;
  --ancho-max:     640px;
  --ancho-max-esc: 1100px;
  --area-toque:    44px;  /* mínimo de Apple/Google para dedos        */
}

/* =====================================================================
   Los dos niveles de expresión de marca
   ---------------------------------------------------------------------
   Festivo: visitante, galería, agenda pública, login. Celeste, mascotas,
   títulos grandes. Es la cara del festival.

   Operativo: carga de participantes, guion en vivo, devoluciones. Fondo
   blanco y densidad alta. Lo usa gente trabajando, muchas veces de noche
   y al costado del escenario.
   ===================================================================== */

body.tema-festivo {
  --fondo:      var(--azul-50);
  --superficie: var(--blanco);
  --borde:      var(--azul-100);
  --marca:      var(--azul-800);
}

body.tema-operativo {
  --fondo:      var(--gris-50);
  --superficie: var(--blanco);
  --borde:      var(--gris-200);
  --marca:      var(--azul-800);
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}