/**
 * Molo design tokens + shared primitives.
 * Values track the site's Avada globals (--awb-*) with hard fallbacks, so a
 * theme palette change flows through automatically.
 */
:root {
  --molo-orange:       var(--awb-color4, #ff5100);
  --molo-orange-hover: var(--awb-color5, #ef4c00);
  --molo-navy:         #193441;   /* brand blue (per Andy) — hard-set, theme var #202944 is off-brand */
  --molo-navy-deep:    #12262e;
  --molo-ink:          var(--awb-color8, #212934);
  --molo-paper:        var(--awb-color1, #ffffff);
  --molo-paper-dim:    var(--awb-color2, #f9f9fb);
  --molo-line:         rgba(32, 41, 68, .12);
  --molo-line-inverse: rgba(255, 255, 255, .16);

  --molo-max-width: 1200px;
  --molo-pad-inline: clamp(20px, 4vw, 48px);
  --molo-pad-block: clamp(56px, 8vw, 110px);
  --molo-gap: clamp(20px, 3vw, 40px);
}

/* ---- section scaffolding (every component uses this) -------------------- */
.molo-section__inner {
  max-width: var(--molo-max-width);
  margin-inline: auto;
  padding-inline: var(--molo-pad-inline);
  padding-block: var(--molo-pad-block);
}

/* ---- themes -------------------------------------------------------------- */
.molo-theme-dark  { background: var(--molo-navy); color: var(--molo-paper); }
.molo-theme-deep  { background: var(--molo-navy-deep); color: var(--molo-paper); }
.molo-theme-light { background: var(--molo-paper); color: var(--molo-ink); }
.molo-theme-dim   { background: var(--molo-paper-dim); color: var(--molo-ink); }

.molo-theme-dark h1, .molo-theme-dark h2, .molo-theme-dark h3, .molo-theme-dark h4,
.molo-theme-deep h1, .molo-theme-deep h2, .molo-theme-deep h3, .molo-theme-deep h4 {
  color: var(--molo-paper);
}
.molo-theme-light h1, .molo-theme-light h2, .molo-theme-light h3, .molo-theme-light h4,
.molo-theme-dim h1, .molo-theme-dim h2, .molo-theme-dim h3, .molo-theme-dim h4 {
  color: var(--molo-navy);
}

/* ---- shared atoms --------------------------------------------------------- */
.molo-eyebrow {
  color: var(--molo-orange);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .9em;
}

.molo-btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.molo-btn--primary {
  background: var(--molo-orange);
  color: #fff;
}
.molo-btn--primary:hover { background: var(--molo-orange-hover); color: #fff; }
.molo-btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.molo-btn--ghost:hover { border-color: var(--molo-orange); color: var(--molo-orange); }

.molo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.8em;
}

/* alignment modifiers */
.molo--center .molo-section__inner { text-align: center; }
.molo--center .molo-actions { justify-content: center; }