/* ============================================================
   MOVERS FOR ME — BRAND FOUNDATION
   Added as part of the 2026 refresh project.
   Aligns the theme with the Movers For Me Expanded Style Guide.
   All variables, typography, and utilities below are NEW and
   do not override existing styles. Existing pages continue to
   work unchanged until individual sections are migrated.
   ============================================================ */

:root {
  /* --- Brand colors (from style guide, Section 2 & Section 8) --- */
  --mfm-orange: #F99D5B;          /* Primary CTA & emphasis */
  --mfm-teal: #69A39F;            /* Secondary accent, dividers, structure */
  --mfm-charcoal: #121212;        /* Primary text on light / dark backgrounds */
  --mfm-white: #FFFFFF;           /* Default background */
  --mfm-soft-orange: #FCE3D0;     /* Light orange tint (backgrounds, highlights) */
  --mfm-mist-teal: #DCEDEC;       /* Light teal tint (backgrounds, highlights) */
  --mfm-warm-gray: #F4F1EC;       /* Alternate neutral background */
  --mfm-slate: #5C6468;           /* Secondary/body text on light backgrounds */

  /* --- Typography: font families (style guide, Section 5) --- */
  --mfm-font-heading: "Oswald", "Arial Narrow", sans-serif;
--mfm-font-subhead: "Montserrat", system-ui, -apple-system, sans-serif;
--mfm-font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* --- Typography: size scale (style guide, Section 5) --- */
  --mfm-h1-size: clamp(28px, 4vw, 40px);
  --mfm-h2-size: clamp(22px, 3vw, 28px);
  --mfm-h3-size: 30px;
  --mfm-body-size: 17px;
  --mfm-small-size: 14px;

  /* --- Spacing scale (consistent rhythm across sections) --- */
  --mfm-space-xs: 8px;
  --mfm-space-sm: 16px;
  --mfm-space-md: 32px;
  --mfm-space-lg: 64px;
  --mfm-space-xl: 96px;

  /* --- Borders & radii --- */
  --mfm-radius-sm: 4px;
  --mfm-radius-md: 8px;
  --mfm-radius-lg: 16px;
  --mfm-border-thin: 1px solid var(--mfm-warm-gray);
  --mfm-border-teal: 2px solid var(--mfm-teal);

  /* --- Shadows (subtle, never heavy — style guide calls for clean layouts) --- */
  --mfm-shadow-sm: 0 1px 3px rgba(18, 18, 18, 0.06);
  --mfm-shadow-md: 0 6px 20px rgba(18, 18, 18, 0.08);

  /* --- Transitions --- */
  --mfm-transition: 0.3s ease;
}

/* ============================================================
   BRAND UTILITY CLASSES
   Apply these classes to any element inside a section we've
   migrated to the new design system. Older sections continue
   using their existing classes (.orange-heading, .green-icon, etc).
   ============================================================ */

/* --- Typography utilities --- */
.mfm-heading {
  font-family: var(--mfm-font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--mfm-charcoal);
  text-transform: uppercase;
}

.mfm-subhead {
  font-family: var(--mfm-font-subhead);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mfm-charcoal);
}

.mfm-body {
  font-family: var(--mfm-font-body);
  font-weight: 400;
  font-size: var(--mfm-body-size);
  line-height: 1.65;
  color: var(--mfm-slate);
}

/* "Eyebrow" label — small uppercase text above a heading.
   Style guide specifies teal for section markers (Section 2 & 4). */
.mfm-eyebrow {
  font-family: var(--mfm-font-subhead);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mfm-teal);
  margin-bottom: var(--mfm-space-sm);
  display: inline-block;
}

/* Heading size helpers (use with .mfm-heading) */
.mfm-h1 { font-size: var(--mfm-h1-size); }
.mfm-h2 { font-size: var(--mfm-h2-size); }
.mfm-h3 { font-size: var(--mfm-h3-size); }

/* Text color utilities */
.mfm-text-orange    { color: var(--mfm-orange) !important; }
.mfm-text-teal      { color: var(--mfm-teal) !important; }
.mfm-text-charcoal  { color: var(--mfm-charcoal) !important; }
.mfm-text-white     { color: var(--mfm-white) !important; }
.mfm-text-slate     { color: var(--mfm-slate) !important; }

/* Background color utilities */
.mfm-bg-white       { background-color: var(--mfm-white); }
.mfm-bg-charcoal    { background-color: var(--mfm-charcoal); color: var(--mfm-white); }
.mfm-bg-warm-gray   { background-color: var(--mfm-warm-gray); }
.mfm-bg-soft-orange { background-color: var(--mfm-soft-orange); }
.mfm-bg-mist-teal   { background-color: var(--mfm-mist-teal); }

/* ============================================================
   BRAND BUTTONS
   New button system aligned with style guide (orange = default CTA).
   Existing .orange-button / .white-button classes still work on
   non-migrated sections.
   ============================================================ */

.mfm-btn {
  display: inline-block;
  font-family: var(--mfm-font-subhead);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--mfm-radius-sm);
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--mfm-transition);
  white-space: nowrap;
}

.mfm-btn-primary {
  background-color: var(--mfm-orange);
  color: var(--mfm-white) !important;
  border-color: var(--mfm-orange);
}
.mfm-btn-primary:hover {
  background-color: var(--mfm-charcoal);
  border-color: var(--mfm-charcoal);
  color: var(--mfm-white) !important;
}

.mfm-btn-secondary {
  background-color: transparent;
  color: var(--mfm-charcoal) !important;
  border-color: var(--mfm-charcoal);
}
.mfm-btn-secondary:hover {
  background-color: var(--mfm-charcoal);
  color: var(--mfm-white) !important;
}

.mfm-btn-on-dark {
  background-color: var(--mfm-orange);
  color: var(--mfm-white) !important;
  border-color: var(--mfm-orange);
}
.mfm-btn-on-dark:hover {
  background-color: var(--mfm-white);
  color: var(--mfm-orange) !important;
  border-color: var(--mfm-white);
}

/* ============================================================
   BRAND SECTION HELPERS
   Consistent vertical rhythm and container widths for
   migrated sections.
   ============================================================ */

.mfm-section {
  padding-top: var(--mfm-space-xl);
  padding-bottom: var(--mfm-space-xl);
}

.mfm-section-tight {
  padding-top: var(--mfm-space-lg);
  padding-bottom: var(--mfm-space-lg);
}

.mfm-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mfm-space-sm);
  padding-right: var(--mfm-space-sm);
}

/* Small decorative teal rule (style guide approved divider) */
.mfm-divider-teal {
  width: 60px;
  height: 3px;
  background-color: var(--mfm-teal);
  border: none;
  margin: var(--mfm-space-sm) 0;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
  :root            { --mfm-h3-size: 26px; }
  .mfm-section     { padding-top: var(--mfm-space-lg); padding-bottom: var(--mfm-space-lg); }
  .mfm-btn         { padding: 12px 24px; font-size: 14px; }
}

/* ============================================================
   END BRAND FOUNDATION
   ============================================================ */