/*
 * SWEB Market — design tokens
 * SWEB Digital Agency
 *
 * Единственный источник правды по цвету, типографике, радиусам и теням.
 * Все значения переопределяются из админки (Тема → Внешний вид) через
 * инлайновый <style> в header.twig, поэтому здесь только дефолты.
 */

:root {
    /* --- Палитра бренда --- */
    --sw-primary: #357af0;
    --sw-primary-dark: #0c296a;
    --sw-primary-light: #4f5f99;
    --sw-primary-rgb: 53, 122, 240;

    --sw-success: #4ab246;
    --sw-danger: #d51f1f;
    --sw-warning: #ffc445;
    --sw-info: #357af0;

    --sw-error-bg: #ffeef5;
    --sw-error-border: #fe4d97;

    /* --- Нейтральные --- */
    --sw-text: #121715;
    --sw-text-muted: #9da4ae;
    --sw-text-dim: #5c6168;
    --sw-grey: #9da4ae;
    --sw-grey-light: #e5e9ef;

    /* --- Семантические слоты (переключаются светлой/тёмной темой) --- */
    --sw-bg: #f3f3f3;
    --sw-surface: #fff;
    --sw-ink: #121715;
    --sw-border: #f3f3f3;
    --sw-border-strong: #e5e9ef;
    --sw-border-dashed: 1px dashed #f3f3f3;
    --sw-table-hover: #f8fbfd;
    --sw-backdrop: rgba(18, 23, 21, .8);

    /* Подвал тёмный в обеих темах — так на референсе. Отдельные токены,
       потому что цвет подвала настраивается независимо от палитры сайта. */
    --sw-footer-bg: #121715;
    --sw-footer-text: #9da4ae;
    --sw-footer-title: #fff;
    --sw-footer-border: rgba(255, 255, 255, .1);

    --sw-link: var(--sw-primary);
    --sw-link-hover: var(--sw-primary-dark);

    /* --- Типографика --- */
    --sw-font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --sw-font-heading: var(--sw-font);
    --sw-fs-base: 16px;
    --sw-lh-base: 1.5;

    /* --- Форма --- */
    --sw-radius-sm: .25rem;
    --sw-radius: .5rem;
    --sw-radius-lg: 1rem;
    --sw-radius-xl: 1.5rem;
    --sw-radius-pill: 50rem;

    --sw-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --sw-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
    --sw-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .12);

    /* --- Слои наложения ---
       Единая шкала для элементов, которые перекрывают друг друга поверх
       обычного потока страницы. Раньше числа были раскиданы по файлам
       компонентов, и было легко завести новый плавающий блок, который
       случайно оказался бы не на своём месте относительно шапки, шторки
       или модалки. Здесь — только то, что участвует в общей раскладке;
       локальные подсказки порядка отрисовки внутри одного компонента
       (бейдж поверх своей же картинки и т.п.) в эту шкалу не выносятся —
       им столкновение с чужими слоями не грозит, и общий токен для них
       был бы лишней косвенностью.
       Порядок снизу вверх: липкая шапка → выпадашки над ней → бокові
       панелі (кошик/меню/фільтр) → загальна модалка → skip-link і тости
       (крайні, повинні бути видні завжди). Плаваючі контакти навмисно
       нижче шторки й модалки — щоб не перекривали їх кнопку закриття. */
    --sw-z-sticky: 1020;
    --sw-z-header: 1030;
    --sw-z-dropdown: 1040;
    --sw-z-drawer: 1050;
    --sw-z-modal: 1060;
    --sw-z-cookie: 1070;
    --sw-z-skip-link: 1080;
    --sw-z-toast: 1090;

    --sw-z-float-panel: 997;
    --sw-z-float: 998;
    --sw-z-float-button: 999;

    /* --- Движение --- */
    --sw-transition: .3s ease-out;
    --sw-transition-fast: .15s ease-out;

    /* Высота липкой шапки. Ставится скриптом на старте и на ресайзе:
       шапка переносит строки на узком экране, и захардкоженное значение
       то оставляло бы щель, то прятало прилипшие блоки под шапкой. */
    --sw-sticky-top: 0px;

    /* --- Сетка --- */
    --sw-container: 1320px;
    --sw-gutter: 12px;
    --sw-section-gap: 40px;

    /* --- Логотип (подставляется из настроек темы) --- */
    --sw-logo-light: none;
    --sw-logo-dark: none;
}

/* Тёмная тема. Класс вешает на <html> скрипт sw-theme.js
   (data-sw-theme="dark"), поэтому FOUC не возникает. */
:root[data-sw-theme="dark"] {
    --sw-bg: #000;
    --sw-surface: #1d1d1d;
    --sw-ink: #fff;
    --sw-border: #2b2a2a;
    --sw-border-strong: #2b2a2a;
    --sw-border-dashed: 1px dashed #2b2a2a;
    --sw-table-hover: #161616;
    --sw-backdrop: rgba(0, 0, 0, .8);
    --sw-text: #fff;
    --sw-text-dim: #b6bcc4;
    --sw-error-bg: #2a1620;
}

/* Мост к Bootstrap 5.3: не форкаем бутстрап, а перекрашиваем его токенами. */
:root {
    --bs-body-bg: var(--sw-bg);
    --bs-body-color: var(--sw-ink);
    --bs-body-font-family: var(--sw-font);
    --bs-border-color: var(--sw-border);
    --bs-primary: var(--sw-primary);
    --bs-primary-rgb: var(--sw-primary-rgb);
    --bs-link-color: var(--sw-link);
    --bs-link-hover-color: var(--sw-link-hover);
    --bs-border-radius: var(--sw-radius);
    --bs-border-radius-lg: var(--sw-radius-lg);
    --bs-backdrop-bg: var(--sw-backdrop);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sw-transition: 0s;
        --sw-transition-fast: 0s;
    }
}
