/* button.css - Pill button styles */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    filter var(--t-base) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

/* --- Primary (teal) ------------------------------------------- */
.btn--primary {
  background: var(--cal-teal);
  color: var(--fg-on-teal);
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover {
  background: var(--cal-teal-dark);
  box-shadow: var(--shadow-sm);
}
.btn--primary:active {
  background: var(--cal-teal-darker);
}

/* --- Outline (teal border on white) --------------------------- */
.btn--outline {
  background: var(--cal-white);
  color: var(--cal-teal-dark);
  border-color: var(--cal-teal);
}
.btn--outline:hover {
  background: var(--cal-teal-tint-50);
  border-color: var(--cal-teal-dark);
}
.btn--outline:active {
  background: var(--cal-teal-tint);
}

/* --- Accent (coral) — used very sparingly --------------------- */
.btn--accent {
  background: var(--cal-coral);
  color: var(--cal-white);
  box-shadow: var(--shadow-xs);
}
.btn--accent:hover {
  filter: brightness(0.93);
  box-shadow: var(--shadow-sm);
}

/* --- Ghost (no fill, no border) ------------------------------- */
.btn--ghost {
  background: transparent;
  color: var(--cal-text);
}
.btn--ghost:hover {
  color: var(--cal-teal);
}

/* --- Sizes ---------------------------------------------------- */
.btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body-sm);
}
.btn--lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-body-lg);
}

/* --- Disabled ------------------------------------------------- */
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--cal-line-strong);
  color: var(--cal-white);
  border-color: transparent;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}