:root {
  --base-font-size: 16px;
}


@media (min-width: 2000px) {
  :root {
    --base-font-size: 20px;
  }
}

/* Для обычных десктопов */
@media (min-width: 1024px) and (max-width: 1599px) {
  :root {
    --base-font-size: 16px;
  }
}

/* Для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --base-font-size: 14px;
  }
}

/* Для мобильных */
@media (max-width: 767px) {
  :root {
    --base-font-size: 12px;
  }
}



:root{

  --scale-ratio: 1.25;

  --text-color-simple: #666666;
  --text-color-strong: #444444;
  --text-color-darker: #222222;

  --space-xs: 0.25rem; /*4px*/
  --space-sm: 0.5rem;  /*8px*/
  --space-md: 1rem;    /*16px*/
  --space-lg: 1.5rem;  /*24px*/
  --space-xl: 2rem;    /*32px*/
}

/* старая типографика */

:root {
    --main-color: #00afca;
    --dark-theme: #2c4054;
    --background-color: #1c2833;
    --text-color: #f0f0f0;
    --input-background: #354a5f;
    --input-border: #5c6b78;
    --main-max-width: 1300px;
    --header-margin: calc((100% - var(--main-max-width)) / 2);
    --yellow-theme: #FEC502;
}


html {
    font-size: var(--base-font-size);
    color: var(--text-color-simple);
     }

/* Base body */


:root {
  --text-xs: 0.75rem;   /* 12px  — очень мелкий текст, подписи, комментарии */
  --text-sm: 0.875rem;  /* 14px  — мелкий текст, подписи к элементам */
  --text-base: 1rem;    /* 16px  — базовый размер основного текста */
  --text-lg: 1.125rem;  /* 18px  — немного крупнее обычного, подзаголовки */
  --text-xl: 1.25rem;   /* 20px  — крупный текст, выделения */
  --text-2xl: 1.5rem;   /* 24px  — заголовки 3 уровня */
  --text-3xl: 1.875rem; /* 30px  — заголовки 2 уровня */
  --text-4xl: 2.25rem;  /* 36px  — крупные заголовки, hero-блоки */
  --text-5xl: 3rem;     /* 48px  — главный заголовок страницы */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-color-strong); /* общий цвет для всех заголовков */
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.1;
  margin: 0 0 var(--space-md) 0;
  font-weight: 600;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.15;
  margin: 0 0 var(--space-md) 0;
  font-weight: 400;
}

h3 {
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin: 0 0 var(--space-sm) 0;
  font-weight: 400;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-sm) 0;
    font-weight: 400;
}

h5 {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-xs) 0;
  font-weight: 400;
}

h6 {
  font-size: var(--text-sm);
  line-height: 1.3;
  margin: 0 0 var(--space-xs) 0;
  font-weight: 400;
}

p{ font-size: var(--text-base);
 margin: 0 0 var(--space-md) 0;
 color: var(--text-color-simple:);
 }


.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem; /* 10px 16px */
  font-size: var(--text-base);
  line-height: 1;
  min-height: 2.75rem; /* ~44px for touch */
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: #0b64ff;
  color: #fff;
}


.button--secondary {
  background: transparent;
  border: 1px solid #d0d7de;
  color: var(--text);
}







/* Modern approach: clamp for a responsive base heading (optional) */
.font-dark-mark {
    color: var(--text-color-darker);
}