/* =========================================================
   TOKENS DE GEOSTORE — hoja compartida
   =========================================================

   UN SOLO SITIO PARA LOS VALORES DE LA MARCA.

   Antes esto estaba copiado en cinco hojas con cinco prefijos
   distintos: --home-* (inicio), --contact-* (contacto), --rc26-*
   (red_cors), --clients-* (clientes) y --admin-* (administrador). Los
   mismos colores escritos cinco veces, con deriva: el mismo gris salía
   0.052 en una hoja, 0.055 en otra y 0.06 en la tercera.

   De dónde salen estos valores: de medir contacto.css y red_cors.css,
   que comparten sistema (17 tokens, 14 idénticos). Son las dos hojas
   más recientes y las de las pantallas donde el cliente decide.

   Los radios son la excepción y conviene decirlo: esas hojas declaran
   un --radius de 18px y luego usan diez radios distintos por su cuenta,
   con !important repartido. No había escala que copiar, así que aquí se
   consolida una, con los valores más frecuentes de las dos.

   CÓMO SE USA: cárgala ANTES que la hoja de la página.

     <link rel="stylesheet" href="/tokens.css?v=...">
     <link rel="stylesheet" href="/productos.css?v=...">

   Y usa siempre un valor de respaldo en var(), por si esta hoja no
   llegara a cargar:  var(--tienda-radio, 18px)

   MIGRACIÓN: las hojas viejas siguen con sus prefijos y funcionan. Se
   van pasando a estos tokens cuando se toque cada una, no todas de
   golpe.
========================================================= */

:root {
  /* ── Tinta y fondo ─────────────────────────────────── */
  --tienda-negro: #000000;
  --tienda-negro-suave: #080808;
  --tienda-blanco: #ffffff;
  --tienda-texto: #f2f2f2;
  --tienda-apagado: #a9a9a9;

  /* ── Superficies ───────────────────────────────────── */
  --tienda-superficie: rgba(255, 255, 255, 0.052);
  --tienda-superficie-alta: rgba(255, 255, 255, 0.075);
  --tienda-borde: rgba(255, 255, 255, 0.10);
  --tienda-borde-suave: rgba(255, 255, 255, 0.075);

  /* El degradado de los paneles destacados y los héroes. */
  --tienda-panel: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.025)
  );

  /* ── Marca ─────────────────────────────────────────── */
  --tienda-oro: #f3b334;
  --tienda-oro-claro: #ffd064;
  --tienda-oro-oscuro: #d49c25;
  --tienda-oro-suave: rgba(243, 179, 52, 0.12);
  --tienda-verde: #266b58;
  --tienda-oliva: #959e3c;

  /* ── Señales ───────────────────────────────────────── */
  --tienda-exito: #38b277;
  --tienda-error: #ef5350;
  --tienda-aviso: #ffd27a;

  /* ── Radios: héroe, panel, control, píldora ────────── */
  --tienda-radio-heroe: 22px;
  --tienda-radio: 18px;
  --tienda-radio-control: 12px;

  /* ── Sombras ───────────────────────────────────────── */
  --tienda-sombra: 0 16px 44px rgba(0, 0, 0, 0.25);
  --tienda-sombra-alta: 0 22px 65px rgba(0, 0, 0, 0.48);
  --tienda-foco: 0 0 0 3px rgba(243, 179, 52, 0.18);

  /* ── Fondo de página ───────────────────────────────── */
  --tienda-fondo:
    radial-gradient(
      900px 580px at 88% 5%,
      rgba(243, 179, 52, 0.09),
      transparent 68%
    ),
    radial-gradient(
      850px 560px at 5% 95%,
      rgba(38, 107, 88, 0.12),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #000000 0%,
      #080808 50%,
      #000000 100%
    );
}