/* ============================================
   SmashPlay · Design Tokens
   Sistema único compartido por las 8 páginas.
   Tocar aquí = cambio en toda la landing.
   ============================================ */

:root {

  /* ---- COLORES DE MARCA ---- */
  --sp-verde:        #C8E63C;   /* Verde lima. CTAs primarios, acentos. */
  --sp-azul:         #00AADC;   /* Azul cian. Links, hover, headings secundarios. */
  --sp-negro:        #2B2C2E;   /* Negro carbón. Texto principal, fondos oscuros. */

  /* ---- COLORES NEUTROS ---- */
  --sp-blanco:       #FFFFFF;
  --sp-gris-50:      #FAFAFA;   /* Hover muy sutil. */
  --sp-gris-100:     #F5F5F5;   /* Fondos de sección alternos, cards. */
  --sp-gris-200:     #E5E5E5;   /* Bordes sutiles, separadores. */
  --sp-gris-400:     #8A8A8A;   /* Texto secundario, captions. */
  --sp-gris-600:     #4A4A4A;   /* Texto secundario sobre blanco. */
  --sp-gris-800:     #1F1F20;   /* Texto sobre fondos claros, contraste alto. */

  /* ---- COLORES SEMÁNTICOS ---- */
  --sp-exito:        #16A34A;
  --sp-error:        #DC2626;
  --sp-aviso:        #F59E0B;

  /* ---- COLORES DERIVADOS (con transparencia) ---- */
  --sp-verde-glow:   rgba(200, 230, 60, 0.35);
  --sp-azul-glow:    rgba(0, 170, 220, 0.20);
  --sp-negro-alpha-70: rgba(43, 44, 46, 0.7);
  --sp-blanco-alpha-70: rgba(255, 255, 255, 0.7);
  --sp-blanco-alpha-10: rgba(255, 255, 255, 0.1);

  /* ---- TIPOGRAFÍA · FAMILIAS ---- */
  --font-display:    'Archivo Black', 'Archivo', sans-serif;   /* Heroes, H1 impacto */
  --font-heading:    'Archivo', sans-serif;                     /* H2, H3, botones */
  --font-body:       'Rubik', sans-serif;                       /* Párrafos, FAQ, navegación */

  /* ---- TIPOGRAFÍA · TAMAÑOS DESKTOP ---- */
  --fs-hero:         64px;   /* Hero H1 */
  --fs-h1:           48px;   /* H1 de sección */
  --fs-h2:           36px;   /* H2 */
  --fs-h3:           24px;   /* H3 */
  --fs-lg:           20px;   /* Body grande, subtítulos */
  --fs-md:           17px;   /* Body normal */
  --fs-sm:           15px;   /* Navegación, labels */
  --fs-xs:           13px;   /* Captions */
  --fs-btn:          14px;   /* Botones, badges */

  /* ---- TIPOGRAFÍA · ALTURA DE LÍNEA ---- */
  --lh-tight:        1.1;    /* Heroes */
  --lh-snug:         1.3;    /* Subtítulos largos */
  --lh-normal:       1.5;    /* H3 */
  --lh-relaxed:      1.6;    /* Body */

  /* ---- TIPOGRAFÍA · PESOS ---- */
  --fw-normal:       400;
  --fw-medium:       500;
  --fw-bold:         700;

  /* ---- ESPACIADO (escala de 8px) ---- */
  --sp-xs:           4px;
  --sp-sm:           8px;
  --sp-md:           16px;
  --sp-lg:           24px;
  --sp-xl:           40px;
  --sp-2xl:          64px;
  --sp-3xl:          96px;
  --sp-4xl:          120px;

  /* ---- LAYOUT ---- */
  --container-max:   1200px;
  --container-padding: 24px;
  --breakpoint-md:   768px;

  /* ---- BORDES ---- */
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-pill:     100px;

  /* ---- SOMBRAS ---- */
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:       0 8px 24px rgba(0,0,0,0.08);
  --shadow-cta:      0 4px 12px var(--sp-verde-glow);
  --shadow-cta-hover: 0 6px 18px rgba(200, 230, 60, 0.5);

  /* ---- TRANSICIONES ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ---- Z-INDEX ---- */
  --z-header:        50;
  --z-modal:         100;
}

/* ---- TAMAÑOS MÓVIL (override en breakpoint) ---- */
@media (max-width: 768px) {
  :root {
    --fs-hero:       40px;
    --fs-h1:         32px;
    --fs-h2:         26px;
    --fs-h3:         20px;
    --fs-lg:         18px;
    --fs-md:         16px;
    --container-padding: 20px;
    --sp-2xl:        48px;
    --sp-3xl:        64px;
    --sp-4xl:        80px;
  }
}