/* ===========================================================================
   Набор цветов темы «Smmuzi».

   Здесь собраны все цвета сайта. Файл подключается первым, до остальных
   стилей, поэтому значения отсюда действуют на всех страницах — и на
   широком экране, и на телефоне.

   Два набора значений:
     :root                        — светлое оформление (по умолчанию)
     :root[data-theme="dark"]     — тёмное, посетитель включает его сам

   Имя всегда занято одной ролью. Имя поверхности (фон, граница, тень) не
   используется для текста, и наоборот: иначе при переключении на тёмное
   оформление текст и фон поехали бы в одну сторону и слились.

   Чтобы сделать новую тему: скопируйте папку темы целиком и меняйте
   значения здесь — остальные файлы трогать не нужно.
   =========================================================================== */

:root {
    /* --- Поверхности ---------------------------------------------------- */
    --site-bg:              #f1eef0;   /* фон страницы */
    --site-card:            #ffffff;   /* карточки, таблицы, выпадающие списки */
    --site-surface:         #f7f5f6;   /* мягкий фон блоков внутри карточек */
    --site-surface-soft:    #fcfafb;   /* ещё светлее: строки таблиц, поля */
    --site-surface-mute:    #dad3d8;   /* приглушённый: выключенные элементы */
    --site-overlay:         rgba(45, 42, 42, 0.902);   /* подложка под окнами */
    --site-veil:            rgba(255, 255, 255, 0.85);/* полупрозрачная плёнка */

    /* --- Границы -------------------------------------------------------- */
    --site-border-soft:     #ebe7e7;   /* еле заметная */
    --site-border-mute:     #e3e3e3;   /* разделители */
    --site-border-strong:   #cbcbcb;   /* заметная: поля ввода в фокусе */
    --site-border-cool:     #e9eef3;   /* холодная, в блоках со сводкой */

    /* --- Текст ---------------------------------------------------------- */
    --site-title:           #222222;   /* заголовки */
    --site-title-soft:      #333333;   /* подзаголовки */
    --site-ink-strong:      #111111;   /* самый тёмный текст */
    --site-text:            #444444;   /* основной текст */
    --site-text-soft:       #555555;   /* пояснения */
    --site-text-dim:        #666666;   /* второстепенное */
    --site-text-mute:       #999999;   /* подсказки, placeholder */
    --site-text-faint:      #b0b0b0;   /* самое бледное */
    --site-text-on-accent:  #ffffff;   /* текст на цветной кнопке */
    --site-text-on-dark:    #ffffff;   /* текст на тёмной подложке */

    /* --- Главный акцент: жёлтый (кнопки действия) ----------------------- */
    --site-accent:          #ffbe40;
    --site-accent-hover:    #ffb21c;   /* наведение */
    --site-accent-press:    #e69801;   /* нажатие */
    --site-accent-soft:     #f8d698;   /* бледная заливка */
    --site-accent-softer:   #fdcc6e;   /* промежуточная */
    --site-accent-ink:      #e19415;   /* текст акцентного цвета */

    /* --- Второй акцент: оранжево-красный (ссылки, выделения) ------------ */
    --site-mark:            #fd5a3c;
    --site-mark-soft:       #fd7761;
    --site-mark-bg:         #ffc1b8;   /* бледная заливка */

    /* --- Состояния ------------------------------------------------------ */
    --site-ok:              #198754;   /* успех */
    --site-ok-bg:           #d1e7dd;
    --site-ok-text:         #0f5132;
    --site-ok-border:       #badbcc;
    --site-warn:            #ffc107;   /* предупреждение */
    --site-warn-bg:         #fff3cd;
    --site-warn-text:       #664d03;
    --site-warn-border:     #ffecb5;
    --site-error:           #dc3545;   /* ошибка */
    --site-error-soft:      #f89797;
    --site-error-text:      #c83c3c;
    --site-info:            #0dcaf0;   /* подсказка */
    --site-info-bg:         #cff4fc;
    --site-info-text:       #055160;
    --site-info-border:     #b6effb;

    /* --- Служебные цвета библиотеки (кнопки, ссылки Bootstrap) ---------- */
    --site-link:            #0d6efd;
    --site-link-hover:      #0a58ca;
    --site-link-press:      #0b5ed7;
    --site-link-bg:         #cfe2ff;
    --site-link-border:     #b6d4fe;
    --site-link-text:       #084298;
    --site-neutral:         #6c757d;   /* серая кнопка */
    --site-neutral-hover:   #5c636a;
    --site-neutral-dark:    #565e64;
    --site-neutral-bg:      #e2e3e5;
    --site-neutral-text:    #41464b;

    /* --- Тени ----------------------------------------------------------- */
    --site-shadow:          rgba(149, 157, 165, 0.20);  /* обычная тень блока */
    --site-shadow-soft:     rgba(0, 0, 0, 0.08);        /* еле заметная */
    --site-shadow-deep:     rgba(0, 0, 0, 0.30);        /* под окнами */
    --site-glow-link:       rgba(49, 132, 253, 0.50);   /* обводка в фокусе */
    --site-glow-neutral:    rgba(130, 138, 145, 0.50);
    /* --- Дополнения: редкие, но свои цвета ------------------------------ */
    --site-ink-black:       #000000;   /* самый чёрный текст */
    --site-text-pale:       #c2c2c2;   /* очень бледный текст */
    --site-text-gray:       #7e7e7e;   /* серый текст */
    --site-link-dim:        #7296b2;   /* приглушённая голубая */
    --site-accent-fg:       #ffbe40;   /* жёлтый значок на светлом */
    --site-accent-deep:     #ffab07;   /* жёлтый в нажатии */
    --site-accent-ink-2:    #e17812;   /* оранжевый текст */
    --site-mark-fill:       #fd5a3c;   /* оранжевая заливка */
    --site-mark-deep:       #ff371b;   /* насыщенная оранжевая */
    --site-mark-warm:       #ec7d63;   /* тёплая оранжевая заливка */
    --site-ok-fill:         #84d184;   /* зелёная заливка */
    --site-fill-dark:       #000000;   /* чёрная заливка */
    --site-border-gray:     #a1a1a1;   /* серая граница */
    --site-border-dark:     #333333;   /* тёмная граница */
    --site-border-shade:    rgba(0, 0, 0, 0.20);     /* граница на просвет */
    --site-glow-link-soft:  rgba(13, 110, 253, 0.25);/* мягкая обводка фокуса */
    --site-icon-mute:       #dbd4d9;   /* бледный значок */

    --site-teal-fill:       #46aab5;   /* бирюзовая заливка */
    --site-link-text-deep:  #06357a;   /* тёмно-синий текст */
    --site-warn-text-deep:  #523e02;   /* тёмно-жёлтый текст */

    /* --- Точные оттенки: чтобы вид не поехал ---------------------------- */
    --site-title-dim:       #3b3b3b;   /* заголовок потемнее */
    --site-text-ink:        #413c39;   /* тёплый тёмный текст */
    --site-text-mid:        #4e4e4e;   /* средний серый текст */
    --site-text-mid-2:      #5d5d5d;
    --site-text-mid-3:      #5e5e5e;
    --site-text-mid-4:      #606060;
    --site-text-slate:      #34383c;   /* холодный тёмный текст */
    --site-text-gray-2:     #777777;
    --site-text-gray-3:     #787878;
    --site-text-silver:     #cccccc;
    --site-text-silver-2:   #d3d3d3;
    --site-mark-bright:     #ff6059;   /* яркий красно-оранжевый текст */
    --site-accent-text:     #fda617;   /* оранжевый текст */
    --site-accent-orange:   #fda617;   /* оранжевая заливка */
    --site-accent-amber:    #fdc861;   /* тёплая янтарная заливка */
    --site-accent-gold:     #fbb835;   /* золотистая заливка */
    --site-accent-bright:   #ffb82f;   /* яркая жёлтая заливка */
    --site-accent-warm:     #ff9a1b;   /* тёплая оранжевая заливка */
    --site-surface-warm:    #e9dcda;   /* тёплая светлая подложка */
    --site-surface-ink:     #212529;   /* очень тёмная подложка */
    --site-surface-slate:   #343a40;   /* тёмная холодная подложка */
    --site-border-warm:     #aeadac;   /* тёплая серая граница */
    --site-border-blue:     #c3daeb;   /* голубоватая граница */
    --site-border-cool-2:   #bcbebf;   /* холодная серая граница */
    --site-link-border-2:   #0a53be;   /* тёмно-синяя граница */
    --site-ok-text-deep:    #0c4128;   /* тёмно-зелёный текст */
    --site-info-text-deep:  #04414d;   /* тёмно-бирюзовый текст */

    /* --- Текст на фирменной плашке -------------------------------------- */
    /* Жёлтый и оранжевый не меняются между оформлениями, поэтому текст на
       них тоже обязан оставаться тёмным — иначе в тёмном он слился бы. */
    --site-on-accent:       #222222;
    --site-on-accent-soft:  #333333;
    --site-on-accent-dim:   #3b3b3b;
    --site-on-accent-mid:   #444444;
    --site-on-accent-black: #000000;
    --site-on-accent-text:  #555555;   /* текст на жёлтой плашке, помягче */
    /* Цвет текста самой страницы. Раньше его не было вовсе, и текст без
       своего цвета брал чёрный из браузера — в тёмном он переставал
       читаться. В светлом оформлении значение то же, что давал браузер. */
    --site-base-text:       #000000;
    --site-icon:            #444444;   /* значок-маска: это цвет самого значка */
    --site-menu-ink:        #3f3f3f;   /* пункты меню в шапке */
    --site-link-on-veil:    #4d9cdf;   /* ссылка в объявлении */

    --site-border-light:    #cccccc;   /* рамка загрузчика файлов */
    --site-border-warm-light: #e0dddd; /* рамка предпросмотра */
    --site-text-quiet:      #a0a0a0;   /* служебная приписка в заказах */
    --site-title-deep:      #232323;   /* заголовок в списке заказов */
    --site-text-strong:     #414141;   /* описание услуги */

    /* --- Всплывающие уведомления ---------------------------------------- */
    /* У них насыщенный фон и светлый текст, поэтому читаются одинаково
       в светлом и тёмном — значения между оформлениями не меняются. */
    --site-toast-bg:        #444444;
    --site-toast-text:      #eeeeee;
    --site-toast-ok-bg:     #3c763d;
    --site-toast-ok-text:   #dff0d8;
    --site-toast-ok-border: #d6e9c6;
    --site-toast-err-bg:    #a94442;
    --site-toast-err-text:  #f2dede;
    --site-toast-err-border:#ebccd1;
    --site-toast-warn-bg:   #8a6d3b;
    --site-toast-warn-text: #fcf8e3;
    --site-toast-warn-border:#faebcc;
    --site-toast-info-bg:   #31708f;
    --site-toast-info-text: #d9edf7;

    --site-loader:          #9ec600;   /* полоса загрузки во всплывающем окне */
    --site-field-error:     #dc143c;   /* рамка поля с неверным значением */

    --site-close-icon:      #000000;   /* крестик в окне подтверждения */
    --site-remove:          #ff0000;   /* крестик удаления в списке городов */

    --site-toast-line:      #ffffff;   /* разделитель в уведомлении */
    --site-toast-loader:    #ff0000;   /* полоса обратного отсчёта */

    /* Ссылка без своего класса. В светлом — тот же синий, что рисовал
       браузер, в тёмном он бы слился с подложкой. */
    --site-anchor:          #0000ee;

    /* Текст в блоке, которому администратор задал светлый фон. */
    --site-on-light:        #222222;

    --site-ok-bright:       #20a347;   /* зелёная отметка «выполнено» */

    --site-toast-info-border:#bce8f1;  /* рамка уведомления-подсказки */

}

/* ===========================================================================
   Тёмное оформление той же темы.

   Включает посетитель сам, выбор запоминается в его браузере. Фирменные
   цвета (жёлтый и оранжевый) не меняются — по ним сайт узнаётся. Меняются
   поверхности, текст, границы и приглушаются бледные заливки, которые на
   тёмном фоне светились бы пятнами.
   =========================================================================== */

:root[data-theme="dark"] {
    /* --- Поверхности ---------------------------------------------------- */
    --site-bg:              #141215;
    --site-card:            #1f1d21;
    --site-surface:         #262329;
    --site-surface-soft:    #2b282e;
    --site-surface-mute:    #332f35;
    --site-overlay:         rgba(10, 9, 11, 0.94);
    --site-veil:            rgba(31, 29, 33, 0.88);
    --site-surface-warm:    #2a2426;
    --site-surface-ink:     #0d0c0e;
    --site-surface-slate:   #15181c;

    /* --- Границы (на тёмном они светлее фона) --------------------------- */
    --site-border-soft:     #2a272d;
    --site-border-mute:     #37333a;
    --site-border-strong:   #4a4551;
    --site-border-cool:     #2e343d;
    --site-border-gray:     #595362;
    --site-border-dark:     #4e4956;
    --site-border-shade:    rgba(255, 255, 255, 0.14);
    --site-border-warm:     #514b52;
    --site-border-blue:     #35414f;
    --site-border-cool-2:   #474249;

    /* --- Текст ---------------------------------------------------------- */
    --site-title:           #f2eff3;
    --site-title-soft:      #e2dee4;
    --site-title-dim:       #ddd9e0;
    --site-ink-strong:      #ffffff;
    --site-ink-black:       #ffffff;
    --site-base-text:       #e4e0e6;
    --site-icon:            #cdc8d2;
    --site-menu-ink:        #ddd9e0;
    --site-accent-gold:     #6b5420;   /* в паре с приглушённой жёлтой заливкой */
    --site-accent-orange:   #6b4a1c;   /* в паре с приглушённой оранжевой */
    --site-text:            #cdc8d2;
    --site-text-ink:        #cec9ce;
    --site-text-soft:       #c0bbc5;
    --site-text-mid:        #c4bfc8;
    --site-text-mid-2:      #bab5bf;
    --site-text-mid-3:      #b9b4be;
    --site-text-mid-4:      #b7b2bc;
    --site-text-slate:      #d4d0d8;
    --site-text-dim:        #aaa5af;
    --site-text-mute:       #8d8893;
    --site-text-gray:       #948f99;
    --site-text-gray-2:     #9a959f;
    --site-text-gray-3:     #99949e;
    --site-text-faint:      #7e7985;
    --site-text-pale:       #6f6a75;
    --site-text-silver:     #625d68;
    --site-text-silver-2:   #5d5863;
    --site-text-on-accent:  #ffffff;
    --site-text-on-dark:    #ffffff;

    /* --- Бледные заливки: приглушаем, иначе светятся пятнами ------------ */
    --site-accent-soft:     #8a6a1c;
    --site-mark-bg:         #5e3a34;
    --site-icon-mute:       #5a555f;
    --site-fill-dark:       #0a0a0b;

    /* --- Состояния ------------------------------------------------------ */
    --site-ok:              #2ea36a;
    --site-ok-bg:           #17301f;
    --site-ok-text:         #86d6a4;
    --site-ok-text-deep:    #7fc99a;
    --site-ok-border:       #2a4a35;
    --site-ok-fill:         #3f7a4f;
    --site-warn-bg:         #332a10;
    --site-warn-text:       #f2d08a;
    --site-warn-text-deep:  #e8c77a;
    --site-warn-border:     #4a3d18;
    --site-error:           #e45c6a;
    --site-error-soft:      #9c3a3f;
    --site-error-text:      #f0a0a6;
    --site-info-bg:         #10323a;
    --site-info-text:       #8fdcea;
    --site-info-text-deep:  #7fcdda;
    --site-info-border:     #22505c;
    --site-teal-fill:       #2d5f66;

    /* --- Ссылки и серые кнопки библиотеки -------------------------------- */
    --site-link:            #5a9bff;
    --site-link-hover:      #7db0ff;
    --site-link-press:      #4a8bef;
    --site-link-bg:         #16283f;
    --site-link-border:     #2a4668;
    --site-link-border-2:   #3a6bb5;
    --site-link-text:       #a8c8ff;
    --site-link-text-deep:  #9ec4ff;
    --site-link-on-veil:    #7cb9ef;
    --site-link-dim:        #8fadc4;
    --site-neutral:         #8b949e;
    --site-neutral-hover:   #9aa3ad;
    --site-neutral-dark:    #767f88;
    --site-neutral-bg:      #2a2d30;
    --site-neutral-text:    #c4c9ce;

    /* --- Тени ----------------------------------------------------------- */
    --site-shadow:          rgba(0, 0, 0, 0.50);
    --site-shadow-soft:     rgba(0, 0, 0, 0.30);
    --site-shadow-deep:     rgba(0, 0, 0, 0.65);
    --site-glow-link:       rgba(90, 155, 255, 0.50);
    --site-glow-neutral:    rgba(140, 148, 158, 0.45);
    --site-glow-link-soft:  rgba(90, 155, 255, 0.28);
    --site-border-light:    #46414c;
    --site-border-warm-light: #433d44;
    --site-text-quiet:      #8b868f;
    --site-title-deep:      #e8e4ea;
    --site-text-strong:     #cfcad4;

    --site-close-icon:      #e4e0e6;

    --site-anchor:          #8ab4f8;

    --site-ok-bright:       #4ec47a;

    /* --- Полоса прокрутки ------------------------------------------------ */
    /* Оформляется только в тёмном: в светлом она остаётся такой, какой её
       рисует система, и менять этот вид не просили. */
    --site-scroll-track:    #1a181c;
    --site-scroll-thumb:    #3e3942;
    --site-scroll-hover:    #4e4852;

}