/**
 * Component CSS — generated from component records.
 * Do not edit. Write CSS on the component via upsert-component / patch-component.
 */

/* delta-component:button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.65rem 1.05rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-text);
  font-size: var(--text-sm-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background 180ms var(--motion), color 180ms var(--motion), border-color 180ms var(--motion);
}
.btn--primary {
  background: var(--color-action);
  color: var(--color-on-action);
}
.btn--primary:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}
.btn--secondary {
  background: var(--color-ink);
  color: var(--color-surface-body);
}
.btn--secondary:hover {
  background: var(--color-ink-muted);
  color: var(--color-surface-body);
}
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--card-bg);
  color: var(--color-ink);
}
.btn--on-night {
  background: var(--color-action);
  color: var(--color-on-action);
}
.btn--on-night:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}
.btn--on-night-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: color-mix(in oklch, var(--color-ink) 28%, transparent);
}
.btn--on-night-ghost:hover {
  background: color-mix(in oklch, var(--color-ink) 8%, transparent);
  color: var(--color-ink);
}