/* ====================== */
/* FONT SIZE SYSTEM (rem) */
/* ====================== */
:root {

}

/* ---------------------- */
/* Размеры шрифтов (rem)  */
/* ---------------------- */
.text-xs   { font-size: calc(0.75rem * var(--scale-factor)); }  /* ~12px */
.text-sm   { font-size: calc(0.875rem * var(--scale-factor)); } /* ~14px */
.text-base { font-size: calc(1rem * var(--scale-factor)); }     /* ~16px */
.text-md   { font-size: calc(1.125rem * var(--scale-factor)); } /* ~18px */
.text-lg   { font-size: calc(1.25rem * var(--scale-factor)); }  /* ~20px */
.text-xl   { font-size: calc(1.5rem * var(--scale-factor)); }   /* ~24px */
.text-2xl  { font-size: calc(2rem * var(--scale-factor)); }     /* ~32px */
.text-3xl  { font-size: calc(2.5rem * var(--scale-factor)); }   /* ~40px */
.text-4xl  { font-size: calc(3rem * var(--scale-factor)); }     /* ~48px */

/* ---------------------- */
/* Относительные размеры (em) */
/* ---------------------- */
.em-80  { font-size: 0.8em; }  /* 80% от родителя */
.em-90  { font-size: 0.9em; }  /* 90% от родителя */
.em-110 { font-size: 1.1em; }  /* 110% от родителя */
.em-120 { font-size: 1.2em; }  /* 120% от родителя */

/* ---------------------- */
/* Жирность шрифта       */
/* ---------------------- */
.font-thin    { font-weight: 100; }
.font-light   { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }

/* ---------------------- */
/* Межстрочное расстояние */
/* ---------------------- */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-normal  { line-height: 1.5; }
.leading-loose   { line-height: 2; }

/* ---------------------- */
/* Межбуквенное расстояние */
/* ---------------------- */
.tracking-tight  { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.05em; }

/* ---------------------- */
/* Адаптация для мобильных */
/* ---------------------- */
@media (max-width: 768px) {
    :root {
        --scale-factor: 1.1; /* Уменьшаем масштаб на мобильных */
    }

    .text-2xl { font-size: calc(1.75rem * var(--scale-factor)); }
    .text-3xl { font-size: calc(2rem * var(--scale-factor)); }
    .text-4xl { font-size: calc(2.25rem * var(--scale-factor)); }
}