/*
 * inputs.css — Form fields
 * Grailsome Design System — Section 5.5
 */

/* -------------------------------------------------------
   Base input
------------------------------------------------------- */

.input {
  background: var(--color-cream-card);
  border: 1.5px solid var(--color-parch-2);
  border-radius: 3px;
  padding: 0.7rem 1rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-ink);
  transition: border-color var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out);
  width: 100%;
  display: block;
}

.input::placeholder {
  color: var(--color-ink-muted);
}

.input:focus {
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(192, 48, 26, 0.12);
}

/* -------------------------------------------------------
   State modifiers
------------------------------------------------------- */

.input--error {
  border-color: var(--color-red);
}

.input--error:focus {
  box-shadow: 0 0 0 3px rgba(192, 48, 26, 0.12);
}

.input--success {
  border-color: var(--color-mint);
}

.input--success:focus {
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}

/* -------------------------------------------------------
   Field wrapper
------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.field__hint {
  font-family: 'Sora', sans-serif;
  font-weight: 300;
  font-size: var(--text-micro);
  color: var(--color-ink-muted);
}

.field__error {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: var(--text-micro);
  color: var(--color-red);
}