/* ==========================================================================
   México Makers — Design Tokens
   Colors, type, spacing, radii, shadows
   ========================================================================== */

:root {
  /* --- BRAND COLORS --------------------------------------------------------
     Official values from México Makers brand guide (Guía express brand.pdf).
     Named in the guide as: Pictón azul, Rosa mexicano, Jet, Anti flash blanco.
     ------------------------------------------------------------------------ */
  /* Pictón azul — primary */
  --mm-cyan:        #1EA2DD;
  --mm-cyan-600:    #1890C6;   /* hover/pressed darker */
  --mm-cyan-700:    #147BAA;
  --mm-cyan-400:    #51B8E6;
  --mm-cyan-200:    #B6E0F3;
  --mm-cyan-50:     #E8F5FB;

  /* Rosa mexicano — accent */
  --mm-magenta:     #E12378;
  --mm-magenta-600: #C41D68;
  --mm-magenta-700: #A31657;
  --mm-magenta-400: #EA5B9A;
  --mm-magenta-200: #F5B5D0;
  --mm-magenta-50:  #FCE9F1;

  /* Brand-guide named neutrals */
  --mm-jet:         #383838;   /* body dark / display */
  --mm-anti-flash:  #EBEBEB;   /* brand off-white, subtle surfaces */

  /* --- FILAMENT PALETTE ---------------------------------------------------
     Named after México Makers' own PLA Pro filament line — these are the
     cultural color anchors the brand uses in product naming.
     ------------------------------------------------------------------------ */
  --mm-negro-xolo:       #1A1A1A;   /* Negro Xolo (xoloitzcuintle dog) */
  --mm-rojo-nochebuena:  #C8102E;   /* Rojo Nochebuena (poinsettia) */
  --mm-blanco-alcatraz:  #F7F5EF;   /* Blanco Alcatraz (calla lily) */
  --mm-amarillo-elote:   #F4C430;   /* Amarillo Elote (corn) */
  --mm-verde-iguana:     #3FA34D;   /* Verde Iguana */
  --mm-morado-bugambilia:#8B2C8A;   /* Morado Bugambilia */
  --mm-azul-esperanza:   #0E5FA4;   /* Azul Esperanza */
  --mm-azul-talavera:    #1F6FB5;   /* Azul Talavera */
  --mm-lobo-gris:        #8A8F96;   /* Lobo Gris */
  --mm-rojo-arcilla:     #9A3B1F;   /* Rojo Arcilla (seasonal) */

  /* --- NEUTRALS ------------------------------------------------------------ */
  --mm-ink:         var(--mm-jet);  /* darkest text — brand-guide Jet #383838 */
  --mm-ink-2:       #1F2A37;
  --mm-slate-700:   #334155;
  --mm-slate-500:   #64748B;
  --mm-slate-400:   #94A3B8;
  --mm-slate-300:   #CBD5E1;
  --mm-slate-200:   #E2E8F0;
  --mm-slate-100:   #F1F5F9;
  --mm-slate-50:    #F8FAFC;
  --mm-white:       #FFFFFF;

  /* --- SEMANTIC ------------------------------------------------------------ */
  --mm-success:     #15803D;
  --mm-warning:     #D97706;
  --mm-danger:      #DC2626;
  --mm-info:        var(--mm-cyan);

  /* --- FOREGROUND / BACKGROUND ROLES --------------------------------------- */
  --fg-1:           var(--mm-ink);        /* primary text */
  --fg-2:           var(--mm-slate-700);  /* secondary text */
  --fg-3:           var(--mm-slate-500);  /* muted */
  --fg-on-brand:    var(--mm-white);
  --fg-link:        var(--mm-cyan-600);
  --fg-link-hover:  var(--mm-cyan-700);

  --bg-1:           var(--mm-white);          /* page */
  --bg-2:           var(--mm-slate-50);       /* subtle surfaces */
  --bg-3:           var(--mm-slate-100);      /* hover surface */
  --bg-brand:       var(--mm-cyan);
  --bg-accent:      var(--mm-magenta);
  --bg-dark:        var(--mm-ink);

  --border-1:       var(--mm-slate-200);
  --border-2:       var(--mm-slate-300);
  --border-strong:  var(--mm-slate-400);

  /* --- TYPE: FAMILIES ------------------------------------------------------
     Montserrat is the official México Makers typeface — used for both
     display/wordmark and body copy. Geometric sans with excellent weight
     range (400 → 900). JetBrains Mono for technical specs.
     ------------------------------------------------------------------------ */
  --font-display:   'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:      'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- TYPE: SCALE (rem, 16px base) ---------------------------------------- */
  --fs-xs:          0.75rem;   /* 12 */
  --fs-sm:          0.875rem;  /* 14 */
  --fs-base:        1rem;      /* 16 */
  --fs-md:          1.125rem;  /* 18 */
  --fs-lg:          1.25rem;   /* 20 */
  --fs-xl:          1.5rem;    /* 24 */
  --fs-2xl:         1.875rem;  /* 30 */
  --fs-3xl:         2.25rem;   /* 36 */
  --fs-4xl:         3rem;      /* 48 */
  --fs-5xl:         3.75rem;   /* 60 */
  --fs-6xl:         4.5rem;    /* 72 */

  /* --- TYPE: WEIGHTS ------------------------------------------------------- */
  --fw-regular:     400;   /* @kind font */
  --fw-medium:      600;   /* @kind font */
  --fw-bold:        700;   /* @kind font */
  --fw-black:       900;   /* @kind font */

  /* --- TYPE: LINE HEIGHTS -------------------------------------------------- */
  --lh-tight:       1.05;  /* @kind font */
  --lh-snug:        1.2;   /* @kind font */
  --lh-normal:      1.45;  /* @kind font */
  --lh-relaxed:     1.6;   /* @kind font */

  /* --- LETTER SPACING (wordmark is TIGHT but caps eCommerce headings track wider) */
  --ls-display:     -0.02em;   /* @kind font */
  --ls-cap:         0.04em;     /* @kind font */ /* "CATEGORIAS", "IMPRESORAS 3D" section headers */

  /* --- SPACING (4-pt scale) ------------------------------------------------ */
  --sp-0:  0;     /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- RADII ---------------------------------------------------------------
     Cards sit at ~4–8px (Shopify Dawn-style restraint). Pills fully rounded.
     The BRAND shape (speech bubble / heart) is organic — the UI is not. Keep
     chrome calm so product imagery and filament color swatches pop.
     ------------------------------------------------------------------------ */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* --- SHADOWS ------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 32, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 32, 0.08), 0 1px 2px rgba(15,23,32,0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 32, 0.08);
  --shadow-lg:  0 12px 32px rgba(15, 23, 32, 0.12);
  --shadow-brand: 0 8px 24px rgba(41, 171, 226, 0.28);  /* cyan glow for CTAs */

  /* --- MOTION -------------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:       120ms;   /* @kind other */
  --dur-med:        200ms;   /* @kind other */
  --dur-slow:       320ms;   /* @kind other */

  /* --- LAYOUT -------------------------------------------------------------- */
  --container:      1280px;  /* @kind spacing */
  --container-wide: 1440px;  /* @kind spacing */
  --hit-target:     44px;    /* @kind spacing */
}

/* ==========================================================================
   FONT IMPORT — Google Fonts (SUBSTITUTION, see README)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   SEMANTIC ELEMENTS
   ========================================================================== */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg-1);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-5xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); font-weight: var(--fw-black); }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-md);  font-weight: var(--fw-bold); }

/* Section heading — ALL CAPS, wide track, divider underneath (site motif) */
.mm-section-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  color: var(--fg-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-1);
  margin: 0 0 var(--sp-6);
}

/* "Sub-section" / eyebrow — used above section headings ("BAMBU LAB") */
.mm-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  color: var(--mm-cyan);
}

p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

small, .mm-caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, kbd, .mm-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

/* Price — site uses bold ink + strikethrough "regular price" + red savings */
.mm-price        { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--fg-1); }
.mm-price--old   { color: var(--fg-3); text-decoration: line-through; font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.mm-price--save  { color: var(--mm-magenta); font-weight: var(--fw-bold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-cap); }