/* ==========================================================================
   MIL ASADOS — Design Tokens (Design System v1.1)
   --------------------------------------------------------------------------
   Única fuente de verdad del lenguaje visual. Ningún otro archivo debe
   declarar colores, fuentes ni medidas de layout en crudo: siempre var(--x).
   Cambiar un valor acá lo cambia en todo el sitio.
   ========================================================================== */

:root{
  /* --- Superficies oscuras ----------------------------------------------- */
  --bg:#0c0b0a;          /* fondo base */
  --bg2:#100e0c;         /* fondo alterno, para escalonar secciones */
  --warm:#161009;        /* fondo cálido */
  --panel:#15120f;       /* superficie de card */
  --panel2:#1b1714;      /* superficie de card elevada */

  /* --- Superficies claras (secciones crema) ------------------------------ */
  --cream:#f3efe8;
  --cream2:#e9e3d8;
  --ink-dark:#1c1714;    /* texto sobre crema */

  /* --- Líneas y bordes ---------------------------------------------------- */
  --line:rgba(220,210,200,.10);
  --line2:rgba(220,210,200,.18);

  /* --- Acero y texto ------------------------------------------------------ */
  --steel:#cfd2d6;       /* texto secundario destacado */
  --steel-d:#9aa0a6;     /* texto terciario */
  --ink:#f2ece4;         /* texto principal sobre oscuro */
  --muted:#9b938a;       /* texto de apoyo */
  --muted-d:#847d75;     /* apoyo mínimo: el más tenue que cumple AA sobre --bg
                            (4.97:1). No usar nada más oscuro para texto. */

  /* --- Fuego (acento de marca) -------------------------------------------- */
  --ember:#ff6a1a;
  --ember-2:#ff8338;
  --ember-d:#d8470f;
  --ember-soft:rgba(255,106,26,.16);

  /* --- Rojo de la cinta "El original" --------------------------------------
     Sale del packaging, no de la paleta de fuego. Se usa SÓLO en .ribbon.
     Blanco sobre este rojo da 5.59:1 (AA para texto normal). No usarlo como
     color de texto sobre --bg: ahí queda en 3.52:1 y no llega.             */
  --red:#D2001D;
  --red-2:#CD001C;       /* punta oscura del degradado */
  --red-3:#DB001E;       /* punta clara del degradado */

  /* --- Advertencia ---------------------------------------------------------
     Ámbar, y no el naranja de marca: el bloque de ADVERTENCIA está pegado al
     CTA de compra, y si compartieran color se leerían como lo mismo. Tampoco
     el rojo de la cinta, que es identidad y no señal. Este ámbar sobre --bg
     da 9.6:1, muy por encima del mínimo AA.                                */
  --warn:#e8b23a;
  --warn-line:rgba(232,178,58,.42);
  --warn-soft:rgba(232,178,58,.07);

  /* --- Layout -------------------------------------------------------------- */
  --maxw:1180px;         /* ancho máximo de contenido */

  /* --- Tipografía ----------------------------------------------------------
     f-disp : títulos display (H1, H2, precios)
     f-ui   : UI, botones, eyebrows, badges, marca
     f-body : cuerpo de texto                                                */
  --f-disp:"Barlow Condensed",system-ui,sans-serif;
  --f-ui:"Montserrat",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
}