:root {
    --color-primary-brand: #12a2fc;
    --color-primary: rgb(0, 178, 255);
    --color-primary-seconday: orange;
    --color-primary-hover: #0e8de6;
    --color-primary-link: black;
    --color-secondary: #6c757d;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #dee2e6;

    /* ── Мобільні токени ───────────────────────────────────────────────────
       Єдине джерело значень для мобільної версії. Нові мобільні правила
       пишемо в mobile.css і беремо розміри звідси, а не «на око».
       Брейкпоінт у медіа-запит підставити не можна (CSS так не вміє) —
       його політика описана в шапці mobile.css: мобільний = max-width 820px.
       ───────────────────────────────────────────────────────────────────── */
    --vs-tap: 44px;             /* мінімальний тап-таргет */
    --vs-nav-h: 60px;           /* висота нижньої навігації */
    --vs-header-h: 56px;        /* висота рядка шапки на мобілці */
    --vs-gap: 12px;             /* базовий бічний відступ контенту */
    --vs-radius: 12px;          /* картки, плитки */
    --vs-radius-sm: 8px;        /* поля, кнопки в рядку */

    --vs-ink: #14181f;          /* основний текст */
    --vs-muted: #8a939f;        /* другорядний текст */
    --vs-line: #e7ebf1;         /* розділювачі */
    --vs-bg: #f5f7fa;           /* тло сторінки */
    --vs-card: #ffffff;         /* тло карток */
    --vs-accent-soft: #eaf7ff;  /* світлий акцент під --color-primary */
}

html body {
    overflow-x: hidden;
}


.custom_page_link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--color-primary);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}



.primary-color {
    color: var(--color-primary) !important;
}

.breadcrumb a {
    color: var(--color-primary) !important;
}

.nav-link {
    color: var(--color-primary) !important;
}

.nav-link.active {
    color: white !important;
    background-color: var(--color-primary) !important;
}

.custom-link {
    color: var(--color-primary-link) !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: white !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.page-item.active .page-link{
    z-index: 3;
    color: white !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}


.btn-custom-outline {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}

.btn-custom-outline:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.btn-custom {
    background-color: var(--color-primary-seconday) !important;
    border: 1px solid var(--color-primary-seconday) !important;
}

.custom-text {
    color: var(--color-primary) !important;
}