/* Copia generada de diseno/tokens.css. No editar acá: se edita en diseno/. */
/* Identidad "Caramelo" — tokens base. Ver diseno/identidad.md */

:root {
  /* Base */
  --color-fondo: #F4F1FF;        /* lila claro, fondo de página */
  --color-superficie: #FFFFFF;   /* tarjetas */
  --color-tinta: #2A1E5C;        /* texto principal (13:1 sobre fondo) */
  --color-tinta-suave: #5E5A7A;  /* texto secundario (5,9:1 sobre fondo) */
  --color-borde: #E2DCFA;

  /* Marca */
  --color-primario: #6D4AFF;        /* botones, links; texto blanco 5,2:1 */
  --color-primario-hover: #5B36F0;
  --color-sobre-primario: #FFFFFF;
  --color-error: #C81E3A;

  /* Categorías: color fuerte (formas, fondos de acento con texto tinta), suave (chips) y texto de chip */
  --cat-fidgets: #3DDC97;    --cat-fidgets-suave: #DDF8EC;    --cat-fidgets-texto: #0E6B47;
  --cat-clickers: #6EC8FF;   --cat-clickers-suave: #E2F4FF;   --cat-clickers-texto: #0B5A87;
  --cat-spinners: #FFD86E;   --cat-spinners-suave: #FFF4D6;   --cat-spinners-texto: #7A5600;
  --cat-flexis: #FFB38A;     --cat-flexis-suave: #FFEDE3;     --cat-flexis-texto: #9A3F14;
  --cat-didacticos: #FF8FC7; --cat-didacticos-suave: #FFE8F4; --cat-didacticos-texto: #9C1F63;

  /* Vidrio */
  --vidrio-fondo: rgba(255, 255, 255, 0.65);
  --vidrio-borde: rgba(255, 255, 255, 0.8);
  --vidrio-blur: 16px;

  /* Botones translúcidos (caramelo de vidrio). Contraste del texto blanco verificado ≥ 4,5:1
     sobre fondo lila, blanco y los 5 colores de categoría. */
  --boton-primario: linear-gradient(180deg, rgba(107, 72, 248, 0.9), rgba(91, 54, 240, 0.92));
  --boton-primario-hover: linear-gradient(180deg, rgba(91, 54, 240, 0.93), rgba(76, 40, 214, 0.95));
  --boton-oscuro: rgba(42, 30, 92, 0.82);            /* carrito: texto blanco ≥ 8:1 */
  --boton-vidrio: rgba(255, 255, 255, 0.55);         /* secundario: texto tinta ≥ 10:1 */
  --boton-vidrio-hover: rgba(255, 255, 255, 0.8);
  --boton-borde: rgba(255, 255, 255, 0.4);
  --boton-brillo: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(42, 30, 92, 0.18);
  --boton-blur: 12px;

  /* Tipografía */
  --fuente-titulos: 'Fredoka', system-ui, sans-serif;
  --fuente-texto: 'Nunito', system-ui, sans-serif;
  --texto-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
  --texto-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --texto-h2: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  --texto-h3: 1.25rem;
  --texto-base: 1rem;
  --texto-chico: 0.875rem;

  /* Forma y espacio */
  --radio-chico: 10px;
  --radio: 16px;
  --radio-grande: 28px;
  --radio-pildora: 999px;
  --sombra: 0 8px 24px rgba(42, 30, 92, 0.10);
  --sombra-hover: 0 14px 32px rgba(42, 30, 92, 0.16);
  --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 16px; --espacio-4: 24px;
  --espacio-5: 32px; --espacio-6: 48px; --espacio-7: 64px; --espacio-8: 96px;

  /* Movimiento */
  --dur-rapida: 150ms;
  --dur-base: 250ms;
  --dur-lenta: 450ms;
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-base: 0ms; --dur-lenta: 0ms; }
}