/* ------------------------------------------------------------------------------------------
 * Shared component refinements aligned with the SCORE prototype. Rendered reference:
 * /admin/ui-catalog. Only Bootstrap 6 variables and existing classes are tuned here.
 * ---------------------------------------------------------------------------------------- */

/* Buttons */

.app-body .btn {
  --bs-btn-border-radius: 0.6rem;
  font-weight: 500;
}

.app-body .btn-sm {
  --bs-btn-border-radius: var(--radius-sm);
}

.app-body .btn {
  letter-spacing: -0.005em;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.app-body .btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.app-body .btn-solid.theme-primary {
  box-shadow: 0 1px 2px light-dark(rgb(23 46 56 / 12%), rgb(0 0 0 / 35%));
}

.app-body .btn-solid.theme-primary:hover:not(:disabled) {
  --bs-btn-bg: var(--color-brand-dark);
  --bs-btn-border-color: var(--color-brand-dark);
  box-shadow: 0 4px 12px light-dark(rgb(20 125 112 / 28%), rgb(0 0 0 / 45%));
  transform: translateY(-1px);
}

.app-body .btn-outline.theme-secondary {
  --bs-btn-color: var(--color-ink-soft);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-line-strong);
}

.app-body .btn-outline.theme-secondary:hover:not(:disabled) {
  --bs-btn-bg: var(--color-surface-soft);
  --bs-btn-color: var(--color-ink);
  --bs-btn-border-color: light-dark(#b8c2cc, #4a5f69);
}

/* Bootstrap's dark secondary subtle button (gray-400 on gray-800) is off-palette and low in
   contrast; the light values stay Bootstrap's own. */
.app-body .btn-subtle.theme-secondary {
  --bs-btn-bg: light-dark(var(--bs-theme-bg-subtle), #22313a);
  --bs-btn-color: light-dark(var(--bs-theme-fg), var(--color-ink-soft));
}

.app-body .btn-subtle.theme-secondary:hover {
  --bs-btn-hover-bg: light-dark(
    color-mix(in oklch, var(--bs-theme-bg-muted) 50%, var(--bs-theme-bg-subtle)),
    #2b3c45
  );
  --bs-btn-hover-color: light-dark(
    oklch(from var(--bs-theme-fg-emphasis) calc(l * 0.95) calc(c * 1.1) h),
    var(--color-ink)
  );
}

.app-body .btn:disabled {
  opacity: 0.5;
  transform: none;
}