@import url('/fonts/fonts.css');
/* ============================================================
   Docorigami · ДИЗАЙН-ТОКЕНЫ САЙТА (маркетинг: главная, лендинги, блог)
   Единый источник правды. Меняешь тему сайта — меняешь ТОЛЬКО этот файл.
   Инструмент (SPA) имеет свои токены → css/tokens.app.css.
   Как менять цвета/шрифты/тему: css/DESIGN-SYSTEM.md
   ------------------------------------------------------------
   ПАЛИТРА: бренд Viktor Zakharov (лён/графит/бирюза). Правило №1 — никакого
   чёрного и неона. Светлая тема — по умолчанию (:root). Тёмная navy — по тумблеру
   [data-theme="dark"] (localStorage через js/theme.js).
   ============================================================ */

:root {
  /* ---------- Поверхности ---------- */
  --bg:        #F5F2EC;   /* linen — основной фон */
  --surface:   #FBFAF7;   /* paper — карточки, секции */
  --surface2:  #EFE9DF;   /* вторичные кнопки, чипы */
  --border:    #D8CCBE;   /* sand — рамки, разделители */

  /* ---------- Акцент (turquoise) ---------- */
  --accent:    #2B8C87;
  --accent-h:  #226E6A;   /* turquoise deep — hover */
  --on-accent: #FBFAF7;   /* текст на акцентной кнопке */
  --accent-soft: rgba(43,140,135,.10);
  --accent-line: rgba(43,140,135,.30);
  --accent-weak: rgba(43,140,135,.07);
  --accent-mid:  rgba(43,140,135,.15);
  --accent-25:   rgba(43,140,135,.25);
  --accent-40:   rgba(43,140,135,.40);

  /* ---------- Текст ---------- */
  --text:      #2A2D2F;   /* graphite (НЕ чёрный) */
  --text-body: rgba(42,45,47,.80);
  --muted:     rgba(42,45,47,.55);

  /* ---------- Статусы / diff ---------- */
  --green:     #2B8C87;   --green-soft:  rgba(43,140,135,.14);
  --yellow:    #B8893E;   --yellow-soft: rgba(184,137,62,.14);  /* охра */
  --red:       #B4543E;   --red-soft:    rgba(180,84,62,.16);   /* терракот */
  --red-line:  rgba(180,84,62,.55);

  /* ---------- Стекло навбара / оверлеи ---------- */
  --nav-bg:     rgba(251,250,247,.85);
  --nav-border: rgba(42,45,47,.10);
  --overlay-1:  rgba(42,45,47,.05);
  --line-light: rgba(42,45,47,.06);

  /* ---------- Тени ---------- */
  --shadow:    0 2px 10px rgba(42,45,47,.06);
  --shadow-lg: 0 12px 40px rgba(42,45,47,.10);

  /* ---------- Радиусы ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 20px;

  /* ---------- Типографика (бренд) ---------- */
  --font-head: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Логотип (turquoise-градиент) ---------- */
  --logo-a: #3FA39D;
  --logo-b: #2B8C87;
}

/* Заголовки — IBM Plex Sans (страницы не задают font-family для h*, конфликта нет) */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }

/* ============================================================
   ДЕМО-МОКАП в hero — это «скриншот» тёмного инструмента на светлой
   странице. Изолируем в navy локальным переопределением токенов, чтобы
   светлые линии контента и стекло оставались корректными на тёмном фоне.
   ============================================================ */
.demo-frame {
  --bg:        #16202A;
  --surface:   #1E2933;
  --surface2:  #243240;
  --border:    rgba(245,242,236,.14);
  --muted:     rgba(245,242,236,.55);
  --text:      #F5F2EC;
  --text-body: rgba(245,242,236,.82);
  color: var(--text);
}

/* ============================================================
   ТЁМНАЯ ТЕМА (navy, без неона) — по тумблеру [data-theme="dark"].
   ============================================================ */
[data-theme="dark"] {
  --bg:        #1E2933;   /* navy */
  --surface:   #243240;
  --surface2:  #2A3A46;
  --border:    rgba(245,242,236,.14);

  --accent:    #3FA39D;   /* бирюза, приподнята для контраста на navy */
  --accent-h:  #56B8B1;
  --on-accent: #16202A;
  --accent-soft: rgba(63,163,157,.14);
  --accent-line: rgba(63,163,157,.35);
  --accent-weak: rgba(63,163,157,.10);
  --accent-mid:  rgba(63,163,157,.18);
  --accent-25:   rgba(63,163,157,.25);
  --accent-40:   rgba(63,163,157,.40);

  --text:      #F5F2EC;   /* linen */
  --text-body: rgba(245,242,236,.82);
  --muted:     rgba(245,242,236,.55);

  --green:  #3FA39D; --green-soft:  rgba(63,163,157,.18);
  --yellow: #D8B45E; --yellow-soft: rgba(216,180,94,.18);
  --red:    #D2795E; --red-soft:    rgba(210,121,94,.20);
  --red-line: rgba(210,121,94,.55);

  --nav-bg:     rgba(30,41,51,.85);
  --nav-border: rgba(245,242,236,.14);
  --overlay-1:  rgba(0,0,0,.20);
  --line-light: rgba(245,242,236,.08);

  --shadow:    0 2px 14px rgba(0,0,0,.28);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.36);
}
/* В тёмной теме демо-мокап совпадает с основным фоном — снимаем изоляцию */
[data-theme="dark"] .demo-frame {
  --bg: #16202A; --surface: #1E2933; --surface2: #243240;
}