/*
 * Composants partagés (atoms). Le même markup est utilisé par les
 * composants React (src/shared/) et par les templates PHP.
 */

/* ---------- Button ---------- */

.lpc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lpc-space-2);
  font-family: var(--lpc-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--lpc-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms ease, background var(--lpc-t-fast), color var(--lpc-t-fast), border-color var(--lpc-t-fast);
  white-space: nowrap;
}

.lpc-btn:disabled,
.lpc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.lpc-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.lpc-btn--primary {
  background: var(--lpc-terra);
  color: var(--lpc-bg);
}

.lpc-btn--primary:hover:not(:disabled) {
  background: var(--lpc-terra-dark);
  color: var(--lpc-bg);
}

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

.lpc-btn--ghost:hover:not(:disabled) {
  background: var(--lpc-ink);
  color: var(--lpc-bg);
}

.lpc-btn--soft {
  background: var(--lpc-bg-2);
  color: var(--lpc-ink);
}

.lpc-btn--soft:hover:not(:disabled) {
  background: var(--lpc-bg-3);
}

.lpc-btn--sm {
  font-size: 13px;
  padding: 9px 16px;
}

.lpc-btn--lg {
  font-size: 17px;
  padding: 16px 28px;
}

/* ---------- Pill ---------- */

.lpc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--lpc-space-1);
  font-family: var(--lpc-font-body);
  font-size: var(--lpc-fs-small);
  font-weight: 500;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--lpc-radius-pill);
  white-space: nowrap;
}

.lpc-pill--terra {
  background: var(--lpc-terra-soft);
  color: var(--lpc-terra-dark);
}

.lpc-pill--sage {
  background: var(--lpc-sage-soft);
  color: var(--lpc-sage);
}

.lpc-pill--butter {
  background: var(--lpc-butter-soft);
  color: var(--lpc-butter-dark);
}

.lpc-pill--ocean {
  background: var(--lpc-ocean-soft);
  color: var(--lpc-ocean);
}

/* ---------- Chip ---------- */

.lpc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lpc-space-1);
  font-family: var(--lpc-font-body);
  font-size: var(--lpc-fs-small);
  font-weight: 500;
  line-height: 1;
  padding: 9px 16px;
  border-radius: var(--lpc-radius-pill);
  border: 1px solid var(--lpc-line);
  background: var(--lpc-bg);
  color: var(--lpc-ink);
  cursor: pointer;
  transition: background var(--lpc-t-fast), color var(--lpc-t-fast), border-color var(--lpc-t-fast);
}

.lpc-chip:hover:not(:disabled) {
  border-color: var(--lpc-ink);
}

.lpc-chip--active {
  background: var(--lpc-ink);
  color: var(--lpc-bg);
  border-color: var(--lpc-ink);
}

.lpc-chip--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}