@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima/ProximaNova-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima/ProximaNova-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima/ProximaNova-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("/fonts/proxima/ProximaNova-Extrabld.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Основные цвета и шрифты */
  --font-family-base: "Proxima Nova", Arial, sans-serif;
  --page-background: #f5f5f5;
  --color-text: #191919;
  --color-surface: #ffffff;
  --surface-border-radius: 12px;
  --color-accent: #ff0011;

  --cont-padding-mobile: 20px;
  --cont-padding-tablet: 32px;
  --cont-padding-tablet-h: 30px;
  --cont-padding-desktop: 80px;
  --cont-max-width: 1600px;
  --header-h: 70px;

  --preloader-page-primary: #000222;
  --preloader-page-secondary: #ff0011;
  --preloader-dot-primary: #ff0011;
  --preloader-dot-secondary: #000222;

  --alert-background: #333333;
  --alert-danger-background: #b80000;
  --alert-success-background: #00b809;
  --alert-text: #ffffff;
  --alert-link: #f98e2d;

  --button-white-space: nowrap;
  --button-transition: transform 160ms ease, background-color 160ms ease;
  --button-hover-transform: translateY(-2px);
  --button-md-height: 36px;
  --button-md-padding-x: 24px;
  --button-md-font-size: 14px;
  --button-md-line-height: 1.3;
  --button-md-font-weight: 700;
  --button-md-border-radius: 4px;

  /* Кнопка регистрации и т.д. */
  --button-primary-background: var(--color-accent);
  --button-primary-text: #ffffff;
  --button-primary-hover-background: #e80010;
  --button-primary-hover-text: #ffffff;

  /* Кнопка входа и т.д. */
  --button-secondary-background: var(--color-surface);
  --button-secondary-text: #161616;
  --button-secondary-border: none;
  --button-secondary-hover-background: #eeeeee;
  --button-secondary-hover-text: #161616;
  --button-secondary-hover-outline: none;

  /* Кнопка "Назад" в регистрации и т.д. */
  --button-tertiary-background: #f5f5f5;
  --button-tertiary-text: #161616;
  --button-tertiary-border: none;
  --button-tertiary-hover-background: #eeeeee;
  --button-tertiary-hover-text: #161616;

  /* Инпуты, селекты и т.п. */
  --control-md-height: 3rem;
  --control-md-font-size: 0.875em;
  --control-md-line-height: 1.55;
  --control-md-padding-x: 0.8571em;
  --control-border-radius: 4px;
  --control-background: var(--color-surface);
  --control-color-label: var(--color-text);
  --control-color-text: var(--color-text);
  --control-color-placeholder: #888888;
  --control-color-border: #e5e5e5;
  --control-color-focus-border: #a8a8a8;
  --control-focus-shadow: 0 0 0 2px rgb(0 0 0 / 4%);
  --control-transition:
    border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}