<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;
}

<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;
}

<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;
}

<h1 class="fluid-heading">Цей заголовок адаптується плавно</h1>
<p class="fluid-text">А цей текст теж масштабується, але в меншому діапазоні. Спробуйте змінити ширину вікна.</p>

.fluid-heading {
    font-family: system-ui, sans-serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    color: #1e40af;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.fluid-text {
    font-family: system-ui, sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    color: #475569;
    line-height: 1.6;
    max-width: 65ch;
}