/**
 * Knappar – endast dessa 6 varianter i hela temat:
 * Filled button sharp, Filled button smooth, Filled button round
 * Outline button sharp, Outline button smooth, Outline button round
 *
 * Hover: filled ser ut som outline, outline ser ut som filled. Samma storlek och border (0.9px).
 * Depends: design/tokens.css
 */

.btn {
  --btn-radius: var(--site-button-radius, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--text-button, var(--text-base, 1rem));
  font-weight: var(--font-weight-button, 500);
  line-height: var(--leading-snug, 1.375);
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: 0.9px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

.btn--radius-none {
  --btn-radius: 0;
}

.btn--radius-sm {
  --btn-radius: 0.5rem;
}

/* Filled – 2px border (transparent = samma som bg) */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Outline – samma padding och 2px border som filled, exakt samma storlek */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 0.9px solid var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

/* Lila (samma 6 varianter, annan färg) */
.btn--purple {
  background-color: var(--color-purple);
  color: var(--color-bg);
  border-color: var(--color-purple);
}

.btn--purple:hover {
  background-color: transparent;
  color: var(--color-purple);
  border-color: var(--color-purple);
}

.btn--outline-purple {
  background-color: transparent;
  color: var(--color-purple);
  border: 0.9px solid var(--color-purple);
}

.btn--outline-purple:hover {
  background-color: var(--color-purple);
  color: var(--color-bg);
  border-color: var(--color-purple);
}

/* Svart (samma 6 varianter) */
.btn--dark {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

.btn--dark:hover {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--color-dark);
  border: 0.9px solid var(--color-dark);
}

.btn--outline-dark:hover {
  background-color: var(--color-dark);
  color: var(--color-bg);
  border-color: var(--color-dark);
}

/*
 * --man-custom-btn-fg = text ovanpå ifylld accent (filled / outline:hover).
 * --man-custom-btn-on-light-bg = text när bakgrunden är transparent (primär:hover).
 */
.btn.man-btn-custom.btn--primary {
  background-color: var(--man-custom-btn);
  border-color: var(--man-custom-btn);
  color: var(--man-custom-btn-fg);
}

.btn.man-btn-custom.btn--primary:hover {
  background-color: transparent;
  color: var(--man-custom-btn-on-light-bg);
  border-color: var(--man-custom-btn);
}

.btn.man-btn-custom.btn--outline {
  background-color: transparent;
  color: var(--man-custom-btn);
  border-color: var(--man-custom-btn);
}

.btn.man-btn-custom.btn--outline:hover {
  background-color: var(--man-custom-btn);
  color: var(--man-custom-btn-fg);
  border-color: var(--man-custom-btn);
}