/* ==========================================================================
   Matmap · Tokens de diseño
   --------------------------------------------------------------------------
   Único sitio donde se declaran las variables globales de la marca.
   Ningún otro plugin debe declarar --mm-* en :root.

   Los plugins mantienen sus propios prefijos (--mmuxp-*, --cpf-*, --bc-*,
   --mmb-*), pero los derivan de aquí en lugar de repetir valores literales.
   ========================================================================== */

:root{

  /* ---------- Marca ----------------------------------------------------- */
  --mm-brand:        #3A3971;   /* azul corporativo Matmap */
  --mm-brand-ink:    #2C2B57;   /* hover del botón principal */
  --mm-brand-tint:   #F1F1F7;   /* fondo suave de marca */
  --mm-accent:       #E69130;   /* naranja: precio, estrellas, destacados */
  --mm-accent-ink:   #C97918;   /* hover sobre acento */

  /* ---------- Superficies ----------------------------------------------- */
  --mm-paper:        #FFFFFF;   /* fondo de tarjeta, modal, panel */
  --mm-wash:         #F6F6FA;   /* fondo de listado, cabecera de tabla */

  /* ---------- Texto ------------------------------------------------------ */
  --mm-ink:          #1A1A2E;   /* texto principal */
  --mm-ink-2:        #4C4C68;   /* texto secundario, ficha técnica */
  --mm-muted:        #74748C;   /* etiquetas, IVA, contadores */

  /* ---------- Líneas ----------------------------------------------------- */
  --mm-line:         #E3E3EC;
  --mm-line-strong:  #CFCFDC;

  /* ---------- Semánticos -------------------------------------------------
     El naranja es color de marca, NO significa "aviso". Los estados tienen
     su propia familia para que un precio no se lea como una advertencia.   */
  --mm-good:         #0E7C55;
  --mm-good-bg:      #E4F4ED;
  --mm-warn:         #8A5A00;
  --mm-warn-bg:      #FBF0DA;
  --mm-bad:          #B8382A;
  --mm-bad-bg:       #FBEAE7;

  /* ---------- Forma ------------------------------------------------------ */
  --mm-r-sm:         8px;
  --mm-r-md:         12px;
  --mm-r-lg:         16px;
  --mm-r-full:       999px;

  --mm-sh-1:         0 1px 2px rgba(26,26,46,.06);
  --mm-sh-2:         0 4px 16px rgba(26,26,46,.08);
  --mm-sh-3:         0 12px 32px rgba(26,26,46,.14);

  --mm-ease:         .18s cubic-bezier(.4,0,.2,1);


  /* ---------- Tipografía -------------------------------------------------
     Una sola pila para los once plugins. Antes había cinco distintas
     (-apple-system, system-ui, "Open Sans", Arial, y Plus Jakarta Sans
     descargada de Google en el blog). La pila de sistema no descarga nada,
     no bloquea el render y no produce salto de fuente.                     */
  --mm-font:      system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --mm-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Escala tipográfica. Fluida donde importa, fija donde debe ser estable. */
  --mm-fs-eyebrow: 11.5px;   /* antetítulos, etiquetas de tabla */
  --mm-fs-xs:      12px;     /* IVA, contadores, pies */
  --mm-fs-sm:      13.5px;   /* texto de apoyo */
  --mm-fs-base:    15px;     /* cuerpo y controles */
  --mm-fs-md:      16px;     /* cabecera de acordeón */
  --mm-fs-lg:      clamp(18px, 1.6vw, 20px);          /* subtítulo de bloque */
  --mm-fs-h2:      clamp(20px, 2vw,   26px);          /* título de sección */
  --mm-fs-h1:      clamp(22px, 2.4vw, 32px);          /* nombre de producto */

  /* Pesos: solo tres. Antes convivían 400, 500, 600, 650, 700, 800 y 900. */
  --mm-fw-normal:  400;
  --mm-fw-medium:  600;
  --mm-fw-bold:    700;

  --mm-lh-tight:   1.2;
  --mm-lh-base:    1.55;
  --mm-lh-loose:   1.65;

  /* Interletraje: negativo en titulares grandes, positivo en versalitas. */
  --mm-ls-title:  -.012em;
  --mm-ls-eyebrow: .07em;


  /* ---------- Ritmo vertical --------------------------------------------
     Distancia entre bloques de sección. Cada plugin traía la suya
     (18, 20, 28, 32, 36 px) y por eso la página se leía a saltos.          */
  --mm-flow:       48px;
  --mm-flow-tight: 28px;

  /* Altura común de todo lo pulsable */
  --mm-control-h:  46px;


  /* ======================================================================
     Compatibilidad
     ----------------------------------------------------------------------
     Nombres que ya estaban repartidos por las hojas de estilo existentes.
     Se mantienen como alias para no tener que reescribir cientos de var().
     No usar en código nuevo.
     ====================================================================== */
  --mm-primary:       var(--mm-brand);
  --mm-secondary:     var(--mm-accent);
  --mm-text:          var(--mm-ink);
  --mm-bg:            var(--mm-paper);
  --mm-surface:       var(--mm-wash);
  --mm-border:        var(--mm-line);
  --mm-border-strong: var(--mm-line-strong);
  --mm-radius:        var(--mm-r-lg);
  --mm-radius-sm:     var(--mm-r-md);
  --mm-shadow:        var(--mm-sh-2);
  --mm-shadow-soft:   var(--mm-sh-1);
  --mm-shadow-sm:     var(--mm-sh-1);
  --mm-shadow-lg:     var(--mm-sh-3);
  --mm-fade:          28px;   /* desvanecido lateral del carrusel */
  --mm-t:             var(--mm-ease);
}