:root {
  /* Основные цвета (точно как в PDF) */
  --color-dark: #1B1B1B;        /* Dark */
  --color-text: #6C6C6C;        /* Text */
  --color-background: #F9FBFF;  /* Background */
  --color-background-2: #F6F7F8; /* Backg 2 */
  --color-stroke: #F2F2F2;      /* Stroke */
  --color-stroke-hover: #DAE0FF; /* Stroke Hover */
  --color-white: #FFFFFF;       /* White */
  --color-accent: #4056b9;       /* Acent (с опечаткой в названии как в PDF) */
  --color-hover: #7588E5;       /* Hover */
  --color-mistake: #E61C1C;    /* Mistake */
  --color-borders: #afa4a4;

  /* Шрифты */
  --font-family-rounded-mplus-1c: "M PLUS Rounded 1c", sans-serif;
  --font-family-exo-2: "Exo 2", sans-serif;
  --font-family-manrope: "Manrope", sans-serif;

  /* Базовые переменные шрифтов для Desktop 1920px - M PLUS Rounded 1c*/
  --text-size-h1: 48px;
  --text-size-h2: 43px;
  --text-size-h3: 28px;
  --text-size-h4: 24px;
  --text-size-h5: 20px;
  --text-size-undertitle: 20px; /* Для крупного текста */
  --text-size-description-1: 18px; /* Для основного текста */
  --text-size-description-2: 16px; /* Для второстепенного текста */
  --text-size-button: 20px; /* Для кнопок */
  --text-size-menu: 18px; /* Для меню */
  --text-size-description-3: 14px; /* Для второстепенного текста */

  --font-weight-title: 500; /* Medium / 500  для заголовков */
  --font-weight-button: 500; /* Medium / 500  для кнопки */
  --font-weight-text: 400; /* Medium / 500  для основного текста */
  --font-weight-menu: 400; /* Medium / 500  для текста меню */

  --line-height-title: 130%; /* 130% для заголовков */
  --line-height-menu: 130%; /* 130% для меню */
  --line-height-text: 140%; /* 140% для основного текста */
  --line-height-button: 140%; /* 140% для текста кнопки */

  --letter-spacing-default: -1%;

  /* Базовые переменные шрифтов для Desktop 1920px - Exo 2*/
  --text-size-price-auto: 26px;
  --text-size-phone: 20px;
  --text-size-price-table: 16px;
}

/* Desktop 1440px - M PLUS Rounded 1c*/
@media screen and (max-width: 1440px) {
  :root {
    --text-size-h1: 48px;
    --text-size-h2: 43px;
    --text-size-h3: 28px;
    --text-size-h4: 24px;
    --text-size-h5: 20px;
    --text-size-undertitle: 20px; /* Для крупного текста */
    --text-size-description-1: 18px; /* Для основного текста */
    --text-size-description-2: 16px; /* Для второстепенного текста */
    --text-size-button: 20px; /* Для кнопок */
    --text-size-menu: 18px; /* Для меню */
    --text-size-description-3: 14px; /* Для второстепенного текста */

    /* Базовые переменные шрифтов для Desktop 1440px - Exo 2*/
    --text-size-price-auto: 26px;
    --text-size-phone: 20px;
    --text-size-price-table: 16px;
  }
}

/* Tablet 768px - M PLUS Rounded 1c*/
@media screen and (max-width: 900px) {
  :root {
    --text-size-h1: 40px;
    --text-size-h2: 38px;
    --text-size-h3: 24px;
    --text-size-h4: 22px;
    --text-size-h5: 18px;
    --text-size-undertitle: 18px; /* Для крупного текста */
    --text-size-description-1: 18px; /* Для основного текста */
    --text-size-description-2: 16px; /* Для второстепенного текста */
    --text-size-button: 20px; /* Для кнопок */
    --text-size-menu: 16px; /* Для меню */

    /* Базовые переменные шрифтов для Tablet 768px - Exo 2*/
    --text-size-price-auto: 22px;
    --text-size-phone: 18px;
    --text-size-price-table: 16px;
  }
}

/* Mobile 375px - M PLUS Rounded 1c*/
@media screen and (max-width: 600px) {
  :root {
    --text-size-h1: 30px;
    --text-size-h2: 28px;
    --text-size-h3: 22px;
    --text-size-h4: 20px;
    --text-size-h5: 18px;
    --text-size-undertitle: 18px; /* Для крупного текста */
    --text-size-description-1: 16px; /* Для основного текста */
    --text-size-description-2: 16px; /* Для второстепенного текста */
    --text-size-button: 18px; /* Для кнопок */
    --text-size-menu: 16px; /* Для меню */

    /* Базовые переменные шрифтов для Mobile 375px - Exo 2*/
    --text-size-price-auto: 20px;
    --text-size-phone: 16px;
    --text-size-price-table: 16px;
  }
}

@media screen and (max-width: 400px) {
    :root {
      --text-size-h1: 28px;
      --text-size-h2: 26px;
      --text-size-h3: 22px;
      --text-size-h4: 20px;
      --text-size-h5: 16px;
      --text-size-undertitle: 16px; /* Для крупного текста */
      --text-size-description-1: 14px; /* Для основного текста */
      --text-size-description-2: 14px; /* Для второстепенного текста */
      --text-size-button: 16px; /* Для кнопок */
      --text-size-menu: 14px; /* Для меню */
  
      /* Базовые переменные шрифтов для Mobile 375px - Exo 2*/
      --text-size-price-auto: 20px;
      --text-size-phone: 16px;
      --text-size-price-table: 16px;
    }
  }

/* Добавьте свои переменные по необходимости */