/* Знак гривні окремим обличчям.
   У Jost його немає, і кожна система підставляла свій: Windows —
   Segoe UI, айфон — SF. Один символ виглядав чужим саме у вебі.
   Тут лежить рівно один глиф ₴ (1.8 КБ, вшитий у файл), тож знак
   однаковий скрізь і не залежить від мережі. */
@font-face {
  font-family: 'Hryvnia';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
  unicode-range: U+20B4;
}

/* ==========================================================================
   babakteam CRM — Design tokens
   Скопійовано з робочого прототипу «CRM Замовлення».
   Джерело палітри й шрифтів: дизайн-система магазину babak-shop (Tabix).
   ========================================================================== */

:root {
  /* ---------- Ink (текст, темні поверхні) ---------- */
  --ink:            #2B231D;  /* основний текст, темні кнопки */
  --ink-hover:      #463629;  /* hover темної кнопки */
  --ink-soft:       #6B5C50;  /* вторинний текст, підписи полів */
  --ink-faint:      #9C8B7C;  /* третинний текст, kicker, лейбли */
  --ink-placeholder:#C0B0A0;  /* placeholder в інпутах */

  /* ---------- Ivory / поверхні ---------- */
  --page-bg:        #FCFBFA;  /* фон сторінки (tweak: pageBg) */
  --surface:        #FFFFFF;  /* шапка, рядок замовлення (headerBg / rowBg) */
  --surface-raised: #FFFDFB;  /* картки поверх сторінки: модалка, дропдаун */
  --surface-input:  #FFFDFA;  /* фон інпутів у спокої */
  --kpi-bg:         #F8F5F2;  /* KPI-картка (tweak: kpiBg) */
  --nav-active:     #F8F4F2;  /* активний пункт меню (tweak: navActiveBg) */
  --pers-bg:        #F8F4F1;  /* капсула персоналізації (tweak: persBg) */
  --hover-tint:     #FAF8F4;  /* підсвітка блоків при наведенні (tweak: priceHoverBg) */
  --ivory-100:      #F7F1EA;  /* hover-підкладка пунктів меню, чипи опцій */
  --ivory-200:      #F5EDE3;  /* hover пункту дропдауна */
  --ivory-300:      #F1EAE1;  /* нейтральний тінт, кнопка накладної */
  --ivory-400:      #EFE6DA;  /* плейсхолдер фото, focus-ring фото */

  /* ---------- Лінії та межі ---------- */
  --line:           #E2D6C8;  /* роздільники, бордер шапки */
  --line-soft:      #EDE3D6;  /* бордер чипів, роздільники в модалці */
  --line-card:      #EFE3D4;  /* бордер піднятих карток */
  --line-input:     #E7DAC9;  /* бордер інпутів */
  --line-hover:     #DCCDB9;  /* бордер інпута при наведенні */
  --line-focus:     #DCC49B;  /* бордер інпута/пошуку у фокусі */
  --focus-ring:     #F6EEE4;  /* 3px кільце навколо поля у фокусі */
  --row-border:     #E7DAC9;  /* бордер рядка замовлення */
  --row-border-hover:#D6C3AC;
  --row-border-sel: #DCC49B;

  /* ---------- Акценти ---------- */
  --walnut:         #6E5343;  /* аватар, чекбокс, «В роботі» */
  --gold:           #B4894F;  /* лічильники, галочки опцій */
  --gold-soft:      #D6A75E;  /* «Накладна», індикатор пропозиції */
  --sage:           #7F9382;  /* «Відправлено» */
  --clay:           #C98E6D;  /* «Відправка» */
  --sand:           #C8BBAA;  /* «Актуальне» */
  --rose:           #B89484;  /* «Передано» */
  --danger:         #9C7B69;  /* видалення */
  --danger-bg:      #4A2A26;  /* підкладка кнопки видалення в темній панелі */

  /* ---------- Статуси: крапка / текст / тінт капсули ---------- */
  --st-aktualne-dot:#C8BBAA; --st-aktualne-text:#6B5C50; --st-aktualne-bg:#F1EAE1;
  --st-maket-dot:   #B4894F; --st-maket-text:   #8A6428; --st-maket-bg:   #F6EBD8;
  --st-peredano-dot:#B89484; --st-peredano-text:#8A6252; --st-peredano-bg:#F3E6DF;
  --st-roboti-dot:  #6E5343; --st-roboti-text:  #5C4436; --st-roboti-bg:  #EFE6DA;
  --st-nakladna-dot:#D6A75E; --st-nakladna-text:#8A6428; --st-nakladna-bg:#F8EFDC;
  --st-vidprav-dot: #C98E6D; --st-vidprav-text: #9C6A47; --st-vidprav-bg: #F5E4DA;
  --st-vidpravleno-dot:#7F9382; --st-vidpravleno-text:#566A5B; --st-vidpravleno-bg:#E8EFE7;

  /* ---------- Кольори матеріалів (крапка в рядку) ---------- */
  --mat-light-wood: #E3C7B7;
  --mat-basic-wood: #E7DAC9;
  --mat-natural:    #D8B98F;
  --mat-walnut:     #6E5343;
  --mat-black:      #1E1A17;
  --mat-asparagus:  #C5CFBF;

  /* ---------- Типографіка ---------- */
  /* Акцентний шрифт — той самий Jost, що й в інтерфейсі, лише іншою вагою
     й розміром. Каліграфічний Cormorant пішов звідусіль: він гарний сам
     по собі, але поруч із геометричним Jost читався як чужий, а його
     старостильні цифри доводилось раз по раз вимикати вручну.

     Токен лишаємо окремим: акцент — це роль, а не шрифт. Захочемо колись
     повернути іншу гарнітуру для заголовків — міняти доведеться тут одне
     значення, а не сотню правил. */
  /* 'Hryvnia' — це Inter, завантажений рівно одним символом ₴: у Jost його
     немає, і без цього кожна система підставляла свій. Стоїть ДРУГИМ, тож
     на всі інші літери не впливає взагалі. */
  --font-display: 'Jost', 'Hryvnia', system-ui, sans-serif;   /* числа, імена, заголовки */
  --font-sans:    'Jost', 'Hryvnia', system-ui, sans-serif;   /* весь інтерфейс */
  --font-brand:   'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; /* лише лого */

  /* ---------- Радіуси ---------- */
  --r-row:    10px;  /* рядок замовлення (у хендофі 6px — збільшено на прохання) */
  --r-photo:  4px;   /* мініатюра макета */
  --r-input:  10px;  /* інпути, селекти, кнопка накладної */
  --r-cell:   11px;  /* підсвітка блоку в рядку */
  --r-dd:     14px;  /* дропдаун поля */
  --r-pop:    16px;  /* попап пропозиції накладної */
  --r-status: 18px;  /* дропдаун статусу */
  --r-kpi:    20px;  /* KPI-картка */
  --r-modal:  22px;  /* модальне вікно */
  --r-pill:   40px;  /* усі капсули, чипи, кнопки */
  --r-round:  999px; /* крапки, аватар */

  /* ---------- Тіні ---------- */
  --sh-row-hover: 0 8px 20px -16px rgba(58,44,32,.35);
  --sh-dd:        0 2px 6px rgba(58,44,32,.05), 0 22px 44px -24px rgba(58,44,32,.45);
  --sh-status-dd: 0 2px 6px rgba(58,44,32,.05), 0 24px 48px -24px rgba(58,44,32,.45);
  --sh-modal:     0 4px 10px rgba(58,44,32,.06), 0 40px 80px -32px rgba(58,44,32,.55);
  --sh-drawer:    -30px 0 60px -40px rgba(58,44,32,.5);
  --sh-bulkbar:   0 18px 50px -18px rgba(43,35,29,.55);

  /* ---------- Криві та тривалості ---------- */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);  /* «виїзд» елементів, розкриття */
  --ease-pill:     cubic-bezier(.22, 1, .36, 1); /* капсула-підкладка scale */
  --t-fast:   .15s;  /* колір, бордер */
  --t-base:   .18s;  /* фон, тінь */
  --t-pill:   .24s;  /* scale підкладки */
  --t-move:   .30s;  /* поява/зникнення елементів */
  --t-expand: .42s;  /* розкриття чека (grid-template-rows) */

  /* ---------- Сітка сторінки ---------- */
  --page-max:  1650px;   /* було 1560 — трохи ширше, щоб адреса й товар дихали.
                            1760 виявилось забагато: рядок ставав розтягнутим */
  --page-pad:  40px;
  --header-h:  74px;
}