/* ============================================================
   WIPE SEGURO — Tokens de diseño (fase 4)
   ============================================================
   El ÚNICO sitio con los colores, tipografías, tamaños y anchos de la web.
   Paleta medida de la imagen de WoW Forever (docs/diseno/paleta-forever.md):
   azul del mapa de fondo, bronce del marco del emblema y crema de las letras.
   No es un rebranding: el logo, el nombre y las tipografías se mantienen.

   Puntos de corte (no usar otros): 600 · 900 · 1280 · 1920 · 2560 px.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@700;900&family=Rajdhani:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* ---- Colores de la imagen de Forever ---- */
  --fondo:          #03516b;  /* azul del mapa (tono medio): fondo de la página */
  --fondo-oscuro:   #012c3c;  /* zonas oscuras del mapa: tarjetas, menú, paneles */
  --superficie:     #0c425e;  /* azul del centro del emblema: superficies elevadas */
  --borde:          #036d8c;  /* zonas claras del mapa: bordes y separadores */
  --brillo:         #1286a2;  /* lo más luminoso del mapa: resaltes al pasar el ratón */
  --bronce-oscuro:  #67482c;  /* sombras del marco del emblema */
  --bronce:         #b18d67;  /* "entre dorado y azul": botones principales, marcos (NO para texto pequeño) */
  --bronce-claro:   #e9cdab;  /* brillos del marco: títulos y detalles dorados */
  --crema:          #f9f3e5;  /* letras del logo: texto principal */
  --texto:          var(--crema);
  --texto-tenue:    #bccac6;  /* crema mezclada con el fondo: texto secundario (contraste ≈ 5,6 sobre --fondo) */

  /* Los mismos colores en formato R,G,B para usarlos con transparencia: rgba(var(--bronce-rgb), .2) */
  --fondo-oscuro-rgb: 1, 44, 60;
  --superficie-rgb:   12, 66, 94;
  --borde-rgb:        3, 109, 140;
  --brillo-rgb:       18, 134, 162;
  --bronce-rgb:       177, 141, 103;
  --bronce-claro-rgb: 233, 205, 171;
  --crema-rgb:        249, 243, 229;

  /* ---- Colores con significado propio (no cambian con la paleta) ---- */
  --ok:        #80e880;   /* abierto, entregado, correcto */
  --ok-rgb:    80, 200, 80;
  --error:     #ff8080;   /* cerrado, error, borrar */
  --error-rgb: 255, 60, 60;
  --aviso:     #ffb347;   /* pendiente, avisos */
  --aviso-rgb: 255, 180, 30;
  --discord:   #5865F2;
  /* Colores oficiales de las clases de WoW y de dificultad: en el código del portal (CLASS_COLORS, difBadge) */

  /* ---- Tipografías ---- */
  --fuente-texto:  'Open Sans', sans-serif;
  --fuente-marca:  'Bebas Neue', sans-serif; /* "Wipe Seguro" en la cabecera */
  --fuente-titulo: 'Cinzel', serif;          /* el título de la web */
  --fuente-ui:     'Rajdhani', sans-serif;   /* menú, botones, etiquetas */

  /* ---- Tamaños fluidos: crecen del móvil (375 px) al ultrapanorámico (3440 px) ---- */
  --texto-base:  clamp(0.95rem, 0.9rem + 0.15vw, 1.15rem);
  --texto-peq:   clamp(0.8rem, 0.78rem + 0.1vw, 0.95rem);
  --titulo-1:    clamp(2rem, 1.4rem + 2.6vw, 4.2rem);
  --titulo-2:    clamp(1.35rem, 1.15rem + 0.8vw, 2.2rem);
  --titulo-3:    clamp(1.05rem, 1rem + 0.3vw, 1.35rem);

  /* ---- Espaciados, radios y sombras ---- */
  --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem;
  --radio:      8px;
  --radio-gr:   12px;
  --sombra:     0 6px 24px rgba(0, 0, 0, 0.35);

  /* ---- Anchos (las líneas de texto nunca se estiran de borde a borde) ---- */
  --ancho-texto:     75ch;
  --ancho-contenido: min(1400px, 92vw);
  --ancho-amplio:    min(2200px, 94vw);   /* tablas y panel del portal en pantallas grandes */
}