/* ============================================================================
 * components/status.css — status messages and inline state pills
 * ============================================================================
 * Depends on: core/tokens.css
 *
 * Status messages — for form-level feedback after submission:
 *   .status--success  — green (signup success, save confirmed)
 *   .status--warning  — yellow (waitlist confirmation, soft warning)
 *   .status--error    — red (validation failure, server error)
 *   .status--info     — blue (informational message)
 *
 * State pills — for live inline field-level feedback (debounced verify, etc.):
 *   .is-checking — neutral checking state
 *   .is-valid    — verified ok
 *   .is-invalid  — verified failed
 * ========================================================================== */

.status {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.55;
  margin-top: var(--space-4);
  border: 1px solid;
}
.status strong { font-weight: var(--weight-semibold); }

.status--success {
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(74, 222, 128, 0.30);
}
.status--warning {
  color: var(--yellow);
  background: var(--yellow-bg);
  border-color: rgba(250, 204, 21, 0.30);
}
.status--error {
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(248, 113, 113, 0.30);
}
.status--info {
  color: var(--accent-lt);
  background: var(--accent-bg);
  border-color: rgba(59, 130, 246, 0.30);
}

/* Inline live state pill */
.state-pill {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.state-pill.is-checking {
  display: block;
  color: var(--muted2);
  background: var(--surface2);
  border-color: var(--border2);
}
.state-pill.is-valid {
  display: block;
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(74, 222, 128, 0.30);
}
.state-pill.is-invalid {
  display: block;
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(248, 113, 113, 0.30);
}