/* ============================================================
   AVUS DESIGN SYSTEM v2 — Components
   ============================================================ */

/* ————— Buttons ————— */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-border: var(--accent);
  --btn-bg-h: color-mix(in oklch, var(--accent), #000 10%);
  --btn-bg-a: color-mix(in oklch, var(--accent), #000 18%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.btn:active { background: var(--btn-bg-a); border-color: var(--btn-bg-a); transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }