/* =========================================================
   VossStore · Design tokens
   Único punto de verdad de color, tipografía y espaciado.
   (Al pasar a WordPress: estas variables van al :root del tema)
   ========================================================= */
:root{
  /* --- Superficies --- */
  --bg:            #08080B;
  --bg-elev:       #0C0C11;
  --surface:       #121218;
  --surface-2:     #191921;
  --surface-3:     #22222C;

  /* --- Líneas --- */
  --line:          rgba(255,255,255,.07);
  --line-2:        rgba(255,255,255,.13);

  /* --- Texto --- */
  --text:          #F4F4F7;
  --text-2:        #B6B6C4;
  --muted:         #7E7E8C;

  /* --- Acentos --- */
  --accent:        #4DE1FF;
  --accent-2:      #7B5CFF;
  --accent-3:      #3DDC97;   /* éxito / envío gratis */
  --warn:          #FFB84D;

  --grad:          linear-gradient(118deg, #4DE1FF 0%, #7B5CFF 100%);
  --grad-rev:      linear-gradient(118deg, #7B5CFF 0%, #4DE1FF 100%);
  --grad-soft:     linear-gradient(118deg, rgba(77,225,255,.14), rgba(123,92,255,.14));
  --grad-text:     linear-gradient(100deg, #FFFFFF 10%, #9FE9FF 45%, #B7A6FF 90%);

  /* --- Radios --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-full: 999px;

  /* --- Sombras --- */
  --sh-1: 0 8px 24px rgba(0,0,0,.35);
  --sh-2: 0 24px 70px rgba(0,0,0,.55);
  --sh-glow: 0 20px 60px rgba(77,225,255,.20);

  /* --- Tipografía --- */
  --ff-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --container: 1300px;
  --gutter: 22px;
  --header-h: 72px;
  --announce-h: 34px;

  /* --- Movimiento --- */
  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;
}

@media (max-width: 760px){
  :root{ --gutter: 18px; --header-h: 64px; --announce-h: 30px; }
}