/* ============================================================
   COLECCIÓN "PINTA, SUEÑA Y EXPLORA"
   variables.css — Paleta oficial extraída del brief de NEO Editorial
   ============================================================ */

:root {
  /* ── PALETA OFICIAL ── */
  --cielo-renzo:      #4EC6FF;  /* celeste cielo */
  --verde-campo:      #7BCB5B;  /* verde naturaleza */
  --amarillo-sol:     #FFD54A;  /* amarillo cálido */
  --naranja-aventura: #FF8A39;  /* naranja vivo */
  --rosa-sueno:       #FFB3C1;  /* rosa suave */
  --marron-tierra:    #8D5A3C;  /* marrón tierra */
  --azul-noche:       #274B8F;  /* azul noche suave */
  --crema-papel:      #FFF6E5;  /* crema cálido */

  /* ── DERIVADAS ── */
  --celeste-claro:    #C2EFFE;
  --verde-menta:      #B6EAA0;
  --amarillo-claro:   #FFF3B0;
  --coral:            #FF6B6B;
  --turquesa:         #2ECBA1;
  --lila-suave:       #C8A9FA;
  --blanco-puro:      #FFFFFF;
  --gris-texto:       #3A3A3A;
  --gris-suave:       #666666;
  --borde-suave:      rgba(0,0,0,0.07);

  /* ── VARIANTES ACCESIBLES (WCAG AA) ──
     Mismos tonos de marca, ajustados en luminosidad para
     garantizar contraste ≥4.5:1 (texto normal) o ≥3:1 (texto grande)
     cuando se usan como texto o como fondo de texto pequeño. Los
     tokens originales de arriba se conservan para usos decorativos
     (formas, blobs, iconos sin texto, fondos grandes). */
  --naranja-texto:  #C1440E;  /* naranja-aventura oscurecido para texto/botones */
  --verde-texto:    #4C9430;  /* verde-campo oscurecido para texto grande */
  --cielo-texto:    #1E7FB8;  /* cielo-renzo oscurecido para texto grande */
  --verde-badge:    #3E8025;  /* verde para fondos de badge con texto blanco */
  --cielo-boton:    #6ED0FF;  /* cielo aclarado para botones con texto azul-noche */
  --lila-badge:     #D4BCFB;  /* lila aclarado para badge "Pronto" */
  --rosa-cta:       #D6336C;  /* rosa profundo para degradé del CTA final */
  --naranja-icono:  #E8650A;  /* punto medio: legible en botones circulares con ícono blanco sobre fondos claros u oscuros */

  /* ── TIPOGRAFÍA ── */
  --font-firma:    'Pacifico', cursive;          /* firma Marina Belén */
  --font-titulo:   'Fredoka', 'Nunito', sans-serif;  /* títulos de sección */
  --font-cuerpo:   'Nunito', 'Poppins', sans-serif;  /* texto general */

  /* ── ESCALAS ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ── ESPACIADOS ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── RADIOS ── */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 9999px;

  /* ── SOMBRAS ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.14);
  --shadow-color: 0 8px 30px rgba(78,198,255,0.25);

  /* ── TRANSICIONES ── */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   280ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── NAV ── */
  --nav-h: 72px;
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
    --text-5xl: 2.25rem;
    --text-6xl: 2.75rem;
  }
}