/* ==========================================================================
   MIMSHACK FORGE — DESIGN TOKENS
   Global CSS custom properties. Elementor's Global Colors / Global Fonts
   should be mapped to these same values (done once in Elementor > Site
   Settings so the visual editor and the coded theme never drift apart).
   ========================================================================== */

:root{
  /* ---- Colour tokens — matched to the official Mimzo brand sheet ---- */
  --ms-color-primary-blue: #0B5ED7; /* Mimshack Blue — Trust, Tech, Professionalism */
  --ms-color-deep-navy:    #1F2937; /* Charcoal — Balance, Modernity */
  --ms-color-gold-accent:  #F4B000; /* Gold — Success, Growth, Value */
  --ms-color-silver:       #E6E6E6; /* Silver/White — Clarity, Clean, Simplicity */
  --ms-color-white:        #FFFFFF;
  --ms-color-bg-light:     #F5F7FB;
  --ms-color-bg-dark:      #1F2937;
  --ms-color-text:         #16213E;
  --ms-color-text-muted:   #5B6478;
  --ms-color-border:       #E3E7F0;

  /* ---- Typography tokens ---- */
  --ms-font-display: "Sora", "Poppins", sans-serif;
  --ms-font-body:    "Inter", "Segoe UI", sans-serif;

  --ms-size-display: clamp(2.75rem, 4vw + 1rem, 4.5rem);
  --ms-size-h1:      clamp(2.25rem, 3vw + 1rem, 3.25rem);
  --ms-size-h2:      clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --ms-size-h3:      clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --ms-size-h4:      1.25rem;
  --ms-size-body:    1rem;
  --ms-size-small:   0.875rem;

  --ms-weight-display: 700;
  --ms-weight-heading: 600;
  --ms-weight-body:    400;

  /* ---- Spacing tokens (8px base scale) ---- */
  --ms-space-xs:  0.5rem;
  --ms-space-sm:  1rem;
  --ms-space-md:  1.5rem;
  --ms-space-lg:  2.5rem;
  --ms-space-xl:  4rem;
  --ms-space-2xl: 6rem;

  /* ---- Layout ---- */
  --ms-container-max: 1240px;
  --ms-radius-sm: 6px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 20px;
  --ms-shadow-sm: 0 2px 10px rgba(11, 23, 48, 0.06);
  --ms-shadow-md: 0 12px 30px rgba(11, 23, 48, 0.10);

  /* ---- Motion (section 37 / mega menu section 8) ---- */
  --ms-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-duration-menu: 260ms;
  --ms-duration-hover: 150ms;
}

/* Base element resets kept minimal — Elementor governs most spacing/typography
   per-section; these are only the safety-net defaults for un-styled markup. */
body{
  font-family: var(--ms-font-body);
  color: var(--ms-color-text);
  background: var(--ms-color-white);
}
h1, h2, h3, h4{
  font-family: var(--ms-font-display);
  font-weight: var(--ms-weight-heading);
  color: var(--ms-color-deep-navy);
}
a{ color: var(--ms-color-primary-blue); }

/* Utility: never let wide content (tables, code, embeds) break layout */
.ms-scroll-x{ overflow-x: auto; }
img{ max-width: 100%; height: auto; }