/* Перенесено из макета Claude Design «Единый каталог.html» (строки 10–62, 1609–1613). Значения — макета; правки отмечены комментарием. */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --border: #ebe9e3;
  --border-strong: #d9d6cf;
  --ink: #1a1a17;
  --ink-2: #3d3c37;
  --ink-3: #6b6a63;
  --ink-4: #9c9a90;
  --accent: #1a1a17;
  --accent-soft: #f0eee7;

  --ok-bg: #e6efe7;
  --ok-fg: #2e5b35;
  --ok-dot: #4a8c54;

  --warn-bg: #f5ebd6;
  --warn-fg: #7a5410;
  --warn-dot: #b8862a;

  --err-bg: #f5dfd9;
  --err-fg: #7a2a1d;
  --err-dot: #b8472e;

  --queue-bg: #e1e6ef;
  --queue-fg: #2d3a59;
  --queue-dot: #4a5d8a;

  --neutral-bg: #efede7;
  --neutral-fg: #5a584f;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 0 rgba(20,20,18,.04);
  --shadow-md: 0 1px 2px rgba(20,20,18,.06), 0 4px 12px rgba(20,20,18,.04);
  --shadow-lg: 0 20px 40px -12px rgba(20,20,18,.18), 0 4px 12px rgba(20,20,18,.06);

  /* Добавлено в Пульте: в макете текст на фоне --ink был жёстким #fff, и в тёмной теме,
     где --ink светлый, пропадал бы. */
  --on-ink: #ffffff;
  --on-ink-dim: rgba(255,255,255,.65);
  --on-ink-faint: rgba(255,255,255,.18);
  --ink-hover: #000000;
  /* Добавлено в Пульте: цвет графиков продаж. Макет монохромный, а серый ряд читается как фон —
     синий проверен валидатором навыка dataviz (светлота, насыщенность, контраст ≥ 3:1 к --surface). */
  --chart-1: #3f6db0;
  --chart-1-soft: #dfe7f4;
  color-scheme: light dark;
}

/* Тёмная тема — достроена в гамме макета (в нём её нет): тёплые нейтральные, те же роли токенов. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121210;
    --surface: #1b1b18;
    --surface-2: #161614;
    --border: #2a2925;
    --border-strong: #3b3a35;
    --ink: #f2f1ec;
    --ink-2: #d2d0c8;
    --ink-3: #9c9a90;
    --ink-4: #6b6a63;
    --accent: #f2f1ec;
    --accent-soft: #25241f;

    --ok-bg: #1d2b1f;   --ok-fg: #9fcca6;   --ok-dot: #5fa86a;
    --warn-bg: #2e2615; --warn-fg: #e2c27e; --warn-dot: #c99a3c;
    --err-bg: #33201a;  --err-fg: #eca896;  --err-dot: #d0603f;
    --queue-bg: #1e2433; --queue-fg: #aab9dd; --queue-dot: #6d82b8;
    --neutral-bg: #26251f; --neutral-fg: #b7b5ac;

    --shadow-sm: 0 1px 0 rgba(0,0,0,.3);
    --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.65), 0 4px 12px rgba(0,0,0,.4);

    --on-ink: #1a1a17;
    --on-ink-dim: rgba(26,26,23,.6);
    --on-ink-faint: rgba(26,26,23,.14);
    --ink-hover: #ffffff;
    --chart-1: #5f86c9;
    --chart-1-soft: #26324a;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; cursor: pointer; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum"; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9d6cf; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b9b6ad; }

/* Бегунок прокрутки в тёмной теме — после базовых правил выше, иначе они его перебивают. */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: #3b3a35; }
  ::-webkit-scrollbar-thumb:hover { background: #55534c; }
}