/* TresCAD — общая система: токены и примитивы для всех экранов.
   Подключается первой, до site.css / styles.css. Описание — DESIGN.md */
:root {
  color-scheme: dark;

  /* ── Семантические токены ── */
  /* поверхности: слоистый графит, разница между слоями едва заметна */
  --bg-root:        #121212;  /* страница, рабочая область */
  --bg-panel:       #161616;  /* крупные панели: сайдбар, инспектор, нижняя полоса */
  --bg-surface:     #1b1b1b;  /* вторичные поверхности, поля */
  --bg-hover:       #202020;  /* ховер и нейтральное выделение */
  --bg-canvas:      #111111;  /* колодец канваса / вьюпорта */
  --grid:           #1f1f1f;  /* сетка канваса */

  --border-subtle:  #252525;  /* разделители и рамки панелей */
  --border-strong:  #2e2e2e;  /* рамки контролов */
  --border-active:  #ff7a1a;

  --text-primary:   #d8d8d6;
  --text-secondary: #969693;
  --text-muted:     #969693;  /* в коде страниц = вторичный текст */
  --text-dim:       #6b6b69;  /* системный: ключи, время, хоткеи */
  --text-disabled:  #525250;

  --accent-orange:  #ff7a1a;  /* только действие: выбор, активный этап, фокус, главная кнопка */
  --accent-cyan:    #4cc3a0;  /* только геометрия и данные: швы, размеры, привязки */

  /* ── Короткие имена, которые используют стили страниц ── */
  --well:        var(--bg-canvas);
  --bg:          var(--bg-root);
  --panel:       var(--bg-panel);
  --panel-2:     var(--bg-surface);
  --hover:       var(--bg-hover);
  --border:      var(--border-strong);
  --border-soft: var(--border-subtle);
  --text:        var(--text-primary);
  --accent:      var(--accent-orange);
  --accent-soft: #ff7a1a17;
  --accent-fill: #6e3a1c;
  --guide:       var(--accent-cyan);
  --ok:          #5bb98a;
  --danger:      #e5484d;

  --radius: 5px;      /* панели */
  --radius-sm: 3px;   /* контролы */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

code { font: inherit; color: var(--text-primary); }

/* ─── Строки данных «ключ  значение» ─────────────── */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 20px; margin: 0; font-size: 12px; }
.kv dt { color: var(--text-dim); white-space: nowrap; }
.kv dd { margin: 0; min-width: 0; color: var(--text-primary); }
.kv b { font-weight: 500; }

/* ─── Журнал событий ─────────────────────────────── */
/* 1) События со временем: <li><time>19:43</time><span>текст</span><span class="sub">…</span></li> */
.log { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-secondary); }
.log li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: 0 14px; }
.log time { color: var(--text-dim); }
.log b { font-weight: 500; color: var(--text-primary); }
.log .sub { grid-column: 2; color: var(--text-dim); font-size: 11px; }
/* 2) Вывод команд: <li class="cmd"><span class="line">…</span><span class="sub">…</span></li> → «> …» */
.log li.cmd { display: flex; flex-direction: column; gap: 1px; }
.log .cmd > .line::before { content: "> "; color: var(--accent); opacity: .7; }
.log .cmd > .sub { padding-left: 2ch; }

/* ─── Статус ─────────────────────────────────────── */
.prompt::before { content: "> "; color: var(--accent); }
.st { display: inline-flex; align-items: center; gap: 7px; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.st.is-idle::before { background: var(--text-disabled); }