/* ============================================================
   Shop-CRM — токены дизайн-системы кабинета.
   Перенесены из согласованного прототипа (демо кабинета) без переработки:
   цвета, тени, радиусы, шрифты — те же.
   Цветовая система = CMYK печатной контрольной шкалы:
   K — структура и главное действие, C — интерактив, M — аутсорс, Y — внимание.
   ============================================================ */

:root{
  --bg:#F2F1EE;          --surface:#FFFFFF;     --surface-2:#F7F6F3;  --surface-3:#EFEDE8;
  --ink:#1A1815;         --ink-2:#33302B;       --muted:#5F5B54;      --faint:#8A857C;
  --line:#E4E1DA;        --line-2:#D3CFC6;      --line-3:#BEB9AE;
  --k:#1A1815;           --k-hover:#33302B;     --on-k:#FFFFFF;
  --c:#0B75BE;           --c-ink:#095B94;       --c-soft:#E6F2FA;     --c-line:#B6DAF0;
  --m:#A81F6B;           --m-ink:#8A1657;       --m-soft:#FBEBF3;     --m-line:#EFC8DE;
  --y:#A8620A;           --y-soft:#FBF1E0;      --y-line:#E8CFA4;
  --ok:#167C3E;          --ok-soft:#E6F4EA;     --ok-line:#B4DCC1;
  --bad:#C0322B;         --bad-soft:#FBECEA;    --bad-line:#EEC5C0;
  --sidebar:#14120F;     --sidebar-2:#1F1C18;   --sidebar-line:#2B2722;
  --sidebar-txt:#A29C92; --sidebar-txt-2:#6E6861; --sidebar-active:#26221D;
  --shadow-sm:0 1px 1px rgba(26,24,21,.03);
  --shadow:0 1px 2px rgba(26,24,21,.05), 0 4px 12px -6px rgba(26,24,21,.10);
  --shadow-lg:0 0 0 1px rgba(26,24,21,.04), 0 2px 4px rgba(26,24,21,.05), 0 16px 40px -12px rgba(26,24,21,.22);
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:10px; --r-xl:14px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar-w:246px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F0E0D;        --surface:#191817;     --surface-2:#201F1D;  --surface-3:#272522;
    --ink:#EDEAE4;       --ink-2:#CFCAC2;       --muted:#9A948B;      --faint:#6E6961;
    --line:#2A2825;      --line-2:#3A3733;      --line-3:#4C4842;
    --k:#EDEAE4;         --k-hover:#FFFFFF;     --on-k:#0F0E0D;
    --c:#4BA6E8;         --c-ink:#7CC0F0;       --c-soft:#12283A;     --c-line:#1E4463;
    --m:#E060A8;         --m-ink:#EE8CC4;       --m-soft:#33132A;     --m-line:#58254A;
    --y:#E0A44A;         --y-soft:#2E220E;      --y-line:#56421C;
    --ok:#35B36A;        --ok-soft:#10281A;     --ok-line:#1E4A31;
    --bad:#E5645C;       --bad-soft:#2E1614;    --bad-line:#552924;
    --sidebar:#0A0908;   --sidebar-2:#16140F;   --sidebar-line:#221F1A;
    --sidebar-txt:#9A948B; --sidebar-txt-2:#635E57; --sidebar-active:#201D18;
    --shadow-sm:0 1px 1px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.6);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -12px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F0E0D;          --surface:#191817;     --surface-2:#201F1D;  --surface-3:#272522;
  --ink:#EDEAE4;         --ink-2:#CFCAC2;       --muted:#9A948B;      --faint:#6E6961;
  --line:#2A2825;        --line-2:#3A3733;      --line-3:#4C4842;
  --k:#EDEAE4;           --k-hover:#FFFFFF;     --on-k:#0F0E0D;
  --c:#4BA6E8;           --c-ink:#7CC0F0;       --c-soft:#12283A;     --c-line:#1E4463;
  --m:#E060A8;           --m-ink:#EE8CC4;       --m-soft:#33132A;     --m-line:#58254A;
  --y:#E0A44A;           --y-soft:#2E220E;      --y-line:#56421C;
  --ok:#35B36A;          --ok-soft:#10281A;     --ok-line:#1E4A31;
  --bad:#E5645C;         --bad-soft:#2E1614;    --bad-line:#552924;
  --sidebar:#0A0908;     --sidebar-2:#16140F;   --sidebar-line:#221F1A;
  --sidebar-txt:#9A948B; --sidebar-txt-2:#635E57; --sidebar-active:#201D18;
  --shadow-sm:0 1px 1px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.6);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* Мост: Bootstrap рисуется токенами демо. Тема переключается атрибутом
   data-theme на <html>; data-bs-theme ставится синхронно из JS. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--line);
  --bs-body-font-family: var(--sans);
  --bs-font-monospace: var(--mono);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r);
  --bs-border-radius-xl: var(--r-xl);
  --bs-link-color: var(--c);
  --bs-link-hover-color: var(--c-ink);
  --bs-primary: var(--k);
  --bs-primary-rgb: 26, 24, 21;
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-success: var(--ok);
  --bs-danger: var(--bad);
  --bs-warning: var(--y);
  --bs-info: var(--c);
}
.btn-primary {
  --bs-btn-bg: var(--k); --bs-btn-border-color: var(--k); --bs-btn-color: var(--on-k);
  --bs-btn-hover-bg: var(--k-hover); --bs-btn-hover-border-color: var(--k-hover); --bs-btn-hover-color: var(--on-k);
  --bs-btn-active-bg: var(--k-hover); --bs-btn-active-border-color: var(--k-hover); --bs-btn-active-color: var(--on-k);
}
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); box-shadow: var(--shadow-sm); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); }
.form-control, .form-select { background-color: var(--surface); border-color: var(--line-2); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-soft); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
/* Дополнение моста: явные соответствия из демо (значения — только токены). */
/* демо .modal: border-radius:var(--r-xl); box-shadow:var(--shadow-lg) */
.modal { --bs-modal-border-radius: var(--r-xl); --bs-modal-box-shadow: var(--shadow-lg); }
/* демо .toast: background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-lg) */
.toast { --bs-toast-bg: var(--surface); --bs-toast-color: var(--ink); --bs-toast-border-color: var(--line-2); box-shadow: var(--shadow-lg); }