/*
 * LOGOS form components — consume only var(...) from forms-tokens.css (+ themes).
 * BEM: .form, .form__field, .form__label, …
 * Breakpoints: 480px, 768px, 1024px. Typography/spacing in rem/em only.
 */

/* —— Layout —— */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--field-gap);
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}

.form__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: stretch;
  margin-top: var(--space-xs);
}

/* —— Labels & help —— */
.form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--label-weight);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  margin: 0;
}

.form__help {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  margin: 0;
}

.form__error {
  background: var(--color-error-bg);
  border: var(--input-border-width) solid var(--color-error-border);
  color: var(--color-error);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-md) 0;
}

/* —— Text-like controls —— */
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: var(--input-height);
  padding: var(--space-sm) var(--input-padding-x);
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: var(--input-border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__textarea {
  min-height: calc(var(--input-height) * 2);
  resize: vertical;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.125rem var(--color-focus-ring);
}

.form__input:focus-visible,
.form__textarea:focus-visible,
.form__select:focus-visible {
  outline: 0.125rem solid var(--color-focus-ring);
  outline-offset: 0.125rem;
}

/* —— Checkbox & radio —— */
.form__checkbox,
.form__radio {
  width: auto;
  min-height: 1.25em;
  min-width: 1.25em;
  margin: 0;
  accent-color: var(--color-accent);
  vertical-align: middle;
}

/* —— Buttons —— */
.form__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--input-height);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--label-weight);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-md);
  border: var(--input-border-width) solid transparent;
  cursor: pointer;
  transition: opacity var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast);
}

.form__button:hover {
  opacity: 0.92;
}

.form__button:active {
  opacity: 0.85;
}

.form__button:focus-visible {
  outline: 0.125rem solid var(--color-focus-ring);
  outline-offset: 0.125rem;
}

.form__button--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
  width: 100%;
}

.form__button--secondary {
  background: var(--color-surface-elevated);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  width: 100%;
}

.form__actions .form__button--primary,
.form__actions .form__button--secondary {
  width: auto;
  flex: 1 1 8rem;
}

@media (min-width: 480px) {
  .form__input,
  .form__textarea,
  .form__select {
    font-size: var(--font-size-lg);
  }

  .form__button {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 768px) {
  .form {
    font-size: var(--font-size-lg);
  }

  .form__label {
    font-size: var(--font-size-md);
  }

  .form__help,
  .form__error {
    font-size: var(--font-size-md);
  }
}

@media (min-width: 1024px) {
  .form__field {
    gap: var(--space-sm);
  }
}