/* ============================================================
   MAGANDHI · TOKENS VIGENTES DE MARCA (tienda pública)
   ------------------------------------------------------------
   Fuente única de color para magandhi.com. La identidad aprobada usa
   terracota, negro, dorado y arena cálida. Los componentes consumen estos
   tokens por función; no deben volver a colores históricos ni inventar
   variantes por categoría.
   ============================================================ */
:root{
  /* ---- Rojo de marca (escala) ---- */
  --red-900:#5C1F1C;   /* texto sobre fondos claros, hover de botón oscuro */
  --red-700:#7A2A26;   /* estados hover/active de botones */
  --red-600:#98332D;   /* bordes o iconos secundarios */
  --red-500:#A6332E;   /* ROJO PRINCIPAL de marca */
  --red-400:#BF5450;   /* acentos suaves, links, precio secundario */
  --red-100:#F4E2E0;   /* fondos de sección muy sutiles, badges */
  --red-50:#FBF1F0;    /* fondo de tarjeta/hover muy leve */

  /* ---- Neutros ---- */
  --black-900:#111111; /* texto principal, footer */
  --cream-50:#FAF6F1;  /* crema casi-blanco (usado como "blanco" de marca) */
  --cream-100:#F2ECE4; /* fondo de tarjetas sobre el fondo general */
  --gray-500:#6B6660;  /* texto secundario, descripciones */

  /* ---- Fondo de pagina (arena calido) ----
     Fondo general de la tienda. ARENA CALIDO para que las tarjetas de producto
     (blanco puro --ml-panel #FFFFFF) contrasten y resalten; antes el fondo era
     tan claro (#FAF6F1) que los productos se perdian. Solo afecta al fondo de
     pagina (body): las tarjetas blancas NO cambian. */
  --fondo-pagina:#EFE7DD;

  /* ---- Acento ÁMBAR de marca (FIJO, igual para toda la tienda) ----
     Paleta reducida (presentación estilo Mercado Libre): el acento ya NO
     cambia por categoría; es un solo ámbar cálido de la familia MAGANDHI,
     que dialoga con el terracota. Se usa en detalles pequeños (filo, sello,
     estrellas), nunca como marco/fondo grande junto al rojo. */
  --acento:#C28A3A;        /* ámbar cálido de marca */
  --acento-cl:#D9AE6E;     /* ámbar claro (tintes, bordes de acento suaves) */
  --acento-sombra:rgba(194,138,58,.16);

  /* ---- Verde de confianza (uso puntual) ----
     El verde de "Compra verificada". Se usa SOLO para señales concretas de
     confianza/verificación (nunca como color decorativo general). */
  --verde:#1B7A46;
  --verde-sombra:rgba(27,122,70,.14);

  /* ---- Neutros estilo Mercado Libre (vitrina en blanco) ----
     El producto se exhibe sobre BLANCO con un borde gris muy tenue y una
     sombra sutil al hover (sin teñir de color). */
  --ml-panel:#FFFFFF;             /* fondo donde se exhibe el producto */
  --ml-borde:rgba(17,17,17,.09);  /* línea tenue de la tarjeta (ML) */
  --ml-borde-hover:rgba(17,17,17,.16); /* línea un poco más marcada al hover */
  --ml-sombra:0 1px 3px rgba(17,17,17,.06);          /* reposo */
  --ml-sombra-hover:0 10px 28px rgba(17,17,17,.12);  /* elevada al hover */

  /* ============================================================
     ALIAS semánticos: los nombres que usa el CSS de las páginas
     apuntan a los tokens de arriba. Así el código de cada página
     no necesita conocer los hex, solo el rol.
     ============================================================ */
  --rojo:var(--red-500);
  --rojo-osc:var(--red-700);   /* hover: MÁS OSCURO (sólido, no clickbait) */
  --rojo-prof:var(--red-900);
  --negro:var(--black-900);
  --tinta:#1C1C1C;
  --blanco:var(--cream-50);    /* "blanco" de la marca = crema */
  --tarjeta:var(--cream-100);  /* tarjetas sobre el fondo general */
  --hueso:var(--cream-50);
  --gris:var(--gray-500);
  --gris-cl:#9A938B;
  --linea:rgba(17,17,17,.10);
}