/* Дизайн-токены. Единственное место в проекте, где допустимы литеральные цвета:
   всё остальное обязано ходить через var(--*). Светлая тема — из макета,
   тёмная — из дизайн-системы Nocturne (та же вёрстка, другой набор переменных). */

:root {
  color-scheme: light;

  /* поверхности и текст */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --sidebar: #fbfbfc;
  --ink: #1c2230;
  --muted: #697086;
  --border: #e7e9ef;
  --hover: #f3f4f7;
  --track: #eceef3;

  /* акцент */
  --accent: #4f6bed;
  --accent-700: color-mix(in srgb, var(--accent) 78%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--accent) 20%, transparent);

  /* статусы */
  --green: #1a9d5a;
  --amber: #c98a12;
  --amber-700: #a06d0a;
  --red: #dc4a3d;
  --gray: #8a93a3;
  --green-bg: #e7f6ee;
  --amber-bg: #fbf1dc;
  --red-bg: #fbe9e7;
  --gray-bg: #eef0f4;

  /* тёмный лог-блок (терминал, ansible, deploy) */
  --logbg: #141821;
  --logborder: #262c39;
  --logink: #aeb7c6;
  --loginkstrong: #e8edf4;
  --logmuted: #68728a;
  --lognum: #3d4757;

  /* стрелка нативного select: SVG в data-URI, поэтому цвет задаётся здесь */
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697086' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");

  /* светлый лог-блок (лог задачи, «зебра» заголовков таблиц) */
  --llbg: #f8fafc;
  --llborder: #e7e9ef;
  --llink: #3c4453;
  --llstrong: #1c2230;
  --llmuted: #8a93a3;
  --llnum: #b4bcc9;

  /* тени, шрифты, радиусы, плотность */
  --shadow: 0 1px 2px rgba(20, 25, 40, 0.04), 0 1px 3px rgba(20, 25, 40, 0.03);
  --shadow-menu: 0 12px 34px rgba(20, 25, 40, 0.16);
  --shadow-dropdown: 0 12px 30px rgba(20, 25, 40, 0.14);
  --shadow-modal: 0 24px 70px rgba(20, 25, 40, 0.3);
  --shadow-card-lg: 0 24px 70px rgba(20, 25, 40, 0.1), 0 2px 8px rgba(20, 25, 40, 0.05);
  --shadow-tip: 0 10px 30px rgba(15, 18, 25, 0.28);

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-pill: 999px;

  --base-size: 14px;
  --nav-pad-y: 10px;
  --log-panel-w: 480px;
  /* Поле шапки: от него зависит ширина правой группы (см. .topbar-right) */
  --topbar-pad: 22px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #161826;
  --surface: #232532;
  --sidebar: #1c1e2c;
  --ink: #e9e9ed;
  --muted: #9397ab;
  --border: #3f424d;
  --hover: #292b31;
  --track: #292b31;
  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239397ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");


  --accent: #9184d9;
  /* на тёмном ground «нажатый» шаг ярче базы (Nocturne: accent-400) */
  --accent-700: #b5abfc;

  --green: #5fd699;
  --amber: #e0b44c;
  --amber-700: #f0cd7a;
  --red: #e8776b;
  --gray: #9397ab;
  --green-bg: #1e3a2c;
  --amber-bg: #3a3220;
  --red-bg: #3a2523;
  --gray-bg: #292b31;

  --llbg: #1c1e2c;
  --llborder: #3f424d;
  --llink: #cfd3e5;
  --llstrong: #f3f5fe;
  --llmuted: #75798c;
  --llnum: #595d6c;

  /* Nocturne: на тёмном фоне высота — это край плюс ambient-затемнение */
  --shadow: 0 0 0 1px #3f424d;
  --shadow-menu: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-dropdown: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-card-lg: 0 0 0 1px #595d6c, 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-tip: 0 0 0 1px #595d6c, 0 10px 30px rgba(0, 0, 0, 0.6);
}

[data-density="compact"] {
  --base-size: 13px;
  --nav-pad-y: 8px;
  --log-panel-w: 440px;
}