/* Cross-cutting primitives. Rules here are shape-only (padding, border,
 * sizing) — colors come from tokens.css. Widget CSS files compose these
 * with their own layout classes (e.g. `class="auth-submit btn
 * btn--primary"`: `btn` + `btn--primary` give shape + theme,
 * `auth-submit` gives form-level layout). */

/* -------------------------------------------------------------------
 * Buttons
 *
 * Base `.btn` is the shape shared by every button in the app: padding,
 * font-size, border, cursor. Variants (`--primary`, `--ghost`,
 * `--warning`) swap only the palette.
 * ------------------------------------------------------------------- */

.btn {
  font: inherit;
  font-size: var(--text-md);
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  text-align: center;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Tron/synthwave outlined primary: pale-blue neon border over a very
 * dark interior, white text, soft outer + inset glow. Hover brightens
 * the border and amps the glow. */
.btn--primary {
  background: rgba(8, 14, 24, 0.72);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow:
    0 0 10px rgba(122, 170, 255, 0.28),
    inset 0 0 14px rgba(122, 170, 255, 0.08);
}

.btn--primary:hover:not(:disabled) {
  border-color: #b6e2ff;
  box-shadow:
    0 0 16px rgba(122, 170, 255, 0.55),
    inset 0 0 18px rgba(122, 170, 255, 0.16);
}

.btn--primary:disabled {
  box-shadow: none;
}

/* Link-style: no border, smaller, used for "secondary action" text
 * buttons (e.g. "need an account? register"). */
.btn--ghost {
  padding: 4px 0;
  font-size: var(--text-xs);
  color: var(--color-ghost-fg);
  border: none;
  text-align: left;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--color-ghost-hover);
}

/* Warning-family outline button — used in the email-verification
 * banner. Distinct palette from accent so the call-to-action reads as
 * "attention needed" rather than "primary next step." */
.btn--warning {
  padding: 4px 10px;
  font-size: var(--text-xs);
  color: var(--color-warning-fg);
  border-color: var(--color-warning-border);
}

.btn--warning:hover:not(:disabled) {
  background: var(--color-warning-hover);
}