/* Variables */
:root {
  --base-font-roboto: "Roboto", Helvetica, Arial, sans-serif;
  --base-font-golos-text: "Golos Text", Helvetica, Arial, sans-serif;
  --base-font-proxima-nova: "Proxima Nova", Helvetica, Arial, sans-serif;
  --base-font-helvetica-neue: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --base-font-sitka-small: "Sitka Small", "Times New Roman", serif;
  --base-font-avenir-next-cyr: "Avenir Next Cyr", Helvetica, Arial, sans-serif;
  --base-font-beau-sans-pro: "Beau Sans Pro", Helvetica, Arial, sans-serif;
  --base-font-clear-sans: "Clear Sans", Helvetica, Arial, sans-serif;
  --base-font-din-pro: "DIN Pro", Helvetica, Arial, sans-serif;
  --base-font-exo: "Exo", Helvetica, Arial, sans-serif;
  --base-font-lato: "Lato", Helvetica, Arial, sans-serif;
  --base-font-liberation-serif: "Liberation Serif", "Times New Roman", serif;
  --base-font-museo-sans: "Museo Sans", Helvetica, Arial, sans-serif;
  --base-font-neusa-next-pro: "Neusa Next Pro", Helvetica, Arial, sans-serif;
  --base-font-spectral: "Spectral", "Times New Roman", serif;
  --base-font-ubuntu: "Ubuntu", Helvetica, Arial, sans-serif;

  --gutter-x: 20px;
  --gutter-y: 20px;
  --block-space: 60px;
  --block-space-lg: 80px;
  --content-top-space: 30px;
  --box-shadow: 0 2px 4px 0 #cbcdcf;

  --accent-color: #449df8;

  --main-color: #131314;
  --white-color: #ffffff;
  --main-bg: var(--white-color);
  --line-color: var(--border-color);
  --border-color: #dde2e5;
  --grey-bg: #edeff1;
  --light-grey-bg: #f4f4f4;
  --secondary-color: #9aa7af;
  --error-color: #ff0000;

  --input-border-color: var(--border-color);
  --input-border-focus-color: var(--secondary-color);

  --btn-primary-bg: var(--accent-color);
  --btn-primary-border: var(--accent-color);
  --btn-primary-color: var(--white-color);

  --btn-light-bg: var(--white-color);
  --btn-light-border: var(--white-color);
  --btn-light-color: var(--main-color);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--accent-color);
  --btn-secondary-color: var(--accent-color);

  --btn-outline-bg: var(--white-color);
  --btn-outline-border: var(--border-color);
  --btn-outline-color: var(--main-color);
}

@media (max-width: 767.98px) {
  :root {
    --block-space: 40px;
    --block-space-lg: 40px;
  }
}
/* ! Variables */