/* ============================================================================
 * Odahl — Buttons
 * Editorial restraint. Italic Cormorant for primary action; DM Sans for
 * secondary/utility. Hairline underline animation on ghost buttons.
 * Requires tokens.css.
 * ============================================================================ */

.odahl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; cursor: pointer; user-select: none;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: var(--type-button); line-height: 1;
  letter-spacing: -0.005em;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent; background: transparent;
  color: var(--ink); text-decoration: none;
  transition: all var(--speed-quick) var(--ease-out);
  position: relative;
}
.odahl-btn:focus-visible {
  outline: 2px solid var(--aether-deep);
  outline-offset: 2px;
}
.odahl-btn[disabled], .odahl-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* ── Primary: filled ink, the decisive action ──────────────────────── */
.odahl-btn-primary {
  background: var(--ink); color: var(--bone);
  border-color: var(--ink);
}
.odahl-btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.odahl-btn-primary:active { transform: translateY(1px); }

/* ── Secondary: outlined, supports the primary ─────────────────────── */
.odahl-btn-secondary {
  background: transparent; border-color: var(--seam);
  color: var(--ink);
}
.odahl-btn-secondary:hover { border-color: var(--aether-deep); }
.odahl-btn-secondary:active { background: var(--aether-trace); }

/* ── Ghost: text-only with hairline underline reveal ────────────────── */
.odahl-btn-ghost {
  background: transparent; padding: 0.4rem 0.8rem;
  border: 0;
}
.odahl-btn-ghost::after {
  content: ''; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem;
  height: 1px; background: var(--aether-deep);
  transform: scaleX(0.4); transform-origin: left;
  transition: transform var(--speed-standard) var(--ease-out);
}
.odahl-btn-ghost:hover::after { transform: scaleX(1); }

/* ── Danger: muted ember, never red ─────────────────────────────────── */
.odahl-btn-danger {
  background: var(--ember-deep); color: var(--bone-warm);
  border-color: var(--ember-deep);
}
.odahl-btn-danger:hover { background: var(--ember); border-color: var(--ember); color: var(--ink); }

/* ── Subtle: low-emphasis filled, for tertiary actions ──────────────── */
.odahl-btn-subtle {
  background: var(--bone-warm); color: var(--ink);
  border-color: var(--seam);
}
.odahl-btn-subtle:hover { background: var(--aether-trace); border-color: var(--aether-deep); }

/* ── Sizes ──────────────────────────────────────────────────────────── */
.odahl-btn-sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
.odahl-btn-md { /* default — listed for clarity */ padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.odahl-btn-lg { padding: 0.95rem 1.8rem; font-size: 1.1rem; }

/* ── Icon-only square button ────────────────────────────────────────── */
.odahl-btn-icon {
  padding: 0.55rem; width: 36px; height: 36px;
}
.odahl-btn-icon svg { width: 18px; height: 18px; }
.odahl-btn-icon-lg { width: 44px; height: 44px; padding: 0.7rem; }
.odahl-btn-icon-lg svg { width: 22px; height: 22px; }

/* ── Loading state ─────────────────────────────────────────────────── */
.odahl-btn[data-loading="true"] {
  pointer-events: none; color: transparent;
}
.odahl-btn[data-loading="true"]::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; opacity: 0.7;
  animation: btn-spin 0.8s linear infinite;
}
.odahl-btn-primary[data-loading="true"]::before { border-color: var(--bone); border-top-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Button group: adjacent buttons with shared edges ──────────────── */
.odahl-btn-group {
  display: inline-flex; align-items: center;
}
.odahl-btn-group .odahl-btn { border-radius: 0; }
.odahl-btn-group .odahl-btn:not(:first-child) { margin-left: -1px; }
.odahl-btn-group .odahl-btn:focus-visible { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .odahl-btn, .odahl-btn-ghost::after { transition: none; }
  .odahl-btn[data-loading="true"]::before { animation: none; }
}