:root {
    --font-family-monospace: Consolas, "PT Mono", "Roboto Mono", "Liberation Mono", "Segoe UI Mono", "Courier New", monospace;
    --primary-hue: var(--cyan-hue); // hue
    --primary-sat: var(--cyan-sat); // saturation
    
    --primary-hue: 264deg;
    --primary-sat: 79%;
    --body-color: var(--primary850);
    --layout-max-width: 1000px;
    --layout-wrap-padding: 20px;
    --table-th-background: var(--primary100);
    --table-tr-border-bottom: var(--primary200) 1px solid;
    --table-th-border-top: var(--primary200) 1px solid;
    --table-th-border-bottom: var(--primary200) 1px solid;
    --table-striped-odd-bg: var(--primary50);
    --table-striped-even-bg: var(--primary100);
    --h1-font-size: 2.5rem;    /* t250 */
    --h2-font-size: 2.1rem;    /* t210 */
    --h3-font-size: 1.75rem;   /* t175 */
    --h4-font-size: 1.45rem;   /* t150 */
    --h5-font-size: 1.2rem;    /* t120 */
    --h6-font-size: 1rem;      /* t100 */
    --headings-line-height: 1.3;
    --headings-font-weight: normal;
    --hX-margin: 0.5em 0 0.3em 0;
}
@media (max-width: 768px) {
    :root {
        --h1-font-size: 2rem;      /* t200 */
        --h2-font-size: 1.75rem;   /* t175 */
        --h3-font-size: 1.5rem;    /* t150 */
        --h4-font-size: 1.25rem;   /* t125 */
        --h5-font-size: 1.1rem;    /* t110 */
        --h6-font-size: 1rem;      /* t100 */
    }
}
.dark {
    --body-bg: var(--primary950);
    --body-color: var(--primary100);
    --link-color: var(--primary500);
    --link-hover-color: var(--primary100);
    --form-input-background: var(--primary900);
    --form-input-color: var(--primary200);
    --form-input-border: 1px solid var(--primary750);
    --form-input-focus-border-color: var(--primary600);
    --form-input-focus-shadow: 0 0 0 0.1rem var(--primary700);
    --form-input-focus-background: var(--primary750);
    --form-input-focus-color: var(--primary150);
    --button-bg-color: var(--primary700);
    --button-text-color: var(--primary100);
    --button-disabled-bg-color: var(--gray600);
    --button-disabled-text-color: var(--gray200);
    --pre-bg-color: var(--primary800);
    --pre-text-color: var(--primary200);
    --pre-border-top: var(--primary700) solid 1px;
    --pre-border-right: var(--primary700) double 3px;
    --pre-border-bottom: var(--primary700) solid 1px;
    --pre-border-left: var(--primary700) double 3px;
    --code-background-color: var(--primary800);
    --mark-background-color: var(--yellow700);
    --mark-text-color: var(--yellow100);
    --var-background-color: var(--orange650);
    --var-text-color: var(--orange100);
    --kbd-background-color: var(--green650);
    --kbd-text-color: var(--green100);
    --samp-background-color: var(--green800);
    --samp-text-color: var(--green200);
    --bordered: var(--primary600) 1px solid;
    --thumbnail-border: var(--primary700) 1px solid;
	
    --table-th-border-top: var(--primary900) 1px solid;
    --table-th-border-bottom: var(--primary900) 1px solid;
    --table-th-background: var(--primary900);
    --table-tr-border-bottom: var(--primary900) 1px solid;

}

/* Стилі для плейсхолдерів */
.form-input::placeholder {
    font-size: 0.9em;
    color: #6b7280;
    /* Нейтральний сірий для світлого режиму */
    opacity: 1;
}
.dark .form-input::placeholder {
    color: #9ca3af;
    /* Світліший сірий для темного режиму */
}



/* Стилі для прокрутки наверх */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary700);
    opacity: 0;
    visibility: hidden;
    color: var(--primary150); /* колір шеврона */
    border: 1px solid var(--primary150);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.3s ease;
}
.scroll-to-top.show {
    opacity: 0.8;
    visibility: visible;
}
.scroll-to-top:hover {
    background-color: rgba(30, 60, 90, 1);
}
.scroll-to-top i {
    transform: translate(4px, -2px); /* зсув шеврона вправо на 3px transform: translate(4px, -2px); */
}

.t-line-clamp-single {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    display: inline-block;
}