@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: var(--xf-ink);
    font-family: var(--xf-font-body);
  }

  .field__label {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .field__input {
    width: 100%;
    height: 3.5rem;
    padding: 0 var(--space-md);
    border: var(--xf-border);
    border-radius: var(--xf-radius-sm);
    background: var(--xf-surface);
    color: var(--xf-ink);
    font-size: 1.125rem;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }

  .field__input::placeholder {
    color: var(--xf-ink-muted);
    opacity: 1;
  }

  .field__input:hover { box-shadow: var(--xf-shadow-sm); }

  .field__input:focus-visible {
    outline: var(--xf-focus-ring);
    outline-offset: var(--xf-focus-offset);
    box-shadow: var(--xf-shadow-sm);
  }

  .field__input[aria-invalid="true"] { background: var(--xf-red-soft); }

  .field__error {
    align-self: flex-start;
    padding: 0.125rem var(--space-sm);
    border: var(--xf-border-thin);
    border-radius: var(--xf-radius-sm);
    background: var(--xf-red-soft);
    color: var(--xf-ink);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .field__hint {
    color: var(--xf-ink-soft);
    font-size: var(--text-sm);
  }
}