/* ═══════════════════════════════════════════════════════════════
   Netfold UI kit · токены (v4)
   Подключать ПОСЛЕ themes-and-brand.css. Старые --nf-* / --nfb-* / --th-*
   сохранены и переиспользованы; новые токены — с префиксом --nf-.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* шкала отступов (кратно 4) */
  --nf-s1: 4px; --nf-s2: 8px; --nf-s3: 12px; --nf-s4: 16px; --nf-s5: 20px; --nf-s6: 24px;
  /* элементы управления */
  --nf-ctl-h: 36px;          /* кнопки, поля, сегменты в панели */
  --nf-ctl-h-sm: 30px;       /* плавающая панель форматирования */
  --nf-icon: 18px;
  --nf-panel-w: 300px;
  --nf-toolbar-h: 44px;
  /* шрифты */
  --nf-font-ui: var(--nfb-font-text, "Onest", system-ui, sans-serif);
  --nf-font-head: var(--nfb-font-display, "Unbounded", "Onest", sans-serif);
  --nf-font-mono: var(--nfb-font-mono, "JetBrains Mono", ui-monospace, monospace);
  /* типографика нод (размер задаёт пользователь — это значения по умолчанию) */
  --nf-n0-size: 17px; --nf-n1-size: 15px; --nf-n2-size: 13px; --nf-meta-size: 11px;
  /* движение */
  --nf-ease: cubic-bezier(.2,.7,.3,1);
  --nf-dur: 140ms;
}
/* Тач: всё управление не меньше 44 px */
@media (pointer: coarse) {
  :root { --nf-ctl-h: 44px; --nf-ctl-h-sm: 40px; --nf-icon: 20px; }
}

/* ─────────────── Netfold (фирменная) ─────────────── */
body.theme-netfold {
  --nf-paper:#F4F1EA; --nf-card:#FFFFFF; --nf-ink:#16181D; --nf-muted:#5E626C; --nf-line:rgba(22,24,29,.14); --nf-accent:#2F45FF;
  --nf-accent-ink:#FFFFFF; --nf-accent-2:#FFB547; --nf-surface-2:#F4F1EA; --nf-surface-3:#EEF0FF;
  /* ноды */
  --nf-r0:14px; --nf-r1:12px; --nf-r2:10px;
  --nf-n0-bg:#16181D; --nf-n0-fg:#FFFFFF; --nf-n0-font:var(--nf-font-head); --nf-n0-weight:600;
  --nf-n1-bg:#FFFFFF; --nf-n1-fg:#16181D; --nf-n1-weight:600;
  --nf-n2-bg:#EEF0FF; --nf-n2-fg:#16181D;
  --nf-n0-shadow: 4px 4px 0 #2F45FF;
  --nf-n1-shadow: 0 0 0 2px #2F45FF, 3px 3px 0 2px #2F45FF;
  --nf-n2-shadow: 0 0 0 1.5px #16181D, 2px 2px 0 1.5px #16181D;
  --nf-hover-shift: translate(-1px,-1px);
  --nf-n1-shadow-hover: 0 0 0 2px #2F45FF, 5px 5px 0 2px #2F45FF;
  --nf-n2-shadow-hover: 0 0 0 1.5px #16181D, 4px 4px 0 1.5px #16181D;
  --nf-sticky-bg:#FFE7B8;
  --nf-edge-1:#2F45FF; --nf-edge-2:rgba(22,24,29,.55); --nf-edge-w1:2.25px; --nf-edge-w2:1.5px;
  /* состояния */
  --nf-sel:#FFB547; --nf-sel-line:#16181D; --nf-sel-glow:none;
  --nf-find:#2F45FF; --nf-find-mark:#FFD991;
  --nf-link:#16181D; --nf-link-target:#16181D;
  --nf-badge-bg:#FFB547; --nf-badge-fg:#16181D; --nf-badge-line:#16181D;
  --nf-focus:#2F45FF;
  /* панели */
  --nf-panel-bg:#FFFFFF; --nf-panel-line:#16181D; --nf-panel-bw:1.5px; --nf-panel-r:18px; --nf-panel-shadow:6px 6px 0 #16181D;
  --nf-ctl-r:10px; --nf-ctl-bg:#F4F1EA; --nf-ctl-bg-hover:#EEF0FF; --nf-ctl-line:transparent;
  --nf-ctl-on-bg:#16181D; --nf-ctl-on-fg:#FFFFFF;
  --nf-label-font:var(--nf-font-mono); --nf-label-size:10.5px; --nf-label-ls:.08em; --nf-label-tt:uppercase;
  --nf-title-font:var(--nf-font-head); --nf-title-weight:600;
  --nf-float-shadow:4px 4px 0 #16181D;
  --nf-canvas: radial-gradient(circle, rgba(22,24,29,.16) 1.2px, transparent 1.4px) 0 0/24px 24px, #F4F1EA;
}

/* ─────────────── Мастерская (светлая, тёплая) ─────────────── */
body.theme-atelier {
  --nf-paper:#F3EBDD; --nf-card:#FFFAF1; --nf-ink:#3A2E26; --nf-muted:#7A6A5C; --nf-line:#E4D6C1; --nf-accent:#B8553A;
  --nf-accent-ink:#FFF6EA; --nf-accent-2:#D99A3C; --nf-surface-2:#F6EEE1; --nf-surface-3:#F1E2CE;
  --nf-font-head: Georgia, "PT Serif", "Times New Roman", serif;
  --nf-r0:16px; --nf-r1:14px; --nf-r2:12px;
  --nf-n0-bg:#AD4C32; --nf-n0-fg:#FFF6EA; --nf-n0-font:var(--nf-font-head); --nf-n0-weight:700;
  --nf-n1-bg:#FFFAF1; --nf-n1-fg:#3A2E26; --nf-n1-weight:600;
  --nf-n2-bg:#F5E9D3; --nf-n2-fg:#4A3B2F;
  --nf-n0-shadow: 0 8px 20px rgba(140,70,40,.24);
  --nf-n1-shadow: 0 0 0 1px rgba(150,110,80,.24), 0 6px 16px rgba(120,80,50,.12);
  --nf-n2-shadow: 0 0 0 1px rgba(150,110,80,.18), 0 3px 8px rgba(120,80,50,.08);
  --nf-hover-shift: translateY(-2px);
  --nf-n1-shadow-hover: 0 0 0 1px rgba(150,110,80,.34), 0 10px 22px rgba(120,80,50,.16);
  --nf-n2-shadow-hover: 0 0 0 1px rgba(150,110,80,.3), 0 6px 14px rgba(120,80,50,.12);
  --nf-sticky-bg:#F8E3A6;
  --nf-edge-1:#B8553A; --nf-edge-2:rgba(122,90,64,.45); --nf-edge-w1:2px; --nf-edge-w2:1.5px;
  --nf-sel:#B8553A; --nf-sel-line:#FFFAF1; --nf-sel-glow:none;
  --nf-find:#C27A12; --nf-find-mark:#F6D58A;
  --nf-link:#3A2E26; --nf-link-target:#3A2E26;
  --nf-badge-bg:#3A2E26; --nf-badge-fg:#FFF6EA; --nf-badge-line:#3A2E26;
  --nf-focus:#B8553A;
  --nf-panel-bg:#FFFAF1; --nf-panel-line:#E4D6C1; --nf-panel-bw:1px; --nf-panel-r:20px; --nf-panel-shadow:0 18px 40px rgba(120,80,50,.16);
  --nf-ctl-r:12px; --nf-ctl-bg:#F6EEE1; --nf-ctl-bg-hover:#F1E2CE; --nf-ctl-line:transparent;
  --nf-ctl-on-bg:#AD4C32; --nf-ctl-on-fg:#FFF6EA;
  --nf-label-font:var(--nf-font-ui); --nf-label-size:11px; --nf-label-ls:.04em; --nf-label-tt:uppercase;
  --nf-title-font:var(--nf-font-head); --nf-title-weight:700;
  --nf-float-shadow:0 12px 28px rgba(120,80,50,.18);
  --nf-canvas: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(150,110,80,.16) 31px 32px), #F3EBDD;
}

/* ─────────────── Ботаника (светлая, мягкая) ─────────────── */
body.theme-botanical {
  --nf-paper:#E6EFDC; --nf-card:#F9FCF3; --nf-ink:#25382A; --nf-muted:#5B7360; --nf-line:#CFE0C6; --nf-accent:#4F8A54;
  --nf-accent-ink:#FFFFFF; --nf-accent-2:#E3B341; --nf-surface-2:#EEF5E6; --nf-surface-3:#DCECC9;
  --nf-font-head: "Nunito", ui-rounded, "SF Pro Rounded", var(--nf-font-ui);
  --nf-r0:999px; --nf-r1:22px; --nf-r2:18px;
  --nf-n0-bg:#437A48; --nf-n0-fg:#FFFFFF; --nf-n0-font:var(--nf-font-ui); --nf-n0-weight:700;
  --nf-n1-bg:#F9FCF3; --nf-n1-fg:#25382A; --nf-n1-weight:600;
  --nf-n2-bg:#DCECC9; --nf-n2-fg:#2D4A32;
  --nf-n0-shadow: 0 10px 24px rgba(60,110,64,.30);
  --nf-n1-shadow: 0 8px 20px rgba(70,110,75,.16);
  --nf-n2-shadow: 0 2px 0 rgba(70,110,75,.12);
  --nf-hover-shift: translateY(-2px);
  --nf-n1-shadow-hover: 0 12px 26px rgba(70,110,75,.22);
  --nf-n2-shadow-hover: 0 6px 14px rgba(70,110,75,.16);
  --nf-sticky-bg:#FFF1B8;
  --nf-edge-1:#4F8A54; --nf-edge-2:rgba(79,138,84,.45); --nf-edge-w1:3px; --nf-edge-w2:2px;
  --nf-sel:#2F6B35; --nf-sel-line:#F9FCF3; --nf-sel-glow:none;
  --nf-find:#B9770E; --nf-find-mark:#FFE08A;
  --nf-link:#25382A; --nf-link-target:#25382A;
  --nf-badge-bg:#25382A; --nf-badge-fg:#F9FCF3; --nf-badge-line:#25382A;
  --nf-focus:#2F6B35;
  --nf-panel-bg:#F9FCF3; --nf-panel-line:transparent; --nf-panel-bw:0px; --nf-panel-r:28px; --nf-panel-shadow:0 18px 40px rgba(70,110,75,.18);
  --nf-ctl-r:999px; --nf-ctl-bg:#EEF5E6; --nf-ctl-bg-hover:#DCECC9; --nf-ctl-line:transparent;
  --nf-ctl-on-bg:#3F7A45; --nf-ctl-on-fg:#FFFFFF;
  --nf-label-font:var(--nf-font-ui); --nf-label-size:11.5px; --nf-label-ls:.02em; --nf-label-tt:none;
  --nf-title-font:var(--nf-font-ui); --nf-title-weight:700;
  --nf-float-shadow:0 14px 30px rgba(70,110,75,.22);
  --nf-canvas: radial-gradient(circle at 18% 22%, rgba(120,170,100,.28), transparent 34%), radial-gradient(circle at 82% 78%, rgba(160,200,120,.26), transparent 38%), radial-gradient(circle, rgba(60,110,64,.16) 2px, transparent 2.4px) 0 0/40px 40px, #E6EFDC;
}

/* ─────────────── Лагуна (светлая, стекло без blur на нодах) ─────────────── */
body.theme-lagoon {
  --nf-paper:#DDF0F4; --nf-card:#FFFFFF; --nf-ink:#16424E; --nf-muted:#48707C; --nf-line:rgba(22,66,78,.12); --nf-accent:#1B94AD;
  --nf-accent-ink:#FFFFFF; --nf-accent-2:#F59E0B; --nf-surface-2:rgba(22,66,78,.06); --nf-surface-3:rgba(27,148,173,.12);
  --nf-font-head: "Avenir Next", "Onest", "Helvetica Neue", sans-serif;
  --nf-r0:18px; --nf-r1:14px; --nf-r2:12px;
  --nf-n0-bg:#137E93; --nf-n0-fg:#FFFFFF; --nf-n0-font:var(--nf-font-ui); --nf-n0-weight:500;
  --nf-n1-bg:#FFFFFF; --nf-n1-fg:#16424E; --nf-n1-weight:600;
  --nf-n2-bg:#F1FAFC; --nf-n2-fg:#2A5A68;
  --nf-n0-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 12px 28px rgba(27,148,173,.35);
  --nf-n1-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(22,66,78,.08), 0 10px 24px rgba(40,120,140,.14);
  --nf-n2-shadow: 0 0 0 1px rgba(22,66,78,.08), 0 4px 10px rgba(40,120,140,.08);
  --nf-hover-shift: translateY(-2px);
  --nf-n1-shadow-hover: 0 0 0 1px rgba(22,66,78,.12), 0 14px 30px rgba(40,120,140,.2);
  --nf-n2-shadow-hover: 0 0 0 1px rgba(22,66,78,.12), 0 8px 18px rgba(40,120,140,.14);
  --nf-sticky-bg:#FFF4C9;
  --nf-edge-1:#1B94AD; --nf-edge-2:rgba(27,148,173,.45); --nf-edge-w1:2px; --nf-edge-w2:1.25px;
  --nf-sel:#0B6E83; --nf-sel-line:#FFFFFF; --nf-sel-glow:none;
  --nf-find:#D97706; --nf-find-mark:#FFDDA0;
  --nf-link:#16424E; --nf-link-target:#16424E;
  --nf-badge-bg:#16424E; --nf-badge-fg:#FFFFFF; --nf-badge-line:#16424E;
  --nf-focus:#0B6E83;
  --nf-panel-bg:rgba(255,255,255,.86); --nf-panel-line:rgba(255,255,255,.95); --nf-panel-bw:1px; --nf-panel-r:20px; --nf-panel-shadow:0 20px 44px rgba(40,120,140,.20);
  --nf-ctl-r:10px; --nf-ctl-bg:rgba(22,66,78,.06); --nf-ctl-bg-hover:rgba(27,148,173,.14); --nf-ctl-line:transparent;
  --nf-ctl-on-bg:#0B6E83; --nf-ctl-on-fg:#FFFFFF;
  --nf-label-font:var(--nf-font-ui); --nf-label-size:11px; --nf-label-ls:.06em; --nf-label-tt:uppercase;
  --nf-title-font:var(--nf-font-head); --nf-title-weight:500;
  --nf-float-shadow:0 14px 32px rgba(40,120,140,.22);
  --nf-canvas: linear-gradient(rgba(27,148,173,.12) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, rgba(27,148,173,.12) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(165deg,#CDEBF2 0%,#E6F5F8 55%,#F3FBFC 100%);
}

/* ─────────────── Полночь (тёмная) ─────────────── */
body.theme-midnight {
  --nf-paper:#0D1220; --nf-card:#161D31; --nf-ink:#E8EEFC; --nf-muted:#93A0C2; --nf-line:#27324F; --nf-accent:#6EE7FF;
  --nf-accent-ink:#04202A; --nf-accent-2:#FFD166; --nf-surface-2:#0F1528; --nf-surface-3:rgba(110,231,255,.10);
  --nf-font-head: var(--nf-font-mono);
  --nf-r0:10px; --nf-r1:8px; --nf-r2:6px;
  --nf-n0-bg:#6EE7FF; --nf-n0-fg:#04202A; --nf-n0-font:var(--nf-font-mono); --nf-n0-weight:600;
  --nf-n1-bg:#1A2340; --nf-n1-fg:#E8EEFC; --nf-n1-weight:600;
  --nf-n2-bg:#111830; --nf-n2-fg:#B6C3E6;
  /* свечение только у центра; остальные — тонкая линия (сотни нод без нагрузки) */
  --nf-n0-shadow: 0 0 0 1px #6EE7FF, 0 0 28px rgba(110,231,255,.40);
  --nf-n1-shadow: 0 0 0 1px rgba(110,231,255,.38);
  --nf-n2-shadow: 0 0 0 1px #27324F;
  --nf-hover-shift: none;
  --nf-n1-shadow-hover: 0 0 0 1px #6EE7FF;
  --nf-n2-shadow-hover: 0 0 0 1px rgba(110,231,255,.6);
  --nf-sticky-bg:#2A2A16;
  --nf-edge-1:#6EE7FF; --nf-edge-2:rgba(110,231,255,.35); --nf-edge-w1:1.75px; --nf-edge-w2:1.25px;
  --nf-sel:#FFD166; --nf-sel-line:#0D1220; --nf-sel-glow:0 0 18px rgba(255,209,102,.45);
  --nf-find:#C4A1FF; --nf-find-mark:rgba(196,161,255,.38);
  --nf-link:#C4A1FF; --nf-link-target:#C4A1FF;
  --nf-badge-bg:#FFD166; --nf-badge-fg:#0D1220; --nf-badge-line:#0D1220;
  --nf-focus:#6EE7FF;
  --nf-panel-bg:#131A2D; --nf-panel-line:#27324F; --nf-panel-bw:1px; --nf-panel-r:14px; --nf-panel-shadow:0 0 0 1px rgba(110,231,255,.10), 0 24px 48px rgba(0,0,0,.45);
  --nf-ctl-r:8px; --nf-ctl-bg:#0D1220; --nf-ctl-bg-hover:#1B2440; --nf-ctl-line:#27324F;
  --nf-ctl-on-bg:#6EE7FF; --nf-ctl-on-fg:#04202A;
  --nf-label-font:var(--nf-font-mono); --nf-label-size:10.5px; --nf-label-ls:.1em; --nf-label-tt:uppercase;
  --nf-title-font:var(--nf-font-mono); --nf-title-weight:600;
  --nf-float-shadow:0 0 0 1px rgba(110,231,255,.18), 0 16px 36px rgba(0,0,0,.5);
  --nf-canvas: radial-gradient(circle, rgba(110,231,255,.20) 1px, transparent 1.4px) 0 0/22px 22px, #0D1220;
}