body {
  /* Базовые размеры шрифтов */
  --font-size-10: 0.625rem;    /* 11px */
  --font-size-11: 0.6875rem;    /* 11px */
  --font-size-12: 0.75rem;      /* 12px */
  --font-size-13: 0.8125rem;    /* 13px */
  --font-size-14: 0.875rem;     /* 14px */
  --font-size-15: 0.9375rem;    /* 15px */
  --font-size-16: 1rem;         /* 16px */
  --font-size-17: 1.0625rem;    /* 17px */
  --font-size-18: 1.125rem;     /* 18px */
  --font-size-20: 1.25rem;      /* 20px */
  --font-size-22: 1.375rem;     /* 22px */
  --font-size-24: 1.5rem;       /* 24px */
  --font-size-28: 1.75rem;      /* 28px */
  
  /* Типографические переменные по назначению */
  --font-text-tiny: var(--font-size-12);
  --font-text-small: var(--font-size-14);
  --font-text-base: var(--font-size-16);
  --font-text-medium: var(--font-size-18);
  --font-text-large: var(--font-size-20);
  --font-text-xlarge: var(--font-size-22);
  --font-title-small: var(--font-size-20);
  --font-title-medium: var(--font-size-22);
  --font-title-large: var(--font-size-28);
  
  /* Адаптивные переменные (mobile first) */
  --font-size-btn-mobile: var(--font-size-12);
  --font-size-btn-desktop: var(--font-size-14);
  --font-size-card-title-mobile: var(--font-size-16);
  --font-size-card-title-desktop: var(--font-size-20);
  --font-size-section-title-mobile: var(--font-size-20);
  --font-size-section-title-desktop: var(--font-size-28);
  --font-size-counter-mobile: var(--font-size-12);
  --font-size-counter-desktop: var(--font-size-14);
  --font-size-badge-mobile: var(--font-size-14);
  --font-size-badge-desktop: var(--font-size-16);
}

html, body {
    font-size: 18px;
}

@media (min-width: 480px) {
    html, body {
        font-size: 17px;

        /* --font-size-btn-mobile: var(--font-size-12); */
        /* --font-size-card-title-mobile: var(--font-size-16);
        --font-size-section-title-mobile: var(--font-size-20);
        --font-size-counter-mobile: var(--font-size-12);
        --font-size-badge-mobile: var(--font-size-14); */
    }
}

@media (min-width: 576px) {
    html, body {
        font-size: 16px;

        /* --font-size-btn-mobile: var(--font-size-12); */
        /* --font-size-card-title-mobile: var(--font-size-16);
        --font-size-section-title-mobile: var(--font-size-20);
        --font-size-counter-mobile: var(--font-size-12);
        --font-size-badge-mobile: var(--font-size-14); */
    }
}