/* =============================================================
   BUTTONS.CSS — Block Library
   Button system — .btn base + all .btn-* variants.

   RULES
   ─────────────────────────────────────────────────────────────
   • .btn — structure only (padding, font, radius, transition).
     No color. All variants inherit from .btn.
   • .btn-primary   — always accent color, context-independent.
   • .btn-ghost     — surface tokens, adapts to any surface.
   • .btn-outline   — surface tokens, inverts on hover.
   • .btn-on-accent — for sections whose background IS the accent
                      color (banners, callouts). Extends .btn.
   • Never use hardcoded rgba(255,255,255,*) here — use surface
     tokens or accent tokens.
   • Radius comes from --radius (set by theme via tokens.css).
   ============================================================= */

/* ── Base — structure only, no color ─────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.85em 2.2em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
              transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

/* ── Primary — always accent, context-independent ─────────── */
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 6px 20px var(--accent-shadow);
}

/* ── Ghost — surface tokens, any surface ──────────────────── */
.btn-ghost {
  background: transparent;
  color: var(--surface-text);
  border-color: var(--surface-border);
}
.btn-ghost:hover {
  background: var(--surface-bg-raised);
  border-color: var(--surface-border-strong);
}

/* ── Outline — surface tokens, inverts on hover ───────────── */
.btn-outline {
  background: transparent;
  color: var(--surface-text);
  border-color: var(--surface-border-strong);
}
.btn-outline:hover {
  background: var(--surface-text);
  color: var(--surface-bg);
}

/* ── On-accent — extends .btn, use on accent-bg sections ──── */
/*    Requires both classes: class="btn btn-on-accent"          */
.btn-on-accent {
  background: var(--accent-text);
  color: var(--accent);
  border-color: var(--accent-text);
}
.btn-on-accent:hover {
  opacity: 0.9;
  /* .btn:hover handles transform */
}