/* Button component. Needs tokens.css.
 *
 *   <button class="ui-btn ui-btn--primary">Send email</button>
 *   <button class="ui-btn ui-btn--secondary ui-btn--sm"><i class="fa-solid fa-copy" aria-hidden="true"></i> Copy</button>
 *   <button class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="Download"><i class="fa-solid fa-download" aria-hidden="true"></i></button>
 *
 * Variants: --primary  --secondary  --ghost  --danger  (+ --icon for icon-only; it needs aria-label)
 * Sizes:    --sm  --md (default)  --lg
 * CTA:      --cta on a primary button uses the brand gradient. One per view at most.
 * States:   :hover  :active  :focus-visible  :disabled / [aria-disabled="true"]
 *           .is-loading / [aria-busy="true"]  (keeps its width, shows a spinner)
 * Works on <button> and <a>.
 */
.ui-btn {
  --_h: var(--ui-control-md);
  --_px: var(--ui-space-4);
  --_fs: var(--ui-text-base);
  --_bg: var(--ui-surface);
  --_bg-hover: var(--ui-surface-hover);
  --_bg-active: var(--ui-surface-sunken);
  --_fg: var(--ui-text-primary);
  --_border: var(--ui-border-strong);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  box-sizing: border-box;
  height: var(--_h);
  min-width: var(--_h);
  padding: 0 var(--_px);
  margin: 0;
  border: 1px solid var(--_border);
  border-radius: var(--ui-radius-md);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ui-font-body);
  font-size: var(--_fs);
  font-weight: var(--ui-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  word-spacing: .12em;   /* Plus Jakarta's space is ~2px at 13px semibold; "Back to app" read as one word */
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  transition: background-color var(--ui-duration-fast) var(--ui-ease),
              border-color var(--ui-duration-fast) var(--ui-ease),
              color var(--ui-duration-fast) var(--ui-ease),
              box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.ui-btn > i, .ui-btn > svg, .ui-btn > img { flex: none; width: 1em; height: 1em; font-size: 1em; line-height: 1; }

.ui-btn:hover { background: var(--_bg-hover); color: var(--_fg); text-decoration: none; }
.ui-btn:active { background: var(--_bg-active); }
.ui-btn:focus { outline: none; }
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }

/* --- sizes --- */
.ui-btn--sm { --_h: var(--ui-control-sm); --_px: var(--ui-space-3); --_fs: var(--ui-text-sm); border-radius: var(--ui-radius-sm); gap: 6px; }
.ui-btn--md { --_h: var(--ui-control-md); --_px: var(--ui-space-4); --_fs: var(--ui-text-base); }
.ui-btn--lg { --_h: var(--ui-control-lg); --_px: var(--ui-space-5); --_fs: var(--ui-text-md); }

/* --- variants --- */
.ui-btn--primary {
  --_bg: var(--ui-primary); --_bg-hover: var(--ui-primary-hover); --_bg-active: var(--ui-primary-active);
  --_fg: var(--ui-on-primary); --_border: transparent;
}
.ui-btn--primary.ui-btn--cta { background: var(--ui-primary-gradient); }
.ui-btn--primary.ui-btn--cta:not(:disabled):not([aria-disabled="true"]):hover { background: var(--ui-primary-hover); }
.ui-btn--primary.ui-btn--cta:not(:disabled):not([aria-disabled="true"]):active { background: var(--ui-primary-active); }

.ui-btn--secondary {
  --_bg: var(--ui-surface); --_bg-hover: var(--ui-surface-hover); --_bg-active: var(--ui-surface-sunken);
  --_fg: var(--ui-text-primary); --_border: var(--ui-border-strong);
}
.ui-btn--ghost {
  --_bg: transparent; --_bg-hover: var(--ui-primary-subtle); --_bg-active: var(--ui-primary-subtle);
  --_fg: var(--ui-primary-text); --_border: transparent;
}
.ui-btn--danger {
  --_bg: var(--ui-danger); --_bg-hover: var(--ui-danger-hover); --_bg-active: var(--ui-danger-hover);
  --_fg: var(--ui-on-status); --_border: transparent;
}

/* --- icon-only: square; give it aria-label (and title for a tooltip) --- */
.ui-btn--icon { --_px: 0; width: var(--_h); }
.ui-btn--icon.ui-btn--ghost { --_fg: var(--ui-text-secondary); --_bg-hover: var(--ui-surface-hover); --_bg-active: var(--ui-surface-sunken); }

/* --- disabled: readable, clearly inactive, no hover --- */
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  --_bg: var(--ui-surface-sunken); --_bg-hover: var(--ui-surface-sunken); --_bg-active: var(--ui-surface-sunken);
  --_fg: var(--ui-text-muted); --_border: var(--ui-border);
  background: var(--_bg);
  cursor: not-allowed;
  box-shadow: none;
}
.ui-btn--ghost:disabled, .ui-btn--ghost[aria-disabled="true"] { --_bg: transparent; --_bg-hover: transparent; --_border: transparent; }
a.ui-btn[aria-disabled="true"] { pointer-events: none; }

/* --- loading: keeps width, hides the label visually (screen readers still read it), shows a spinner --- */
.ui-btn.is-loading,
.ui-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.ui-btn.is-loading > *, .ui-btn[aria-busy="true"] > * { visibility: hidden; }
.ui-btn.is-loading::after,
.ui-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid var(--_fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-btn-spin .7s linear infinite;
}
@keyframes ui-btn-spin { to { transform: rotate(360deg); } }

/* --- group: buttons in a row with even spacing --- */
.ui-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }

@media (prefers-reduced-motion: reduce) {
  .ui-btn { transition: none; }
  .ui-btn.is-loading::after, .ui-btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* --- theme button ([data-ui-theme-toggle], wired by theme.js): the moon in light mode, the
   sun in dark mode. aria-pressed="true" means dark mode is on. --- */
.ui-theme-toggle[aria-pressed="true"] .ui-theme-toggle__moon,
.ui-theme-toggle:not([aria-pressed="true"]) .ui-theme-toggle__sun { display: none; }