/* ==========================================================================
   DESIGN SYSTEM PIGYFANTE 2.0 — TOKENS
   Extraídos por medición de "Pigyfante Tienda.dc.html" (fuente de verdad).
   Frecuencias reales de uso en el prototipo indicadas en comentario.
   ========================================================================== */

:root{
  /* --- Color -------------------------------------------------------------- */
  --pf-azul:          #1a2a6e;   /* 736 usos — color principal de marca */
  --pf-azul-medio:    #646e9a;   /* 374 */
  --pf-azul-claro:    #e8eaf3;   /* 368 — fondos suaves */
  --pf-azul-int:      #4c5689;   /* 250 */
  --pf-rosa:          #ff5c8a;   /* 247 — acento / llamadas a la acción */
  --pf-rosa-osc:      #c42558;   /*  56 — hover del acento */
  --pf-verde:         #0b7c69;   /*  68 — éxito */
  --pf-verde-claro:   #eafbfb;   /*  66 */
  --pf-fondo:         #f3f5fb;   /* 106 */
  --pf-fondo-2:       #fafbfe;   /*  98 */
  --pf-blanco:        #ffffff;
  --pf-texto:         var(--pf-azul);
  --pf-texto-suave:   var(--pf-azul-medio);
  --pf-borde:         var(--pf-azul-claro);

  /* Estados */
  --pf-error:         #c42558;
  --pf-aviso:         #b06a00;
  --pf-exito:         var(--pf-verde);

  /* --- Tipografía --------------------------------------------------------- */
  --pf-font:          'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pf-font-alt:      'Figtree', system-ui, sans-serif;
  --pf-font-serif:    'Cormorant Garamond', Georgia, serif;
  --pf-font-script:   'Caveat', cursive;
  --pf-font-mono:     ui-monospace, Menlo, monospace;

  /* --- Escalas responsive (mismo sistema que el prototipo) ---------------- */
  --arch:  26px;   /* títulos    */
  --body:  14px;   /* cuerpo     */
  --chero: 172px;  /* héroe      */
  --gut:   12px;   /* canaleta   */

  /* --- Radios, sombras, transiciones -------------------------------------- */
  --pf-radio:      12px;
  --pf-radio-sm:    8px;
  --pf-radio-lg:   20px;
  --pf-sombra:     0 2px 8px rgba(26,42,110,.08);
  --pf-sombra-md:  0 6px 20px rgba(26,42,110,.12);
  --pf-trans:      .18s ease;

  /* --- Contenedor --------------------------------------------------------- */
  --pf-max:        1200px;
}

@media (min-width:768px){
  :root{ --arch:32px; --body:15px; --chero:208px; --gut:16px; }
}
@media (min-width:1024px){
  :root{ --arch:38px; --body:16px; --chero:248px; --gut:20px; }
}
@media (min-width:1280px){
  :root{ --arch:44px; --chero:288px; }
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}