// CSS Variables for radios and checkboxes
:root {
  // Form element colors
  --color-background-input-field: var(--color-white);
  --color-form-text: var(--color-paragraph);
  --color-form-label-text: var(--color-form-text);
  --color-required-label-text: var(--color-form-text);
  --color-border-forms: var(--color-paragraph);
  --color-border-forms-focus: var(--color-paragraph);
  --color-button: var(--color-white);
  --color-button-hover: var(--color-white);
  --color-button-background: var(--color-east-bay);
  --color-button-background-hover: var(--color-valhalla);
  --color-checkbox: var(--color-east-bay);
  --color-checkbox-outline: 0 0 0 3px rgb(84 87 115 / .2);
  --color-checkbox-border-hover: color.adjust(#545773, 15%);
  --color-checkbox-checked: var(--color-form-label-text);
  --color-placeholder: var(--color-paragraph);
  --color-placeholder-focus: var(--color-black);
  --opacity-placeholder: .4;
  --opacity-placeholder-focus: .8;

  // Form element settings
  --border-radius-checkbox: 3px;
  --border-radius-input-field: 3px;
  --border-radius-select: 3px;
  --border-width-checkbox: 1px;
  --border-width-input-field: 1px;
  --font-size-input-fields: var(--font-size-17);
  --font-size-input-labels: var(--font-size-input-fields);
  --font-size-required-text-label: var(--font-size-input-fields);
  --font-size-required-asterisk-label: 22px;
  --form-column-gap: 2rem;
  --form-row-gap: 2rem;
  --form-required-gap: .5rem;
  --form-line-height: 24px;
  --form-padding-vertical: 1rem;
  --form-padding-horizontal: 1.5rem;
  --gap-checkbox: 10px;
  --gap-select-icon: 1.5rem;
  --size-checkbox: 2.2rem;
  --size-checkbox-marker: 12px;
  --size-radio-button: 16px;
  --size-radio-button-marker: 8px;
}