/**
 * Shared form-control surface styles (`.inp` in the design system handoff).
 * Imported by Input and Select so geometry stays aligned.
 */
export const formControlBase =
  'w-full rounded-[var(--r-control)] border border-[var(--bdr)] bg-[var(--bg)] px-3 py-[9px] text-[length:var(--fs-body)] text-[var(--txt)] outline-none transition-[border-color] duration-150 placeholder:text-[var(--muted)] focus:border-[var(--acc-m)] focus-visible:border-[var(--acc-m)] disabled:cursor-not-allowed disabled:opacity-50'

export const formControlState = {
  default: '',
  invalid: 'border-[var(--err)] focus:border-[var(--err)] focus-visible:border-[var(--err)]',
  valid: 'border-[var(--suc)] focus:border-[var(--suc)] focus-visible:border-[var(--suc)]',
} as const
