/* martimus.css — built 2026-06-13 | tokens+base */

/* ============================================================
   MARTIMUS FINANCIAL — DESIGN TOKENS (single source of truth)
   Palette: RED / WHITE / NAVY-BLUE / BLACK (from logo + brand)
   This is the ONLY place brand values are defined. Everything
   else references these vars. Change here = change everywhere.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --mm-red:        #C8102E;   /* primary accent, CTAs */
  --mm-red-dark:   #A00E25;   /* hover / active */
  --mm-navy:       #0A1F44;   /* headers, hero, footer */
  --mm-navy-light: #122855;   /* alt section bg on dark */
  --mm-black:      #0A0A0A;   /* logo text black */
  --mm-white:      #FFFFFF;

  /* ---- Neutral ramp (replaces the 10 ad-hoc grays) ---- */
  --mm-ink:    #0F172A;   /* body text (near-black, softer than pure) */
  --mm-700:    #334155;   /* strong secondary text */
  --mm-500:    #64748B;   /* muted text / captions */
  --mm-300:    #CBD5E1;   /* disabled / subtle */
  --mm-line:   #E2E8F0;   /* borders, dividers */
  --mm-paper:  #F8F9FC;   /* light section background */

  /* ---- Semantic aliases (use these in components) ---- */
  --mm-text:        var(--mm-ink);
  --mm-text-muted:  var(--mm-500);
  --mm-bg:          var(--mm-white);
  --mm-bg-alt:      var(--mm-paper);
  --mm-bg-dark:     var(--mm-navy);
  --mm-accent:      var(--mm-red);
  --mm-accent-h:    var(--mm-red-dark);
  --mm-on-dark:     var(--mm-white);

  /* ---- Type families ---- */
  --mm-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-serif: 'Playfair Display', Georgia, serif;   /* headings / display */

  /* ---- Fluid type scale (clamp: min @360px -> max @1200px) ---- */
  --mm-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);  /* small / captions */
  --mm-step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);  /* body */
  --mm-step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);  /* lead / h5 */
  --mm-step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 2.00rem);  /* h4 */
  --mm-step-3:  clamp(1.73rem, 1.48rem + 1.25vw, 2.66rem);  /* h3 */
  --mm-step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.55rem);  /* h2 */
  --mm-step-5:  clamp(2.49rem, 1.95rem + 2.70vw, 4.74rem);  /* h1 / hero */

  /* ---- Spacing scale (one rhythm, replaces random px) ---- */
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 0.75rem;
  --mm-space-4: 1rem;
  --mm-space-5: 1.5rem;
  --mm-space-6: 2rem;
  --mm-space-7: 3rem;
  --mm-space-8: 4rem;
  --mm-space-9: 6rem;

  /* ---- Radius / shadow / layout ---- */
  --mm-radius:    8px;
  --mm-radius-lg: 16px;
  --mm-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --mm-shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --mm-shadow-lg: 0 10px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  --mm-container: 1200px;

  /* ---- Breakpoints (documented; one system) ----
     --bp-sm 600px  | --bp-md 900px  | --bp-lg 1200px
     (CSS custom props can't be used in @media; these are the
      ONLY widths our stylesheet will use in media queries.) */
}


/* ============================================================
   MARTIMUS FINANCIAL — BASE (element defaults on tokens)
   Loads AFTER tokens.css. No !important — wins by load order.
   ============================================================ */

/* Headings: serif display, navy, fluid scale */
.entry-content h1, .elementor-widget-heading h1, h1.entry-title,
.entry-content h2, .elementor-widget-heading h2,
.entry-content h3, .elementor-widget-heading h3,
.entry-content h4, .elementor-widget-heading h4 {
  font-family: var(--mm-font-serif);
  color: var(--mm-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.entry-content h1, .elementor-widget-heading h1, h1.entry-title { font-size: var(--mm-step-5); }
.entry-content h2, .elementor-widget-heading h2 { font-size: var(--mm-step-4); }
.entry-content h3, .elementor-widget-heading h3 { font-size: var(--mm-step-3); }
.entry-content h4, .elementor-widget-heading h4 { font-size: var(--mm-step-2); }

/* Body text: Inter, ink, fluid body size */
body, .entry-content, .elementor-widget-text-editor {
  font-family: var(--mm-font-sans);
  color: var(--mm-text);
  font-size: var(--mm-step-0);
  line-height: 1.6;
}
.entry-content p { margin: 0 0 var(--mm-space-4); }
small, .is-small { font-size: var(--mm-step--1); color: var(--mm-text-muted); }

/* Links */
a { color: var(--mm-red); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--mm-red-dark); }

/* Dark bars (navy topbar etc): links + icons stay WHITE, not brand red */
.mm-header-topbar,
.mm-header-topbar a { color: var(--mm-white); }
.mm-header-topbar a:hover { color: rgba(255,255,255,.85); }
.mm-header-topbar .mm-topbar-sep { color: rgba(255,255,255,.4); }

/* Kill stray off-brand serif fallback (Times New Roman leak) */
* { -webkit-font-smoothing: antialiased; }

/* Buttons — single brand button, used everywhere */
.mm-btn,
.elementor-button,
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--mm-space-2);
  font-family: var(--mm-font-sans); font-weight: 600;
  font-size: var(--mm-step-0); line-height: 1;
  padding: var(--mm-space-4) var(--mm-space-6);
  border-radius: var(--mm-radius);
  background: var(--mm-red); color: var(--mm-white);
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.mm-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
  background: var(--mm-red-dark); color: var(--mm-white);
  transform: translateY(-1px);
}
/* Secondary (outline) button */
.mm-btn--ghost {
  background: transparent; color: var(--mm-navy);
  border-color: var(--mm-line);
}
.mm-btn--ghost:hover { background: var(--mm-paper); color: var(--mm-navy); }

/* Sections on dark navy */
.mm-section--dark {
  background: var(--mm-navy); color: var(--mm-on-dark);
}
.mm-section--dark h1, .mm-section--dark h2, .mm-section--dark h3 { color: var(--mm-white); }
.mm-section--alt { background: var(--mm-paper); }

/* Container */
.mm-container { max-width: var(--mm-container); margin-inline: auto; padding-inline: var(--mm-space-5); }