/* ================================================================
   BASE — Typography, global elements
   ================================================================ */

/* ── TYPE SCALE ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display, 'Manrope'), 'Manrope', sans-serif;
  color: #1B2F5B;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.8rem); font-weight: 800; letter-spacing: -0.035em; font-family: var(--font-display, 'Manrope'), 'Manrope', sans-serif; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem);   font-family: var(--font-display, 'Manrope'), 'Manrope', sans-serif; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; }
h5 { font-size: 1rem;   font-weight: 700; }
h6 { font-size: .8rem;  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

body, p, li, td, th, label, input, button, textarea, select, a {
  font-family: 'Manrope', sans-serif;
}

p {
    color: #4A5568;
    line-height: 1.75;
}
p.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #6B7280; line-height: 1.7; }
.text-muted  { color: #6B7280; font-size: .875rem; }
.text-center { text-align: center; }
.text-white  { color: #fff; }

/* ── EYEBROW / LABEL ─────────────────────────────────────────── */
.label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E8803A;
  margin-bottom: .85rem;
  font-family: 'Manrope', sans-serif;
}
.label::before {
  content: '';
  display: inline-block;
  width: 22px; height: 2px;
  background: #E8803A;
  border-radius: 999px;
  flex-shrink: 0;
}
.label-white { color: rgba(255,255,255,.65); }
.label-white::before { background: rgba(255,255,255,.4); }

/* ── LIVE PULSE DOT ──────────────────────────────────────────── */
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.2);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
  50%      { box-shadow: 0 0 0 7px rgba(74,222,128,.06); }
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  font-family: 'Manrope', sans-serif;
}
.badge-success { background: #ecfdf5; color: #059669; }
.badge-pending { background: #fffbeb; color: #d97706; }
.badge-active  { background: rgba(255,255,255,.95); color: #13613E; }
.badge-accent  { background: #E8803A; color: #fff; }
.badge-primary { background: #1B2F5B; color: #fff; }
.badge-green  { background: #ecfdf5; color: #059669; border: 1px solid #D1FAE5; }
.badge-gray   { background: #F3F4F6; color: #374151; border: 1px solid #E5E7EB; }
.badge-green:hover { background: #D1FAE5; color: #059669; }
.badge-gray:hover  { background: #E5E7EB; color: #374151; }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: #E5E3DF;
  border: none;
  margin: 0;
}