:root {
  /* fonts */
  --font-default: "DM Sans", sans-serif;
  --font-heading: "Poppins", sans-serif;
  --font-fa: "Font Awesome";

  /* colors */
  --theme-color: #d6eb31;
  --dark-color: #27252f;
  --gray-color: #6f6f6f;
  --light-gray-color: #cecece;
  --extra-light-gray-color: #e6e6e6;
  --light-color: #f7f7f7;
  --white-color: #ffffff;
  --danger-color: #ce2b2baf;

  /* elements */
  --body-background-color: var(--light-color);

  --section-background-color: var(--white-color);
  --section-accent-background-color: var(--dark-color);

  --heading-color: var(--dark-color);
  --heading-accent-color: var(--white-color);
  --text-color: var(--dark-color);
  --text-accent-color: var(--white-color);
  --border-color: var(--gray-color);
  --border-accent-color: var(--theme-color);

  --checklist-icon-color: var(--theme-color);

  --link-color: var(--dark-color);
  --link-hover-color: var(--theme-color);
  --link-accent-color: var(--theme-color);
  --link-accent-hover-color: var(--white-color);
  --menu-link-color: var(--dark-color);
  --menu-link-hover-color: var(--theme-color);
  --menu-link-accent-color: var(--white-color);
  --menu-link-accent-hover-color: var(--theme-color);

  --button-text-color: var(--dark-color);
  --button-text-hover-color: var(--white-color);
  --button-background-color: var(--theme-color);
  --button-background-hover-color: var(--dark-color);
  --button-border-color: var(--theme-color);
  --button-border-hover-color: var(--dark-color);
  --button-accent-text-color: var(--white-color);
  --button-accent-text-hover-color: var(--dark-color);
  --button-accent-background-color: var(--theme-color);
  --button-accent-background-hover-color: var(--white-color);
  --button-accent-border-color: var(--theme-color);
  --button-accent-border-hover-color: var(--white-color);

  --form-label-text-color: var(--dark-color);
  --form-input-text-color: var(--dark-color);
  --form-input-border-color: var(--light-color);
  --form-input-background-color: var(--light-color);
  --form-input-border-focus-color: var(--dark-gray-color);
  --form-field-validation-error-text-color: var(--danger-color);
  --form-title-paragraph-color: var(--gray-color);
  --form-checkbox-checked-background-color: var(--theme-color);
  --form-checkbox-border-color: var(--dark-color);
  --external-login-border-color: var(--gray-color);

  --tooltip-background-color: var(--dark-color);
  --tooltip-text-color: var(--white-color);

  --section-title-background-color: var(--dark-color);
  --section-title-text-color: var(--white-color);
  --section-title-dot-color: var(--theme-color);

  --brands-background-color: var(--theme-color);

  --account-menu-title-background-color: var(--theme-color);

  --admin-menu-title-background-color: var(--theme-color);

  --progress-bar-background-color: var(--light-color);
  --progress-bar-highlighted-color: var(--theme-color);

  --membership-background-color: var(--light-color);
  --membership-border-color: var(--dark-color);
}