/* =============================================================
   Socle · Champ de saisie (.sc-field, .sc-input, .sc-textarea)
   Consomme uniquement des tokens sémantiques.
   Anatomie : .sc-field > __label + contrôle + __help | __error
   Tailles : --s, --l (défaut : m)
   ============================================================= */

/* ---- Enveloppe de champ ---- */

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

.sc-field__label {
  color: var(--color-text);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
}

.sc-field__help {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
}

.sc-field__error {
  display: flex;
  align-items: center;
  gap: var(--gap-2xs);
  color: var(--color-danger-text);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
}

/* ---- Contrôle de saisie ---- */

.sc-input,
.sc-textarea {
  /* Tokens de composant : tailles et états ne font que réassigner ceci. */
  --_input-height: var(--control-height-m);
  --_input-padding-x: var(--padding-m);
  --_input-font-size: var(--text-body-size);
  --_input-border: var(--color-border-strong);
  --_input-border-hover: var(--color-border-hover);

  width: 100%;
  height: var(--_input-height);
  padding-inline: var(--_input-padding-x);
  background: var(--color-bg-surface);
  border: var(--border-hairline) solid var(--_input-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--_input-font-size);
  line-height: var(--leading-normal);
  transition:
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

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

/* ---- États ---- */

.sc-input:hover:not(:disabled),
.sc-input[data-state="hover"],
.sc-textarea:hover:not(:disabled),
.sc-textarea[data-state="hover"] {
  border-color: var(--_input-border-hover);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-input[data-state="focus"],
.sc-textarea[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-input[aria-invalid="true"],
.sc-textarea[aria-invalid="true"] {
  --_input-border: var(--color-danger);
  --_input-border-hover: var(--color-danger-hover);
}

.sc-input:disabled,
.sc-input[data-disabled],
.sc-textarea:disabled,
.sc-textarea[data-disabled] {
  background: var(--color-bg-subtle);
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* ---- Tailles ---- */

.sc-input--s {
  --_input-height: var(--control-height-s);
  --_input-padding-x: var(--padding-s);
  --_input-font-size: var(--text-body-s-size);
}

.sc-input--l {
  --_input-height: var(--control-height-l);
  --_input-padding-x: var(--padding-l);
}

/* ---- Zone de texte ---- */

.sc-textarea {
  /* Hauteur minimale structurelle, sans rôle sémantique. */
  --_textarea-min-height: 6rem;

  height: auto;
  min-height: var(--_textarea-min-height);
  padding-block: var(--padding-s);
  resize: vertical;
}