/* components.css */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: var(--fw-600);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.c-btn:active {
  transform: translateY(1px);
}

.c-btn--primary {
  background: var(--color-brand-900);
  color: #fff;
}

.c-btn--primary:hover {
  background: var(--color-brand-700);
}

.c-btn--ghost {
  background: transparent;
  border-color: var(--color-border);
}

.c-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-0);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.c-card__body {
  padding: var(--space-16);
}

.c-title-h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 3.2vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-900);
  margin: 0;
}

.c-title-h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 2.2vw, var(--fs-32));
  line-height: 1.1;
  font-weight: var(--fw-900);
  margin: 0;
}

.c-lead {
  font-size: var(--fs-14);
  line-height: var(--lh-22);
  color: var(--color-gray);
  margin: var(--space-12) 0 0;
}

.c-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-12);
  background: var(--color-surface-0);
}

.c-form-row {
  display: grid;
  gap: var(--space-12);
}