/* ######################################### */
/* #  CSS переменные для гибкой настройки  # */
/* ######################################### */
:root {
  --container-width: 1520px;

  /* Типографика */
  /* Главный шрифт */
  --font-family: "Manrope";

  /* Стили для заголовков h1 */
  --font-size-h1: calc((100vw - 960px) / (1920 - 960) * (42 - 32) + 32px);
  --font-weight-h1: 600;

  /* Стили для заголовков h2 */
  --font-size-h2: calc((100vw - 960px) / (1920 - 960) * (36 - 24) + 24px);
  --font-weight-h2: 600;

  /* Стандартный шрифт для всех элементов */
  --font-size-body: calc((100vw - 960px) / (1920 - 960) * (16 - 12) + 12px);
  --font-weight-body: 400;

  /* Main text Menu */
  --font-size-main-text-menu: calc((100vw - 960px) / (1920 - 960) * (14 - 10) + 10px);
  --font-weight-main-text-menu: 600;

  /* Add text Menu */
  --font-size-add-text-menu: calc((100vw - 960px) / (1920 - 960) * (12 - 10) + 10px);
  --font-weight-add-text-menu: 400;

  /* Navigation text Menu */
  --font-size-navigation-text-menu: calc((100vw - 960px) / (1920 - 960) * (14 - 10) + 10px);
  --font-weight-navigation-text-menu: 400;

  /* Button text */
  --font-size-button-text: calc((100vw - 960px) / (1920 - 960) * (18 - 12) + 12px);
  --font-weight-button-text: 600;

  /* H1 text Detail Card */
  --font-size-detail-card: calc((100vw - 960px) / (1920 - 960) * (24 - 18) + 18px);
  --font-weight-detail-card: 600;

  /* Tab text Detail Card */
  --font-size-text-detail-card: calc((100vw - 960px) / (1920 - 960) * (20 - 14) + 14px);
  --font-weight-text-detail-card: 500;

  /* Price text Detail Card */
  --font-size-price-detail-card: calc((100vw - 960px) / (1920 - 960) * (36 - 22) + 22px);
  --font-weight-price-detail-card: 700;

  /* Цвета */
  --button-bordered-border-color: #bfbfbf;

  /* Цвета бренда */
  --brand-blue: #034ea2;
  --brand-orange: #f37021;

  /* Фоновые цвета */
  --background-light: #ffffff;
  --background-regular: #f4f6f9;
  --background-medium: #e9ecef;
  --background-bold: #d0d3d6;

  /* Цвета шрифтов */
  --font-color-main: #000000;
  --font-color-white: #ffffff;
  --font-color-grey: #7c7c7c;
  --font-color-accent-blue: #034ea2;
  --font-color-accent-orange: #f37021;

  /* Дополнительные цвета */
  --additional-color-1: rgba(255, 219, 1, 0.5);
  --additional-color-2: rgba(253, 198, 8, 0.5);
  --additional-color-3: rgba(251, 179, 13, 0.5);
  --additional-color-4: rgba(249, 162, 18, 0.5);
  --additional-color-5: rgba(246, 139, 25, 0.5);

  /* Дополнительные настройки */
  --border-radius: 5px;
  --element-min-height: 42px;
  --transition: all 0.2s ease-in-out;
  --box-shadow: 0 0 15px 2px rgba(3, 78, 162, 0.12);
  --overlay-background: rgba(3, 78, 162, 0.05);
  --overlay-backdrop-filter: blur(3px);

  --container-margin-top: calc((100vw - 960px) / (1920 - 960) * (40 - 20) + 20px);
  --container-margin-bottom: calc((100vw - 960px) / (1920 - 960) * (40 - 20) + 20px);
  --container-margin-bottom-large: calc((100vw - 960px) / (1920 - 960) * (90 - 45) + 45px);

  --container-gap: calc((100vw - 960px) / (1920 - 960) * (40 - 20) + 20px);

  --error-color: #e8330a;
  --aspect-ratio: 1/1.333;

  --label-green: rgb(22, 182, 82);
  --label-red: rgb(255, 0, 0);
  --label-blue: rgb(2, 36, 86);
  --label-orange: rgb(251, 111, 49);
  --label-yellow: rgb(216, 148, 0);
}

@media screen and (max-width: 960px) {
  :root {
    /* Стили для заголовков h1 */
    --font-size-h1: calc((100vw - 364px) / (960 - 364) * (32 - 24) + 24px);

    /* Стили для заголовков h2 */
    --font-size-h2: calc((100vw - 364px) / (960 - 364) * (24 - 18) + 18px);

    /* Стандартный шрифт для всех элементов */
    --font-size-body: calc((100vw - 364px) / (960 - 364) * (16 - 14) + 14px);

    /* Main text Menu */
    --font-size-main-text-menu: calc((100vw - 364px) / (960 - 364) * (14 - 12) + 12px);

    /* Add text Menu */
    --font-size-add-text-menu: calc((100vw - 364px) / (960 - 364) * (12 - 10) + 10px);

    /* Navigation text Menu */
    --font-size-navigation-text-menu: calc((100vw - 364px) / (960 - 364) * (14 - 12) + 12px);

    /* Button text */
    --font-size-button-text: 14px;

    /* H1 text Detail Card */
    --font-size-detail-card: calc((100vw - 364px) / (960 - 364) * (20 - 16) + 16px);

    /* Tab text Detail Card */
    --font-size-text-detail-card: calc((100vw - 364px) / (960 - 364) * (18 - 14) + 14px);

    /* Price text Detail Card */
    --font-size-price-detail-card: calc((100vw - 364px) / (960 - 364) * (28 - 20) + 20px);

    --container-margin-top: 25px;
    --container-margin-bottom: 25px;
    --container-margin-bottom-large: 45px;
  }
}

/* Медиа-запрос для всех экранов выше 1920 пикселей */
@media screen and (min-width: 1920px) {
  :root {
    /* Стили для заголовков h1 */
    --font-size-h1: 42px;

    /* Стили для заголовков h2 */
    --font-size-h2: 36px;

    /* Стандартный шрифт для всех элементов */
    --font-size-body: 16px;

    /* Main text Menu */
    --font-size-main-text-menu: 14px;

    /* Add text Menu */
    --font-size-add-text-menu: 12px;

    /* Navigation text Menu */
    --font-size-navigation-text-menu: 14px;

    /* Button text */
    --font-size-button-text: 18px;


    /* H1 text Detail Card */
    --font-size-detail-card: 24px;

    /* Tab text Detail Card */
    --font-size-text-detail-card: 20px;

    /* Price text Detail Card */
    --font-size-price-detail-card: 36px;

    /* Отступы и промежутки */
    --container-margin-top: 40px;
    --container-margin-bottom: 40px;
    --container-margin-bottom-large: 90px;
    --container-gap: 40px;
  }
}