/* ═══════════════════════════════════════════════════════════════════════════
   NEGATRON — токены дизайна.
   Единственное место, где живут цвета, шкала шрифта, отступы, скругления,
   тени и тайминги. В остальных css-файлах — только var(--…).
   Волна 0 редизайна (2026-09-15), см. docs/audits/2026-09-15-ui-ux-audit.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Шрифт: одна шкала, без zoom. Базовый размер 13px (компактный десктоп). */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;    /* бейджи, подписи в таблицах */
  --fs-sm: 12px;    /* подсказки, вторичный текст */
  --fs-md: 13px;    /* основной текст, поля, кнопки */
  --fs-lg: 15px;    /* заголовки карточек */
  --fs-xl: 18px;    /* заголовок экрана */
  --fs-2xl: 22px;   /* крупные цифры, бренд */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --track-tight: -0.01em;   /* заголовки 18px+ */
  --track-caps: 0.06em;     /* uppercase-подписи */

  /* ── Отступы: сетка 4px. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* ── Скругления: три уровня + пилюля. */
  --r-sm: 6px;     /* кнопки, поля, чипы */
  --r-md: 10px;    /* карточки, панели */
  --r-lg: 14px;    /* модалки, большие контейнеры */
  --r-pill: 999px;

  /* ── Движение. */
  --dur-fast: 120ms;   /* ховер, нажатие */
  --dur: 200ms;        /* появление, раскрытие */
  --dur-slow: 320ms;   /* смена темы, крупные панели */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Каркас. */
  --rail-w: 64px;          /* левое меню в покое */
  --rail-w-open: 260px;    /* левое меню раскрыто */
  --dock-w: 380px;         /* окно задач */
  --content-max: 1920px;

  /* ── Сайдбар — плотный материал той же схемы, что и контент (волна 1). */
  --rail-bg: #eceee8;
  --rail-text: #202124;
  --rail-muted: #5c625a;
  --rail-hover: rgba(0, 0, 0, 0.06);
  --rail-line: #d9ddd4;
  --rail-active-bg: rgba(22, 138, 95, 0.14);

  /* ── Светлая тема (по умолчанию). */
  --bg: #f5f6f1;
  --panel: #ffffff;
  --surface-2: #fafbf7;
  --surface-3: #eef1ea;
  --input-bg: #ffffff;
  --line: #d9ddd4;
  --line-strong: #c3c9bd;
  --text: #202124;
  --muted: #62665f;
  --accent: #168a5f;
  --accent-strong: #0f6f4b;
  --accent-soft: rgba(22, 138, 95, 0.15);
  --on-accent: #ffffff;
  --ok-bg: #eef8f3;
  --ok-border: #b8d8ca;
  --ok-fg: #0f6f4b;
  --danger: #bd3d2f;
  --danger-bg: #fff4f2;
  --danger-border: #efc3bd;
  --danger-fg: #7a261b;
  --warn: #a86412;
  --warn-bg: #fff5e0;
  --warn-border: #e8c987;
  --warn-fg: #6e4f15;
  --info: #2f6fb6;
  --info-fg: #1e4570;
  --info-bg: #eef4fa;
  --info-border: #b8cee0;
  --code-bg: #111412;
  --code-fg: #f0f5ee;
  --mono: #111412;
  --dot-muted: #9aa0a6;
  --ring-bg: #e7e9e3;
  --overlay: rgba(0, 0, 0, 0.4);
  --focus-ring: rgba(22, 138, 95, 0.45);

  /* ── Тени: три уровня (карточка / всплывашка / модалка). */
  --elev-1: 0 1px 2px rgba(20, 30, 20, 0.06);
  --elev-2: 0 4px 14px -4px rgba(20, 30, 20, 0.18), 0 1px 2px rgba(20, 30, 20, 0.06);
  --elev-3: 0 16px 40px -12px rgba(20, 30, 20, 0.28), 0 2px 6px rgba(20, 30, 20, 0.08);

  /* ── Псевдонимы для старых имён в коде (не использовать в новом коде). */
  --border: var(--line);
  --hover: var(--surface-3);
  --soft-red: var(--danger);
  --soft-green: var(--accent-strong);

  color-scheme: light;
}

/* ── Тёмная тема ── */
body.theme-dark {
  --rail-bg: #181b20;
  --rail-text: #e6e8ea;
  --rail-muted: #9aa1ab;
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-line: #2e333b;
  --rail-active-bg: rgba(39, 192, 137, 0.16);

  --bg: #14161a;
  --panel: #1c1f24;
  --surface-2: #23272e;
  --surface-3: #2a2f37;
  --input-bg: #20242a;
  --line: #2e333b;
  --line-strong: #3b414b;
  --text: #e6e8ea;
  --muted: #9aa1ab;
  --accent: #1faa74;
  --accent-strong: #27c089;
  --accent-soft: rgba(39, 192, 137, 0.18);
  --on-accent: #06120d;
  --ok-bg: #16352a;
  --ok-border: #1f5d44;
  --ok-fg: #58d6a4;
  --danger: #e0584a;
  --danger-bg: #3a1f1c;
  --danger-border: #6b322b;
  --danger-fg: #f08a7e;
  --warn: #d79a3a;
  --warn-bg: #352a16;
  --warn-border: #6e571f;
  --warn-fg: #e8c987;
  --info: #5b9ae0;
  --info-fg: #7fb0e6;
  --info-bg: #16263a;
  --info-border: #274463;
  --code-bg: #0f1115;
  --code-fg: #e6ecdf;
  --mono: #cfd3d8;
  --dot-muted: #6b7280;
  --ring-bg: #2e333b;
  --overlay: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(39, 192, 137, 0.5);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 6px 18px -6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-3: 0 20px 50px -14px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);

  /* Алиасы резолвятся там, где объявлены — переобъявляем для тёмной темы. */
  --border: var(--line);
  --hover: var(--surface-3);
  --soft-red: var(--danger);
  --soft-green: var(--accent-strong);

  color-scheme: dark;
}

/* ── Розовая тема «Барби» (стиль KakaoTalk: пилюли, сердечки, мягкие тени) ──
   Читаемость сохранена: текст тёмный, ошибки красные, «ок» зелёный.
   Сердечки на фоне, круглый шрифт и подмена иконок — в styles.css (body.theme-pink). */
body.theme-pink {
  --font-ui: "SF Pro Rounded", ui-rounded, "Arial Rounded MT Bold", "Nunito", "Varela Round", -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;

  --rail-bg: #ffd1e6;
  --rail-text: #6b2247;
  --rail-muted: #b3577f;
  --rail-hover: rgba(255, 79, 158, 0.14);
  --rail-line: #ffb3d3;
  --rail-active-bg: rgba(255, 79, 158, 0.24);

  --bg: #ffe6f1;
  --panel: #fff7fb;
  --surface-2: #fff0f7;
  --surface-3: #ffe0ee;
  --input-bg: #ffffff;
  --line: #ffbfda;
  --line-strong: #ff9ac6;
  --text: #4a1a33;
  --muted: #a3567d;
  --accent: #ff4f9e;
  --accent-strong: #e8348a;
  --accent-soft: rgba(255, 79, 158, 0.18);
  --on-accent: #ffffff;
  --ok-bg: #e9fbf0;
  --ok-border: #a9e5c3;
  --ok-fg: #1d7a4d;
  --danger: #e0396c;
  --danger-bg: #ffe9f0;
  --danger-border: #ffb5cc;
  --danger-fg: #9c1f47;
  --warn: #e08a1e;
  --warn-bg: #fff4dc;
  --warn-border: #ffd48a;
  --warn-fg: #7a4d0f;
  --info: #7a5cff;
  --info-fg: #4b34b8;
  --info-bg: #efeaff;
  --info-border: #cfc3ff;
  --code-bg: #4a1a33;
  --code-fg: #ffe6f1;
  --mono: #4a1a33;
  --dot-muted: #d79bb8;
  --ring-bg: #ffd1e6;
  --overlay: rgba(120, 30, 80, 0.45);
  --focus-ring: rgba(255, 79, 158, 0.5);

  --elev-1: 0 1px 3px rgba(255, 79, 158, 0.12);
  --elev-2: 0 6px 18px -6px rgba(255, 79, 158, 0.35), 0 1px 3px rgba(255, 79, 158, 0.12);
  --elev-3: 0 20px 50px -14px rgba(232, 52, 138, 0.45), 0 2px 8px rgba(255, 79, 158, 0.18);

  --border: var(--line);
  --hover: var(--surface-3);
  --soft-red: var(--danger);
  --soft-green: var(--accent-strong);

  color-scheme: light;
}

/* ── Тема «Майнкрафт» (craft): инвентарь + главное меню игры ─────────────
   Серые панели с бевелом, кнопки как в игре, цвета статусов из чата (§a §c §6 §b).
   Шрифт Monocraft (с кириллицей), радиусы 0, текстуры и пейзаж — в styles.css. */
body.theme-craft {
  --font-ui: "Monocraft", "Press Start 2P", ui-monospace, monospace;
  --font-mono: "Monocraft", ui-monospace, monospace;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 14px;
  --fs-xl: 17px;
  --fs-2xl: 20px;
  --track-tight: 0;
  --track-caps: 0.02em;

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;

  --rail-bg: #3a3a3a;
  --rail-text: #ffffff;
  --rail-muted: #b8b8b8;
  --rail-hover: rgba(122, 138, 194, 0.55);
  --rail-line: #000000;
  --rail-active-bg: #6f6f6f;

  --bg: #1c1c1c;
  --panel: #c6c6c6;
  --surface-2: #b9b9b9;
  --surface-3: #a6a6a6;
  --input-bg: #000000;
  --line: #555555;
  --line-strong: #000000;
  --text: #2a2a2a;
  --muted: #4f4f4f;
  --accent: #3c8527;
  --accent-strong: #2c6b1c;
  --accent-soft: rgba(60, 133, 39, 0.35);
  --on-accent: #ffffff;
  --ok-bg: #d8efd0;
  --ok-border: #2c6b1c;
  --ok-fg: #1e5a12;
  --danger: #a02a2a;
  --danger-bg: #f0d0d0;
  --danger-border: #6e1a1a;
  --danger-fg: #6e1a1a;
  --warn: #c57a12;
  --warn-bg: #f5e2b8;
  --warn-border: #8a5410;
  --warn-fg: #6e4308;
  --info: #3b6fbf;
  --info-fg: #234a8a;
  --info-bg: #d4e0f5;
  --info-border: #234a8a;
  --code-bg: #100010;
  --code-fg: #ffffff;
  --mono: #2a2a2a;
  --dot-muted: #8b8b8b;
  --ring-bg: #8b8b8b;
  --overlay: rgba(0, 0, 0, 0.7);
  --focus-ring: #ffffa0;

  --elev-1: none;
  --elev-2: 4px 4px 0 rgba(0, 0, 0, 0.5);
  --elev-3: 6px 6px 0 rgba(0, 0, 0, 0.6);

  --border: var(--line);
  --hover: var(--surface-3);
  --soft-red: var(--danger);
  --soft-green: var(--accent-strong);

  color-scheme: light;
}