/* components.css — buttons and the shared error page. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }

.btn--sm { padding-block: var(--space-xs); padding-inline: var(--space-sm); font-size: var(--fs-sm); }
.btn--lg { padding-block: var(--space-md); padding-inline: var(--space-xl); font-size: var(--fs-lg); }

.btn--primary       { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-deep); color: var(--color-on-primary); }
.btn--accent        { background: var(--color-accent); color: var(--color-on-accent); }
.btn--ghost         { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover   { color: var(--color-accent); border-color: var(--color-accent); }
.btn--danger        { background: var(--color-danger); color: var(--color-text); }
.btn--danger:hover  { filter: brightness(1.12); }

/* Forms — login / register / profile. Brand-styled inputs on the dark surface (engineering §7). */
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form__group--check { flex-direction: row; align-items: center; gap: var(--space-sm); }
.form__label {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form__optional { color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form__input {
  inline-size: 100%;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form__input::placeholder { color: var(--color-text-muted); opacity: .55; }
.form__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.form__input.input-validation-error { border-color: var(--color-danger); }
.form__check-input { inline-size: 18px; block-size: 18px; accent-color: var(--color-primary); }
.form__check-label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.form__hint { font-size: var(--fs-sm); color: var(--color-text-muted); }
.form__error { font-size: var(--fs-sm); color: var(--color-danger); }
.form__actions { margin-block-start: var(--space-sm); }
.form__actions .btn { inline-size: 100%; }

/* Generic error page (shared — loads on every page, including /error). */
.error-page { padding-block: var(--space-3xl); }
.error-page__inner { max-inline-size: 640px; margin-inline: auto; text-align: center; }
.error-page__code { font-family: var(--font-mono); font-size: var(--fs-4xl); line-height: 1; color: var(--color-accent-deep); }
.error-page__title { margin-block: var(--space-md); }
.error-page__text { color: var(--color-text-muted); margin-block-end: var(--space-lg); }
.error-page__ref { color: var(--color-text-muted); font-size: var(--fs-sm); margin-block-end: var(--space-lg); }
.error-page__ref code { font-family: var(--font-mono); color: var(--color-text); }