/* Button component tokens mapped to semantic design tokens. */

.c-btn {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--bs-sem-surface-subtle);
  --_btn-bg-active: var(--bs-sem-surface-muted);
  --_btn-border: var(--bs-sem-border-subtle);
  --_btn-text: var(--bs-sem-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--_btn-border);
  background: var(--_btn-bg);
  color: var(--_btn-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.c-btn:hover:not(:disabled) {
  background: var(--_btn-bg-hover);
}
.c-btn:active:not(:disabled) {
  background: var(--_btn-bg-active);
}
.c-btn:focus-visible {
  outline: 2px solid var(--bs-sem-focus-ring);
  outline-offset: 2px;
}
.c-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.c-btn:focus {
  outline: none;
}

/* Sizes */
.c-btn--sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
}

/* Variants */
.c-btn--primary {
  --_btn-bg: var(--bs-sem-action-primary-bg);
  --_btn-bg-hover: var(--bs-sem-action-primary-bg-hover);
  --_btn-bg-active: var(--bs-sem-action-primary-bg-active);
  --_btn-border: var(--bs-sem-action-primary-border);
  --_btn-text: var(--bs-sem-action-primary-text);
}

.c-btn--secondary {
  --_btn-bg: var(--bs-sem-surface-subtle);
  --_btn-bg-hover: var(--bs-sem-surface-muted);
  --_btn-bg-active: var(--bs-sem-surface-inset);
  --_btn-border: var(--bs-sem-border-subtle);
  --_btn-text: var(--bs-sem-text);
}

/* Danger (destructive) */
.c-btn--danger {
  --_btn-bg: var(--bs-sem-danger-bg, #b42318);
  --_btn-bg-hover: var(--bs-sem-danger-bg-hover, #912111);
  --_btn-bg-active: var(--bs-sem-danger-bg-active, #7a1b0e);
  --_btn-border: var(--bs-sem-danger-border, var(--_btn-bg));
  --_btn-text: var(--bs-sem-danger-text, #ffffff);
}

.c-btn--outline {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--bs-sem-surface-subtle);
  --_btn-bg-active: var(--bs-sem-surface-muted);
  --_btn-border: var(--bs-sem-border-subtle);
  --_btn-text: var(--bs-sem-text);
}

.c-btn--ghost {
  --_btn-bg: transparent;
  --_btn-bg-hover: var(--bs-sem-surface-subtle);
  --_btn-bg-active: var(--bs-sem-surface-muted);
  --_btn-border: transparent;
  --_btn-text: var(--bs-sem-text-muted);
}

.c-btn--link {
  --_btn-bg: transparent;
  --_btn-bg-hover: color-mix(
    in srgb,
    var(--bs-sem-action-primary-bg) 12%,
    transparent
  );
  --_btn-bg-active: color-mix(
    in srgb,
    var(--bs-sem-action-primary-bg) 20%,
    transparent
  );
  --_btn-border: transparent;
  --_btn-text: var(--bs-sem-action-primary-bg);
  padding: 0.25rem 0.25rem;
}
.c-btn--link:hover {
  text-decoration: underline;
}
.c-btn--link:focus-visible {
  text-decoration: underline;
}

/* Icon alignment helper if icons used */
.c-btn > .c-btn__icon {
  display: inline-flex;
  line-height: 0;
}

/* Utility container (replaces .container-fluid) */
.u-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 1280px;
}