/**
 * ProSportChile — Design Tokens
 * Fuente única de verdad visual. Ningún otro CSS debe usar valores de
 * color/espaciado/radio fuera de estas variables.
 *
 * La paleta NO es inventada ni heredada de Premioplus: son los valores
 * reales de progambling.bet/chile, medidos sobre estilos computados del
 * DOM en vivo. Los dorados salen de muestrear los píxeles del logo.
 * Ver docs/decisiones-fase1.md.
 */
:root {
  /* ---- Violetas de marca (Progambling) ---- */
  --violet-primary: #440073;   /* píldora activa — acento estructural */
  --violet-accent: #8a2be2;    /* degradados, hover, glow */
  --violet-deep: #2a0847;      /* paso intermedio para degradados */

  /* ---- Oro: ÚNICO color de acción ---- */
  --cta: #ffd200;              /* todos los botones primarios */
  --cta-hover: #ffdc3d;
  --cta-ink: #170d1c;          /* texto sobre oro */
  --gold-brand: #ffce10;       /* SOLO logotipo */

  /* ---- Fondos y superficies ---- */
  --bg-base: #130516;          /* fondo global, plano */
  --bg-surface: #230e2f;       /* tarjetas, botón secundario */
  --bg-elevated: #251233;      /* hover, píldoras, campos */
  --bg-banner: #210c2c;        /* detrás de banners */
  --bg-bottomnav: #180d1d;     /* barra inferior mobile */
  --bg-overlay: rgba(19, 5, 22, 0.9);
  --bg-glass: rgba(35, 14, 47, 0.72);

  /* ---- Texto ---- */
  --text-primary: #ffffff;
  --text-body: #c9c0d2;        /* agregado: la plataforma casi no tiene
                                  texto corrido, una landing sí. 9.4:1 */
  /* Subido de #8c8989 a #a09da4 al aclararse el fondo global: contra los
     puntos mas iluminados del degradado el gris viejo caia a 3.96:1, por
     debajo del minimo de 4.5. El nuevo mide 5.15:1 ahi y mejora en el
     resto. Lleva una pizca de violeta para no leerse como gris pegado. */
  --text-secondary: #a09da4;   /* el de Progambling. 5.7:1, pasa AA */
  --text-muted: #6f6478;
  --text-on-gold: #170d1c;

  /* ---- Bordes ---- */
  --border: #4b2f5e;
  /* Idem: #33203f quedaba MAS OSCURO que el fondo nuevo en las zonas
     iluminadas y los separadores desaparecian. */
  --border-soft: #452f56;
  --border-gold: rgba(255, 210, 0, 0.4);

  /* ---- Semántico (nunca decorativo) ---- */
  /* --- EN VIVO ---
     Estado semantico, no decoracion. Significa UNA cosa y solo una:
     "este evento esta ocurriendo ahora". Nunca se usa en botones,
     enlaces ni superficies normales — si aparece este color, hay un
     partido en curso.

     El valor NO es una eleccion estetica: #e45881 es exactamente el
     rosa del badge LIVE del sportsbook real (medido en vivo el 26/08 en
     442hattrick, el proveedor que sirve Deportes en progambling.bet).
     Reutilizarlo hace que la señal que el usuario aprende en la landing
     sea la misma que va a reconocer dentro del producto.

     Se separa a proposito de --danger (#ff5c6c): "en vivo" es una
     novedad, no un error, y mezclarlos volveria ambiguo el rojo. */
  --live: #e45881;
  /* Tinta OSCURA sobre el rosa, no blanca. El producto real pone blanco
     y da 3.49:1 — por debajo de AA para texto chico, y el badge es de
     10px. Con #170d1c sube a 5.41:1 sin tocar el rosa, que es la parte
     que hace de señal. Ademas queda coherente con --badge--gold, que ya
     usa tinta oscura sobre relleno vivo. */
  --live-ink: #170d1c;
  --live-soft: rgba(228, 71, 129, 0.14);   /* fondos y rellenos tenues */
  --live-line: rgba(228, 88, 129, 0.45);   /* bordes de tarjeta en vivo */
  --live-glow: 0 0 16px -2px rgba(228, 88, 129, 0.5);

  --success: #3dd68c;
  --warning: #ffb020;
  --danger: #ff5c6c;

  /* ---- Color por deporte (sistema real heredado) ---- */
  --sport-futbol: #8a2be2;
  --sport-basquet: #ffd200;
  --sport-tenis: #ff1493;
  --sport-americano: #32cd32;
  --sport-motor: #ff4b2b;
  --sport-beisbol: #ff7f50;
  --sport-virtual: #00bfff;
  --sport-mma: #ffa500;

  /* ---- Contorno neon violeta ----
     Estado FIJO de Apuestas deportivas y Proveedores. Misma familia que
     el hover (--hov-ring / --hov-halo de components.css): el mismo
     violeta #8a2be2 para el halo y el #9747ff del glow ambiental para
     la linea, para que se lea como un solo sistema y no como dos
     efectos distintos.

     Deliberadamente por DEBAJO del hover en intensidad: la linea es de
     1px y el halo tiene la mitad de alcance que el de hover (14px
     contra 30px). Asi el estado fijo se percibe como identidad y el
     hover sigue teniendo una respuesta visible encima.

     Se resuelve con box-shadow y no con border: el ring de box-shadow
     se pinta FUERA de la caja y no ocupa layout, que es lo unico que
     permite ponerselo a los chips de Proveedores sin robarle 2px a la
     imagen (ahi la imagen tiene que medir 134x62 exactos). */
  --neon-line: 0 0 0 1px rgba(151, 71, 255, 0.5);
  --neon-glow: 0 0 14px -3px rgba(138, 43, 226, 0.55);

  /* ---- Fondo global ----
     Una sola superficie para toda la pagina: glows radiales apilados sobre
     un degradado vertical. Los radios van en PORCENTAJE, no en px — el
     documento mide varios miles de pixeles y un radio fijo dejaria zonas
     apagadas en las partes mas largas; en % cada glow escala con el alto
     real y los 14 se solapan siempre, sin cortes entre secciones.

     Violeta mas presente que el de Premioplus: se apoya en el #440073 y el
     #8a2be2 reales de Progambling en vez de un lila generico, con opacidades
     que suben sin llegar al neon (los textos mantienen su contraste).

     Cada glow se apaga con SU PROPIO color en alfa 0, nunca con la palabra
     `transparent`. `transparent` es negro transparente: al interpolar en
     sRGB el degradado pasa por negro antes de desaparecer, y ese
     oscurecimiento dibuja un canto diagonal nitido justo donde dos glows
     se cruzan — exactamente el corte visible que no queremos. Con el
     mismo color en alfa 0 solo interpola la opacidad y el borde
     desaparece. */
  --grad-sky:
    radial-gradient(68% 16% at 14% 2%, rgba(138, 43, 226, 0.30), rgba(138, 43, 226, 0) 78%),
    radial-gradient(58% 13% at 88% 8%, rgba(68, 0, 115, 0.42), rgba(68, 0, 115, 0) 76%),
    radial-gradient(72% 17% at 6% 15%, rgba(91, 20, 168, 0.32), rgba(91, 20, 168, 0) 80%),
    radial-gradient(60% 15% at 92% 23%, rgba(138, 43, 226, 0.24), rgba(138, 43, 226, 0) 78%),
    radial-gradient(70% 17% at 10% 31%, rgba(68, 0, 115, 0.38), rgba(68, 0, 115, 0) 80%),
    radial-gradient(54% 13% at 86% 39%, rgba(255, 210, 0, 0.05), rgba(255, 210, 0, 0) 74%),
    radial-gradient(72% 18% at 8% 47%, rgba(91, 20, 168, 0.34), rgba(91, 20, 168, 0) 80%),
    radial-gradient(62% 15% at 93% 55%, rgba(138, 43, 226, 0.26), rgba(138, 43, 226, 0) 78%),
    radial-gradient(56% 14% at 12% 62%, rgba(255, 210, 0, 0.045), rgba(255, 210, 0, 0) 74%),
    radial-gradient(68% 17% at 88% 70%, rgba(68, 0, 115, 0.38), rgba(68, 0, 115, 0) 80%),
    radial-gradient(72% 18% at 7% 78%, rgba(91, 20, 168, 0.32), rgba(91, 20, 168, 0) 80%),
    radial-gradient(60% 15% at 91% 85%, rgba(138, 43, 226, 0.24), rgba(138, 43, 226, 0) 78%),
    radial-gradient(74% 19% at 16% 92%, rgba(68, 0, 115, 0.36), rgba(68, 0, 115, 0) 80%),
    radial-gradient(76% 20% at 26% 99%, rgba(91, 20, 168, 0.30), rgba(91, 20, 168, 0) 82%),
    linear-gradient(180deg,
      #180630 0%, #1d0838 13%, #170629 27%, #1c0836 41%,
      #180630 55%, #1e0a3a 69%, #170629 83%, #1a0733 100%);

  /* ---- Degradados ---- */
  --grad-hero: linear-gradient(135deg, #2a0847 0%, #440073 48%, #130516 100%);
  --grad-cta: linear-gradient(135deg, #ffdc3d 0%, #ffd200 55%, #e6bd00 100%);
  --grad-card-veil: linear-gradient(to top, rgba(19, 5, 22, 0.96) 0%, rgba(19, 5, 22, 0.35) 58%, transparent 100%);
  --grad-vip: linear-gradient(150deg, rgba(68, 0, 115, 0.85) 0%, rgba(35, 14, 47, 0.9) 55%, rgba(19, 5, 22, 0.95) 100%);

  /* ---- Glows (separan secciones sin inventar color) ---- */
  --glow-violet: rgba(138, 43, 226, 0.22);
  --glow-gold: rgba(255, 210, 0, 0.14);

  /* ---- Sombras ---- */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 6px 18px rgba(0, 0, 0, 0.5);
  --elev-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  --elev-cta: 0 6px 20px rgba(255, 210, 0, 0.22);

  /* ---- Radios: compactos, como Progambling ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* ---- Espaciado (base 4px) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;

  /* ---- Layout ---- */
  --container: 1280px;
  --pad-x: 16px;
  --header-h: 60px;
  /* 67px es el alto REAL de la barra, medido: 5 de padding + 56 de fila
     + 5 + 1 de borde. Decia 62 y el body reservaba 5px de menos, asi que
     el final de la pagina quedaba debajo de la barra. */
  --bottomnav-h: 67px;

  /* ---- Tipografía ---- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Poppins", -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(1.9rem, 1.15rem + 3.6vw, 3.6rem);
  --fs-h2: clamp(1.45rem, 1.1rem + 1.6vw, 2.3rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 140ms;
  --d-mid: 240ms;
  --d-slow: 560ms;

  /* Objetivo táctil mínimo. Progambling tiene CTAs de 30px y flechas de
     24px — medido. Acá nada accionable baja de esto. */
  --tap: 44px;
}

@media (min-width: 640px) {
  :root { --pad-x: 24px; --header-h: 68px; }
}
@media (min-width: 1024px) {
  :root { --pad-x: 32px; --header-h: 76px; }
}