/* ============================================================
   NR SMM — токены темы (SPEC-NFR.md NFR-FE1; из NR Analysis, AGENTS.md §11).
   Чистый чёрный фон, графитовые карточки без рамок и теней, белая кнопка-«пилюля»,
   фиолетовый — фокус, выбор и ИИ; оранжевый — предупреждения; красный — ошибка.
   Цвета в правилах — ТОЛЬКО через эти переменные. Тёмная тема — по умолчанию;
   светлая — html.light; «как в системе» разрешается в prefs.js.
   ============================================================ */
:root {
  --bg: #000000;
  --surface: #15151b;
  --card: #15151b;
  --card-border: rgba(0,0,0,0);
  --border: rgba(255,255,255,0.10);
  --hover: rgba(255,255,255,0.08);
  --purple: #8854F3;
  --purple-l: #a071ff;
  --purple-text: #a071ff;
  --purple-tint: rgba(136,84,243,0.16);
  --purple-line: rgba(136,84,243,0.45);
  --orange: #F97316;
  --orange-l: #ff8a33;
  --orange-text: #ff8a33;
  --orange-tint: rgba(249,115,22,0.12);
  --orange-line: rgba(249,115,22,0.42);
  --green-text: #4ade80;
  --green-tint: rgba(34,197,94,0.14);
  --green-line: rgba(74,222,128,0.38);
  --red-text: #f87171;
  --red-tint: rgba(248,113,113,0.12);
  --red-line: rgba(248,113,113,0.42);
  --text: #E5E7EB;
  --dim: #94a3b8;
  --heading: #ffffff;
  --body2: #cbd5e1;
  --track: rgba(255,255,255,0.08);
  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn-border: rgba(255,255,255,0.10);
  --input-bg: #0d0d12;
  --input-border: rgba(255,255,255,0.14);
  --placeholder: rgba(229,231,235,0.40);
  --ctrl-bg: rgba(255,255,255,0.05);
  --ctrl-border: rgba(255,255,255,0.10);
  --overlay: rgba(0,0,0,0.55);
  --code-bg: #0d0d12;
  --grad: linear-gradient(120deg, #8854F3, #F97316);
  --grad-text: linear-gradient(100deg, #a071ff, #ff8a33);
  --shimmer: linear-gradient(100deg, #8854F3 0%, #F97316 50%, #8854F3 100%);
  --on-accent: #ffffff;
  /* Узлы графа процесса (EP-BA, как в andre-ai-strategy): исполнитель */
  --node-human: #F97316;
  --node-system: #8b93a5;
  --node-ai: #8854F3;
  /* Категориальная палитра графиков — тёмная ступень, порядок фиксирован,
     проверена валидатором палитры (CVD ΔE ≥ 9.4, контраст ≥ 3:1 на #15151b) */
  --series-1: #8854F3;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #3987e5;
  --series-5: #d55181;
  --series-6: #c98500;
  --grid-line: rgba(255,255,255,0.07);
  --axis-text: #94a3b8;
  /* Холст схем (US-PT6) — значения Playbook кабинета andre-ai-strategy, тёмная тема */
  --cv-grid: #1f1f25;
  --cv-line: #2a2a33;
  --cv-line-strong: #3b3b47;
  --cv-surface-2: #1c1c23;
  --cv-edge: #544d6b;
  --cv-ink-2: #b1b0bc;
  --cv-ink-3: #7e7d8a;
  --cv-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  --cv-shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.6);

  /* Таймлайн студии (FR-ST5…FR-ST7) */
  --tl-bg: #0b0b10;
  --tl-track: #15151b;
  --tl-tick: rgba(255,255,255,0.38);
  --tl-shade: rgba(0,0,0,0.62);
  --tl-hatch: rgba(255,255,255,0.06);
  --tl-head: #ffffff;
  --line-grad: linear-gradient(90deg, #7c3aed 0%, #a33ea8 55%, #ea580c 100%);
  --seg-a: rgba(255,255,255,0.07);
  --seg-b: rgba(255,255,255,0.12);
  --seg-hi: rgba(160,113,255,0.42);
  --stage-bg: #050507;
  /* Цвета надписей поверх ролика (FR-ST18) — те же, что рисует движок */
  --sw-white: #ffffff;
  --sw-black: #0b0b0f;
  --sw-violet: #b794ff;
  --sw-orange: #ff9a4d;
  --sw-gradient: linear-gradient(100deg, #b794ff 0%, #d36bd0 50%, #ff9a4d 100%);
  --tx-line: #a071ff;
  --tx-hover: rgba(255,255,255,0.55);
  --shadow-pop: 0 18px 44px rgba(0,0,0,.45);
  --shadow-toast: 0 12px 32px rgba(0,0,0,.4);
  --shadow-handle: 0 2px 8px rgba(0,0,0,.45);
  --line-glow: 0 0 18px rgba(136, 84, 243, .35);
  --seg-work: linear-gradient(90deg, rgba(124, 58, 237, .55), rgba(234, 88, 12, .5));
  --seg-app: rgba(136, 84, 243, .16);
  --seg-edge: rgba(255,255,255,0.08);
  --html-strip: #1b1b24;
  --wave-color: #a071ff;
  --wave-muted: rgba(148,163,184,0.35);

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --r-pill: 999px;
  --r-card: 1.1rem;
  --r-menu: 0.8rem;
  --r-item: 0.7rem;
  --r-input: 0.75rem;
  --r-tile: 0.8rem;
  --side-w: 280px;
  --content-w: 68rem;
  --t-fast: 0.2s ease;
  --t-mid: 0.25s ease;
  --t-drawer: 0.35s cubic-bezier(.4,0,.2,1);
  color-scheme: dark;
}

html.light {
  --bg: #f8fafc;
  --surface: #ffffff;
  --card: #ffffff;
  --card-border: #e2e8f0;
  --border: #e2e8f0;
  --hover: rgba(0,0,0,0.06);
  --purple-text: #6b3fd4;
  --purple-tint: rgba(136,84,243,0.10);
  --purple-line: rgba(107,63,212,0.45);
  --orange-text: #c2410c;
  --orange-tint: rgba(249,115,22,0.10);
  --orange-line: rgba(194,65,12,0.40);
  --green-text: #15803d;
  --green-tint: rgba(34,197,94,0.12);
  --green-line: rgba(21,128,61,0.35);
  --red-text: #b91c1c;
  --red-tint: rgba(220,38,38,0.08);
  --red-line: rgba(185,28,28,0.35);
  --text: #1e293b;
  --dim: #475569;
  --heading: #0f172a;
  --body2: #334155;
  --track: #eef2f7;
  --btn-bg: #0f172a;
  --btn-fg: #ffffff;
  --btn-border: #0f172a;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --placeholder: #64748b;
  --ctrl-bg: #f1f5f9;
  --ctrl-border: #e2e8f0;
  --overlay: rgba(15,23,42,0.35);
  --code-bg: #f1f5f9;
  --node-system: #64748b;
  /* Категориальная палитра — светлая ступень того же порядка; у слотов 3, 5, 6
     контраст ниже 3:1 → у каждого графика есть легенда и вид «Таблица» */
  --series-1: #6b3fd4;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #2a78d6;
  --series-5: #e87ba4;
  --series-6: #eda100;
  --grid-line: rgba(15,23,42,0.07);
  --axis-text: #475569;
  --cv-grid: #d9d5e6;
  --cv-line: #e0dcec;
  --cv-line-strong: #c8c2dc;
  --cv-surface-2: #faf9fd;
  --cv-edge: #a49dbc;
  --cv-ink-2: #4a4560;
  --cv-ink-3: #6b6580;
  --cv-shadow: 0 1px 2px rgba(26,24,38,.08), 0 8px 24px rgba(26,24,38,.08);
  --cv-shadow-lift: 0 2px 6px rgba(26,24,38,.12), 0 16px 40px rgba(26,24,38,.16);
  --tl-bg: #eef2f7;
  --tl-track: #ffffff;
  --tl-tick: rgba(15,23,42,0.5);
  --tl-shade: rgba(15,23,42,0.45);
  --tl-hatch: rgba(15,23,42,0.06);
  --tl-head: #0f172a;
  --seg-a: rgba(15,23,42,0.06);
  --seg-b: rgba(15,23,42,0.11);
  --seg-hi: rgba(107,63,212,0.30);
  --stage-bg: #0f172a;
  --html-strip: #ffffff;
  --seg-edge: rgba(15,23,42,0.08);
  --wave-color: #6b3fd4;
  color-scheme: light;
}