:root {
  /* Base Input Sizes */
  --BaseInputSmall-height: 30px;
  --BaseInputSmall-padding: 0 9px;
  --BaseInputSmall-border-radius: var(--radius-form-small);
  
  --BaseInputMedium-height: 36px;
  --BaseInputMedium-padding: 0 11px;
  --BaseInputMedium-border-radius: var(--radius-form);
  
  --BaseInputLarge-height: 44px;
  --BaseInputLarge-padding: 0 14px;
  --BaseInputLarge-border-radius: var(--radius-form);
  
  --BaseInputX-Large-height: 56px;
  --BaseInputX-Large-padding: 0 18px;
  --BaseInputX-Large-border-radius: var(--radius-form);
  
  /* Select Icon Sizes */
  --SelectIcon-small-width: 28px;
  --SelectIcon-medium-width: 34px;
  --SelectIcon-large-width: 42px;
  --SelectIcon-x-large-width: 54px;
  
  /* Textarea Padding */
  --TextAreaSmall-padding: 5px 8px;
  --TextAreaMedium-padding: 8px 11px;
  --TextAreaLarge-padding: 12px 14px;
  --TextAreaX-Large-padding: 16px 18px;
  
  /* Toggle Styles */
  --ToggleBackground-color: var(--color-content-secondary);
  --ToggleKnob-color: var(--color-background-primary);
}

/* Light theme form styles */
:root,
:root[data-theme=light] {
  /* Form Input */
  --FormInput-border: var(--color-neutral-300);
  --FormInput-background: var(--color-white);
  --FormInput-hover-border: #c3c6cb;
  
  /* Disabled Form Input */
  --FormInputDisabled-border: var(--color-neutral-300);
  --FormInputDisabled-background: var(--color-neutral-100);
  
  /* Error Form Input */
  --FormInputError-border: var(--color-red-500);
  --FormInputError-background: var(--color-red-050);
  --FormInputError-hover-border: #f33151;
  --FormInputError-hover-background: #fff5f5;
  
  /* Form Check */
  --FormCheck-border: var(--color-neutral-300);
  --FormCheck-background: var(--color-white);
  --FormCheck-hover-border: #c3c6cb;
  
  /* Disabled Form Check */
  --FormCheckDisabled-border: var(--color-neutral-300);
  --FormCheckDisabled-background: var(--color-neutral-100);
  
  /* Error Form Check */
  --FormCheckError-border: var(--color-red-500);
  --FormCheckError-hover-border: #f33151;
  --FormCheckError-background: var(--color-white);
  
  /* Active Form Check */
  --FormCheckActive-border: var(--color-orange-500);
  --FormCheckActive-background: var(--color-orange-500);
  --FormCheckActive-hover-background: #ff751a;
  
  /* Disabled Active Form Check */
  --FormCheckActiveDisabled-border: var(--color-neutral-300);
  --FormCheckActiveDisabled-background: var(--color-neutral-300);
  
  /* Error Active Form Check */
  --FormCheckActiveError-border: var(--color-red-500);
  --FormCheckActiveError-background: var(--color-red-500);
  --FormCheckActiveError-hover-border: #f33151;
  --FormCheckActiveError-hover-background: #f33151;
  
  /* Success Active Form Check */
  --FormCheckActiveSuccess-background: var(--color-success);
  
  /* Form Field */
  --FormField-border: var(--color-neutral-200);
  --FormField-hover-border: #e9eaec;
  --FormField-background: var(--color-white);
  
  /* Disabled Form Field */
  --FormFieldDisabled-border: var(--color-neutral-200);
  --FormFieldDisabled-background: var(--color-neutral-050);
  
  /* Active Form Field */
  --FormFieldActive-border: var(--color-orange-300);
  --FormFieldActive-background: var(--color-orange-050);
  --FormFieldActive-hover-background: #fffaf5;
  --FormFieldActive-hover-border: #ffcba3;
  
  /* Error Form Field */
  --FormFieldError-border: var(--color-red-300);
  --FormFieldError-background: var(--color-red-050);
  --FormFieldError-hover-border: #ff949f;
  --FormFieldError-hover-background: #fff5f5;
  
  /* Form Select */
  --FormSelect-border: var(--color-neutral-300);
  --FormSelect-background: var(--color-neutral-100);
  --FormSelect-hover-border: #d1d3d7;
  --FormSelect-hover-background: #f7f7f8;
  
  /* Error Form Select */
  --FormSelectError-border: var(--color-red-500);
  --FormSelectError-background: var(--color-red-050);
  --FormSelectError-hover-border: #f33151;
  --FormSelectError-hover-background: #fff5f5;
  
  /* Dark Form Select */
  --FormSelectDark-background: var(--color-neutral-600);
  --FormSelectDark-border: var(--color-neutral-500);
  --FormSelectDark-color: var(--color-neutral-100);
  --FormSelectDark-hover-border: #5a5e66;
  --FormSelectDark-hover-color: #edeef0;
}

/* Dark theme form styles */
@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Form Input */
    --FormInput-border: var(--color-neutral-500);
    --FormInput-background: var(--color-neutral-700);
    --FormInput-hover-border: #676b73;
    
    /* Disabled Form Input */
    --FormInputDisabled-border: var(--color-neutral-500);
    --FormInputDisabled-background: var(--color-neutral-600);
    
    /* Error Form Input */
    --FormInputError-border: var(--color-red-600);
    --FormInputError-background: var(--color-red-900);
    --FormInputError-hover-border: #c0223d;
    --FormInputError-hover-background: #4f2027;
    
    /* Form Check */
    --FormCheck-border: var(--color-neutral-500);
    --FormCheck-background: var(--color-neutral-700);
    --FormCheck-hover-border: #676b73;
    
    /* Disabled Form Check */
    --FormCheckDisabled-border: var(--color-neutral-500);
    --FormCheckDisabled-background: var(--color-neutral-600);
    
    /* Error Form Check */
    --FormCheckError-border: var(--color-red-600);
    --FormCheckError-hover-border: #c0223d;
    --FormCheckError-background: var(--color-neutral-700);
    
    /* Active Form Check */
    --FormCheckActive-border: var(--color-orange-600);
    --FormCheckActive-background: var(--color-orange-600);
    --FormCheckActive-hover-background: #d33e00;
    
    /* Disabled Active Form Check */
    --FormCheckActiveDisabled-border: var(--color-neutral-500);
    --FormCheckActiveDisabled-background: var(--color-neutral-500);
    
    /* Error Active Form Check */
    --FormCheckActiveError-border: var(--color-red-600);
    --FormCheckActiveError-background: var(--color-red-600);
    --FormCheckActiveError-hover-border: #ff264a;
    --FormCheckActiveError-hover-background: #ff264a;
    
    /* Form Field */
    --FormField-border: var(--color-neutral-500);
    --FormField-hover-border: #4d5159;
    --FormField-background: var(--color-neutral-700);
    
    /* Disabled Form Field */
    --FormFieldDisabled-border: var(--color-neutral-500);
    --FormFieldDisabled-background: var(--color-neutral-600);
    
    /* Active Form Field */
    --FormFieldActive-border: var(--color-orange-700);
    --FormFieldActive-background: var(--color-orange-900);
    --FormFieldActive-hover-background: #4a2319;
    --FormFieldActive-hover-border: #b53f0d;
    
    /* Error Form Field */
    --FormFieldError-border: var(--color-red-600);
    --FormFieldError-background: var(--color-red-900);
    --FormFieldError-hover-border: #c0223d;
    --FormFieldError-hover-background: #4f2027;
    
    /* Form Select */
    --FormSelect-border: var(--color-neutral-500);
    --FormSelect-background: var(--color-neutral-600);
    --FormSelect-hover-border: #676b73;
    --FormSelect-hover-background: #42444a;
    
    /* Error Form Select */
    --FormSelectError-border: var(--color-red-600);
    --FormSelectError-background: var(--color-red-900);
    --FormSelectError-hover-border: #c0223d;
    --FormSelectError-hover-background: #4f2027;
  }
}

/* Brand V1 light theme form styles */
:root[data-bv="1"],
:root[data-bv="1"][data-theme=light] {
  --BaseInputSmall-border-radius: var(--radius-form-small);
  --BaseInputMedium-border-radius: var(--radius-form);
  --BaseInputLarge-border-radius: var(--radius-form);
  --BaseInputX-Large-border-radius: var(--radius-form);
  
  /* Form Input */
  --FormInput-border: var(--color-neutral-500);
  --FormInput-background: var(--color-white);
  --FormInput-hover-border: var(--color-neutral-700);
  
  /* Disabled Form Input */
  --FormInputDisabled-border: var(--color-neutral-500);
  --FormInputDisabled-background: var(--color-neutral-100);
  
  /* Error Form Input */
  --FormInputError-border: var(--color-mOrange-800);
  --FormInputError-background: var(--color-mOrange-050);
  --FormInputError-hover-border: var(--color-mOrange-900);
  --FormInputError-hover-background: var(--color-mOrange-100);
  
  /* Form Check */
  --FormCheck-border: var(--color-neutral-500);
  --FormCheck-background: var(--color-white);
  --FormCheck-hover-border: var(--color-neutral-700);
  
  /* And more Brand V1 specific form styles... */
}
