/* ==========================================================================
   UI COMPONENTS — reusable atoms used across all sections.
   Token-driven so they adapt automatically inside .on-dark sections.
   ========================================================================== */

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary — solid navy (or gold inside .on-dark via token flip) */
.btn--primary {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: var(--elev-1);
}
.btn--primary:hover { box-shadow: var(--elev-2); }

/* Gold — the single high-emphasis action; use sparingly */
.btn--gold {
  background: var(--gold-500);
  color: var(--navy-900);
  box-shadow: var(--elev-1);
}
.btn--gold:hover { background: var(--gold-400); box-shadow: var(--elev-2); }

/* Secondary — outline */
.btn--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.btn--outline:hover { border-color: var(--fg); }

/* Ghost on dark — subtle bordered light button */
.on-dark .btn--outline {
  color: var(--dark-fg);
  border-color: rgba(255, 255, 255, 0.28);
}
.on-dark .btn--outline:hover { border-color: var(--gold-400); color: var(--gold-400); }

.btn--lg { padding: var(--space-5) var(--space-7); font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* ---- Badge / pill ----------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-alt);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--accent-strong);
  border: 1px solid rgba(197, 157, 95, 0.25);
}
.badge--neutral {
  background: rgba(71, 85, 105, 0.08);
  color: var(--fg-muted);
  border-color: var(--border);
}

/* ---- Card ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
  border-color: rgba(197, 157, 95, 0.4);
}
.on-dark .card {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  box-shadow: none;
}

/* ---- Icon chip (for expertise / feature cards) ------------------------ */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--gold-100);
  color: var(--accent-strong);
  border: 1px solid rgba(197, 157, 95, 0.22);
  margin-bottom: var(--space-5);
}
.icon-chip svg { width: 24px; height: 24px; }

/* ---- Stat block ------------------------------------------------------- */
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.stat__value .text-accent { color: var(--accent); }
.stat__label {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* ---- Hairline divider ------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: var(--space-7);
}