.btn {
  border-radius: var(--radius.md, 8px);
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: var(--button.shadow.base, var(--comp.button.shadow, var(--shadow.hairline, 0 0 0 1px rgba(15, 23, 42, 0.06))));
}

.btn:focus-visible {
  outline: 2px solid rgba(var(--brand.accent.rgb, 0 122 255) / 0.5);
  outline-offset: 2px;
}

.btn-primary {
  background: rgb(var(--comp.button.bg, var(--brand.accent.rgb, 0 122 255)));
  color: rgb(var(--comp.button.fg, 255 255 255));
  border-color: rgb(var(--comp.button.border, var(--brand.accent.rgb, 0 122 255)));
  box-shadow: var(--button.shadow.primary, var(--comp.button.shadow, var(--shadow.hairline, 0 0 0 1px rgba(15, 23, 42, 0.06))));
}

.btn-primary:hover,
.btn-primary:focus {
  background: rgb(var(--comp.button.bg.hover, var(--brand.accent.secondary.rgb, 15 96 181)));
  border-color: rgb(var(--comp.button.border.hover, var(--brand.accent.secondary.rgb, 15 96 181)));
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: var(--button.shadow.primary.hover, var(--shadow.lift, 0 2px 8px rgba(15, 23, 42, 0.12)));
}

.btn-outline-primary {
  color: rgb(var(--comp.button.outline.fg, var(--brand.accent.rgb, 0 122 255)));
  border-color: rgb(var(--comp.button.outline.border, var(--brand.accent.rgb, 0 122 255)));
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgb(var(--brand.accent.rgb, 0 122 255) / 0.12);
  color: rgb(var(--comp.button.outline.fg.hover, 255 255 255));
  border-color: rgb(var(--comp.button.outline.border.hover, var(--brand.accent.rgb, 0 122 255)));
  box-shadow: var(--shadow.lift, 0 2px 8px rgba(15, 23, 42, 0.12));
}

.btn-outline-info {
  color: rgb(var(--semantic.info.rgb, var(--brand.accent.rgb, 0 122 255)));
  border-color: rgb(var(--semantic.info.rgb, var(--brand.accent.rgb, 0 122 255)) / 0.6);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background: rgb(var(--semantic.info.rgb, var(--brand.accent.rgb, 0 122 255)) / 0.08);
  border-color: rgb(var(--semantic.info.rgb, var(--brand.accent.rgb, 0 122 255)));
  color: rgb(var(--semantic.info.rgb, var(--brand.accent.rgb, 0 122 255)));
}