/* ============================================================
   button.css — Pill buttons: primary, ghost, accent, tertiary,
   plus a pending placeholder and a loading (disabled) state.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color    var(--dur-fast) var(--ease-out),
              color           var(--dur-fast) var(--ease-out),
              transform       var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--primary);
  color: var(--on-fill);
  border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-bright); border-color: var(--primary-bright); color: var(--bg); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { color: var(--primary-bright); border-color: var(--primary-bright); }

/* Sparing accent variant — use only when contrast against the primary CTA matters. */
.btn--accent {
  background: var(--gold);
  color: var(--on-accent);
  border-color: var(--gold);
}
.btn--accent:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--xl { padding: 16px 26px; font-size: var(--text-lg); }

/* Tertiary — lowest-emphasis text button. Use in clusters under hero copy. */
.btn--tertiary {
  background: transparent;
  color: var(--text-soft);
  border-color: transparent;
  padding: 10px 16px;
  font-weight: 700;
}
.btn--tertiary:hover {
  color: var(--primary-bright);
  background: var(--primary-soft);
  border-color: transparent;
}

/* Subtle tactile feedback on press. */
.btn:active { transform: translateY(1px); }

/* Pending placeholder — visible but inert (the not-yet-enabled
   "Download the report" CTA). Reads as a dashed, dimmed coming-soon chip. */
.btn[data-pending] {
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  background: transparent;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Plain disabled — e.g. a primary button mid-request ("Locating…"). Keeps its
   variant fill but dims; must NOT inherit the dashed placeholder look above. */
.btn:disabled:not([data-pending]) {
  opacity: 0.6;
  cursor: progress;
}