/* =================================================================
   RESPONSIVE FORMS — Touch-friendly, mobile-first form defaults
   Loaded after tokens.css, before page-specific CSS.
   ================================================================= */

input,
select,
textarea {
  width: 100%;
  min-height: var(--touch-target);
  font-size: max(16px, var(--text-base));
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) ease,
              outline-color var(--duration-fast) ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

button,
[type="submit"],
[type="button"],
[type="reset"] {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8C8C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

textarea {
  min-height: calc(var(--touch-target) * 3);
  resize: vertical;
}

/* Error states */
.is-invalid,
.form-error {
  border-color: var(--color-danger);
}

.is-invalid:focus,
.form-error:focus {
  outline-color: var(--color-danger);
}

.form-error-message {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}