<p class="font-stack-demo">
    Цей текст використовує стек шрифтів. Якщо 'Inter' недоступний, браузер спробує 'Segoe UI', потім 'Roboto' і так далі.
</p>

.font-stack-demo {
    font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem;
    color: #1e293b;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

<p class="serif">Serif — шрифт із засічками (Times New Roman, Georgia)</p>
<p class="sans-serif">Sans-serif — без засічок (Arial, Helvetica, Inter)</p>
<p class="monospace">Monospace — моноширинний (Courier, Consolas, Fira Code)</p>
<p class="cursive">Cursive — рукописний (Comic Sans MS, Brush Script)</p>

p {
    font-size: 1.1rem;
    margin: 0.75rem 0;
    padding: 0.5rem;
    border-radius: 4px;
    background-color: #f8fafc;
}

.serif {
    font-family: Georgia, 'Times New Roman', serif;
    border-left: 4px solid #3b82f6;
}

.sans-serif {
    font-family: 'Segoe UI', Arial, sans-serif;
    border-left: 4px solid #10b981;
}

.monospace {
    font-family: 'Fira Code', Consolas, 'Courier New', monospace;
    border-left: 4px solid #f59e0b;
}

.cursive {
    font-family: 'Brush Script MT', cursive;
    border-left: 4px solid #8b5cf6;
}

<p class="text-12">12px — замалий для основного тексту</p>
<p class="text-16">16px — стандартний розмір (default у браузерах)</p>
<p class="text-20">20px — збільшений, комфортний для читання</p>
<p class="text-32">32px — заголовок</p>

p {
    margin: 0.5rem 0;
    color: #1e293b;
    font-family: system-ui, sans-serif;
}
.text-12 {
    font-size: 12px;
}
.text-16 {
    font-size: 16px;
}
.text-20 {
    font-size: 20px;
}
.text-32 {
    font-size: 32px;
}

<div class="parent-em">
    <p>Батько: font-size: 20px</p>
    <p class="child-1em">Дитина: font-size: 1em = 20px</p>
    <p class="child-1-5em">Дитина: font-size: 1.5em = 30px</p>
    <p class="child-0-8em">Дитина: font-size: 0.8em = 16px</p>
</div>

.parent-em {
    font-size: 20px;
    font-family: system-ui, sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.parent-em p {
    margin: 0.3rem 0;
}

.child-1em {
    font-size: 1em;
} /* 20px × 1 = 20px */
.child-1-5em {
    font-size: 1.5em;
} /* 20px × 1.5 = 30px */
.child-0-8em {
    font-size: 0.8em;
} /* 20px × 0.8 = 16px */

<div class="rem-demo">
    <h2>Заголовок: 2rem = 32px</h2>
    <p class="large">Збільшений: 1.25rem = 20px</p>
    <p>Стандартний: 1rem = 16px</p>
    <p class="small">Малий: 0.875rem = 14px</p>
    <div class="nested">
        <p>Вкладений блок — rem НЕ каскадується!</p>
        <div class="nested">
            <p>Ще глибше — все одно 1rem = 16px</p>
        </div>
    </div>
</div>

.rem-demo {
    font-family: system-ui, sans-serif;
    color: #1e293b;
}

.rem-demo h2 {
    font-size: 2rem; /* 16 × 2 = 32px */
    margin: 0 0 0.5rem;
    color: #1e40af;
}

.rem-demo p {
    font-size: 1rem; /* 16 × 1 = 16px */
    margin: 0.25rem 0;
}

.rem-demo .large {
    font-size: 1.25rem; /* 16 × 1.25 = 20px */
}

.rem-demo .small {
    font-size: 0.875rem; /* 16 × 0.875 = 14px */
    color: #64748b;
}

.nested {
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0;
    margin: 0.5rem 0;
}

<p class="w-100">100 — Thin (Тонкий)</p>
<p class="w-300">300 — Light (Легкий)</p>
<p class="w-400">400 — Regular (Звичайний) = normal</p>
<p class="w-500">500 — Medium (Середній)</p>
<p class="w-600">600 — Semi-Bold (Напівжирний)</p>
<p class="w-700">700 — Bold (Жирний) = bold</p>
<p class="w-900">900 — Black (Чорний)</p>

p {
    margin: 0.3rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    color: #1e293b;
}
.w-100 {
    font-weight: 100;
}
.w-300 {
    font-weight: 300;
}
.w-400 {
    font-weight: 400;
}
.w-500 {
    font-weight: 500;
}
.w-600 {
    font-weight: 600;
}
.w-700 {
    font-weight: 700;
}
.w-900 {
    font-weight: 900;
}

<p class="fs-normal">font-style: normal — Звичайний текст</p>
<p class="fs-italic">font-style: italic — Спеціальний курсивний шрифт</p>
<p class="fs-oblique">font-style: oblique — Штучно нахилений шрифт</p>

p {
    margin: 0.5rem 0;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    color: #1e293b;
}
.fs-normal { font-style: normal; }
.fs-italic { font-style: italic; color: #3b82f6; }
.fs-oblique { font-style: oblique; color: #10b981; }

<p class="fv-normal">Звичайний Текст: The Quick Brown Fox</p>
<p class="fv-small-caps">Small Caps Текст: The Quick Brown Fox</p>

p {
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1.1rem;
    color: #1e293b;
}
.fv-normal { font-variant: normal; }
.fv-small-caps { font-variant: small-caps; color: #8b5cf6; font-weight: 600; }

<div class="lh-demo">
    <div class="lh-1">
        <strong>line-height: 1</strong><br />
        Тісний текст. Рядки зливаються та стає важко читати. Такий інтервал — рідко доречний для основного тексту.
    </div>
    <div class="lh-1-4">
        <strong>line-height: 1.4</strong><br />
        Мінімальний комфортний інтервал. Підходить для заголовків та коротких блоків тексту, де простір обмежений.
    </div>
    <div class="lh-1-6">
        <strong>line-height: 1.6 ✅</strong><br />
        Оптимальний інтервал для основного тексту. Забезпечує комфортне читання довгих абзаців на екрані.
    </div>
    <div class="lh-2">
        <strong>line-height: 2</strong><br />
        Подвійний інтервал. Занадто просторий для веб-тексту, але може бути корисним для документів або лендінгів.
    </div>
</div>

.lh-demo {
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    display: grid;
    gap: 0.75rem;
}

.lh-demo > div {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.lh-1 {
    line-height: 1;
}
.lh-1-4 {
    line-height: 1.4;
}
.lh-1-6 {
    line-height: 1.6;
    border-color: #10b981;
    background-color: #dcfce7;
}
.lh-2 {
    line-height: 2;
}

<p class="ls-tight">letter-spacing: -0.02em — Щільний текст</p>
<p class="ls-normal">letter-spacing: normal — Стандартний</p>
<p class="ls-wide">letter-spacing: 0.05em — Розріджений</p>
<p class="ls-caps">LETTER-SPACING: 0.1EM — ВЕЛИКІ ЛІТЕРИ</p>
<hr />
<p class="ws-tight">word-spacing: -2px — Слова ближче</p>
<p class="ws-normal">word-spacing: normal — Стандартний</p>
<p class="ws-wide">word-spacing: 0.5em — Слова далі</p>

p {
    margin: 0.4rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    color: #1e293b;
}

.ls-tight {
    letter-spacing: -0.02em;
}
.ls-normal {
    letter-spacing: normal;
}
.ls-wide {
    letter-spacing: 0.05em;
}
.ls-caps {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0.75rem 0;
}

.ws-tight {
    word-spacing: -2px;
}
.ws-normal {
    word-spacing: normal;
}
.ws-wide {
    word-spacing: 0.5em;
}

<p class="ta-left">text-align: left — Ліве вирівнювання (за замовчуванням для LTR мов)</p>
<p class="ta-center">text-align: center — Центральне вирівнювання</p>
<p class="ta-right">text-align: right — Праве вирівнювання</p>
<p class="ta-justify">
    text-align: justify — Вирівнювання по ширині. Текст розтягується, щоб досягти обох країв контейнера. Може утворювати
    «річки» пробілів у тексті, особливо в вузьких колонках.
</p>

p {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    background-color: #f8fafc;
}

.ta-left {
    text-align: left;
}
.ta-center {
    text-align: center;
}
.ta-right {
    text-align: right;
}
.ta-justify {
    text-align: justify;
}

<p class="td-none">text-decoration: none — без декорації</p>
<p class="td-underline">text-decoration: underline — підкреслення</p>
<p class="td-overline">text-decoration: overline — надкреслення</p>
<p class="td-line-through">text-decoration: line-through — закреслення</p>
<p class="td-custom">Кастомне підкреслення: синє, хвилясте, 2px</p>

p {
    margin: 0.4rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    color: #1e293b;
}

.td-none {
    text-decoration: none;
}
.td-underline {
    text-decoration: underline;
}
.td-overline {
    text-decoration: overline;
}
.td-line-through {
    text-decoration: line-through;
    color: #94a3b8;
}
.td-custom {
    text-decoration: underline wavy #3b82f6 2px;
}

<p class="tt-uppercase">це був текст малими літерами (uppercase)</p>
<p class="tt-lowercase">ЦЕ БУВ ТЕКСТ ВЕЛИКИМИ ЛІТЕРАМИ (lowercase)</p>
<p class="tt-capitalize">це був текст з малої літери (capitalize)</p>
<p class="tt-none">Текст яК В  OriGInaLi (none)</p>

p {
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1.1rem;
    color: #1e293b;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 4px;
    border-left: 3px solid #3b82f6;
}
.tt-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.tt-lowercase { text-transform: lowercase; }
.tt-capitalize { text-transform: capitalize; }
.tt-none { text-transform: none; }

<div class="card-title">Дуже довгий заголовок картки, який точно не вміститься в одному рядку контейнера</div>
<div class="card-title">Короткий заголовок</div>

.card-title {
    width: 300px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    color: #1e293b;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;

    /* Три обов'язкові властивості для ellipsis */
    white-space: nowrap; /* Заборонити перенос */
    overflow: hidden; /* Приховати те, що не вміщується */
    text-overflow: ellipsis; /* Додати «...» */
}

<div class="card-text">
    Це довгий текст, який має бути обрізаний після трьох рядків. Він продовжується далі та далі, щоб продемонструвати,
    як працює багаторядкове обрізання тексту за допомогою CSS. Весь текст, що не вміщується, буде замінений трикрапкою.
</div>

.card-text {
    width: 300px;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.6;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;

    /* Багаторядкова трикрапка */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Кількість рядків */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<div class="typo-system-demo">
    <h1>Головний Заголовок Сторінки</h1>
    <h2>Підзаголовок Секції</h2>
    <p>
        Це основний текст. Він використовує <code>var(--font-sans)</code> для гарнітури та має комфортний міжрядковий
        інтервал <code>var(--leading-normal)</code> для забезпечення максимальної читабельності. Ми також змінили колір
        тексту на темно-сірий, щоб зменшити контрастність і зняти напругу з очей.
    </p>
</div>

.typo-system-demo {
    /* Симуляція :root */
    --font-size-sm: 0.875rem; 
    --font-size-base: 1rem; 
    --font-size-3xl: 2rem; 
    --font-size-4xl: 2.5rem; 

    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'Fira Code', Consolas, monospace;

    --font-normal: 400;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-normal: 1.6;

    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Використання змінних */
.typo-system-demo {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--leading-normal);
    color: #1e293b;
    margin: 0;
}
.typo-system-demo h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin: 0 0 1rem;
    color: #0f172a;
}
.typo-system-demo h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin: 1.5rem 0 0.75rem;
    color: #1e40af;
}
.typo-system-demo p { margin: 0; }
.typo-system-demo code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: #f1f5f9;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    color: #db2777;
}