Small button

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1.5;
}

/* Primary variant */
.btn-sm--primary {
  background: var(--accent-bg);
  color: oklch(1 0 0);
}
.btn-sm--primary:hover { opacity: 0.85; }

/* Secondary variant */
.btn-sm--secondary {
  background: oklch(0.28 0.03 260);
  color: var(--text);
}
.btn-sm--secondary:hover { opacity: 0.85; }

/* Ghost variant */
.btn-sm--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-bg);
}
.btn-sm--ghost:hover {
  background: oklch(0.52 0.22 265 / 0.12);
}

You are a senior frontend engineer building a design system component library.

Goal: A reusable small button style (.btn-sm) for dense UIs — no JavaScript.

Technical constraints:
- Use padding: 0.25rem 0.75rem and font-size: 0.75rem for the compact scale.
- Use display: inline-flex with align-items: center for consistent vertical alignment.
- Use border-radius: var(--radius) to inherit the design system token.
- Use oklch() for all color values, not hex or rgba().
- Support at least three variants: primary, secondary, and ghost.
- Include hover states that do not cause layout shift (use opacity or color changes).

Framework variant (pick one):
A) Vanilla CSS modifier classes (.btn-sm--primary, .btn-sm--secondary, .btn-sm--ghost).
B) React component — accept variant ("primary" | "secondary" | "ghost") as a prop.

Edge cases to handle:
- Button must not shrink below its label width in flex containers.
- Icon-only variant: ensure min-width equals height so it stays square.
- Works alongside standard .btn sizing without specificity conflicts.

Return CSS.