/* ============================================================
 * MB Architects — Colors & Type
 * Source: Ksoftcode/Moyosore-Bamigbade (Dewi template base)
 * ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Font Families ---- */
  --font-display:   "Raleway", sans-serif;      /* Headings, hero, section titles */
  --font-body:      "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Body copy */
  --font-nav:       "Inter", sans-serif;        /* Nav menu, small labels, buttons */

  /* ---- Brand Colors (verbatim from style.css) ---- */
  --mb-accent:      #ff4a17;   /* Signature MB orange — CTAs, links, active states */
  --mb-accent-hover:#ff724a;   /* Softer hover tint */
  --mb-accent-deep: #fd3800;   /* Pressed / darker accent */
  --mb-burgundy:    #8b1e27;   /* Deep red from the logo "B" */

  /* ---- Neutrals ---- */
  --mb-ink:         #15222b;   /* Header scrolled background, deep text */
  --mb-heading:     #273d4e;   /* Headings & titles */
  --mb-body:        #444444;   /* Default text */
  --mb-muted:       #7f8f9d;   /* De-emphasized text */
  --mb-line:        #e5eaee;   /* Hairline borders / nav color on dark */
  --mb-bg-soft:     #f1f4fa;   /* Light section background */
  --mb-bg-clients:  #bfd7e7;   /* Clients strip dusty-blue */
  --mb-surface:     #ffffff;   /* Card surface */
  --mb-dark-bg:     #000910;   /* Dark sections (hero/testimonials) */
  --mb-dark-surface:#28323a;   /* Dark section card surface */

  /* ---- Stats Icon Accents (preserved from template) ---- */
  --mb-stat-blue:   #2576bc;
  --mb-stat-orange: #ff4a17;
  --mb-stat-green:  #2eca6a;
  --mb-stat-pink:   #e84393;

  /* ---- Semantic Tokens ---- */
  --bg:             var(--mb-surface);
  --bg-alt:         var(--mb-bg-soft);
  --bg-dark:        var(--mb-dark-bg);
  --fg:             var(--mb-body);
  --fg-muted:       var(--mb-muted);
  --fg-strong:      var(--mb-heading);
  --fg-on-dark:     #ffffff;
  --brand:          var(--mb-accent);
  --brand-hover:    var(--mb-accent-hover);
  --border:         color-mix(in srgb, var(--mb-body), transparent 85%);
  --border-strong:  color-mix(in srgb, var(--mb-body), transparent 60%);
  --shadow-card:    0 0 30px rgba(0,0,0,0.08);
  --shadow-card-lg: 0 0 30px rgba(0,0,0,0.10);
  --shadow-pop:     0 2px 15px rgba(0,0,0,0.10);

  /* ---- Radii ---- */
  --radius-xs: 4px;   /* inputs, buttons */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;  /* .rounded-4 on images */
  --radius-pill: 50px;

  /* ---- Spacing (Bootstrap aligned) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 60px;   /* section vertical padding */
  --space-8: 80px;

  /* ---- Typography Scale ---- */
  --fs-eyebrow: 14px;   /* section-title h2: uppercase micro-label */
  --fs-body-sm: 13px;
  --fs-body:    16px;
  --fs-lead:    18px;   /* .lead body text */
  --fs-h4:      20px;
  --fs-h3:      26px;
  --fs-h2:      32px;   /* section-title p (title) */
  --fs-h2-lg:   36px;
  --fs-h1:      48px;   /* hero h1 */

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.6;

  --tracking-eyebrow: 0.12em;
  --tracking-wide:    0.08em;
}

/* ---- Semantic Element Styles ---- */
body {
  font-family: var(--font-body);
  color: var(--fg);
  background-color: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
}

h1 { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font-size: var(--fs-h2-lg); font-weight: 800; text-transform: uppercase; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

p  { margin: 0 0 1em; }
.lead { font-size: var(--fs-lead); color: color-mix(in srgb, var(--fg), transparent 25%); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-family: var(--font-display);
}
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 120px;
  height: 1px;
  background: var(--brand);
  margin: 4px 0 4px 10px;
  vertical-align: middle;
}

a { color: var(--brand); text-decoration: none; transition: color .3s; }
a:hover { color: var(--brand-hover); }

.nav-link {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Buttons */
.btn-cta {
  font-family: var(--font-nav);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 8px 26px;
  border-radius: var(--radius-xs);
  border: 2px solid currentColor;
  text-transform: uppercase;
  transition: all .3s;
}
.btn-cta:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.btn-primary-pill {
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 10px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  transition: .4s;
}
.btn-primary-pill:hover { background: color-mix(in srgb, var(--brand), transparent 20%); }

/* Dark-surface preset */
.on-dark {
  --bg: var(--mb-dark-bg);
  --fg: #ffffff;
  --fg-strong: #ffffff;
  --fg-muted: color-mix(in srgb, #fff, transparent 40%);
  color: #fff;
  background: var(--mb-dark-bg);
}