/* ===================================================================
 * Тёмная тема для вложенных страниц лендинга: /about/, /security/,
 * /privacy/, /terms/, /cookies/, /docs/.
 *
 * Подключается ПОСЛЕ landing.css и только переопределяет — сама вёрстка,
 * сетки и отступы остаются оттуда. Так сделано намеренно: landing.css
 * почти целиком построен на токенах (226 обращений к var() против
 * полутора десятков реальных хардкодов в правилах этих страниц), поэтому
 * смена палитры — это переопределение :root плюс несколько точечных
 * правил ниже. Переписывать 1576 строк ради цвета не нужно, а старый
 * светлый landing.html остаётся рабочим для отката.
 *
 * Палитра совпадает с главной (landing-app/src/styles.css). Синего в ней
 * нет сознательно: пара «янтарь + голубой» на тёмном читалась как флаг.
 * Поэтому --electric (он был синим) уводится в фиолетовый, а --violet —
 * в мадженту, ровно как на главной.
 * ================================================================ */

:root {
  --bg:            #07080B;
  --bg-elev:       #0B0D12;
  --bg-sunk:       #0B0D12;
  --surface:       #11141B;
  --surface-2:     #171B24;
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text:          #F4F2EC;
  --text-muted:    #9AA0AC;
  --text-soft:     #646A78;

  --amber:         #FFB23D;
  --amber-ink:     #2A1B06;
  --amber-soft:    rgba(255, 178, 61, 0.12);
  --electric:      #A98BFF;
  --electric-soft: rgba(169, 139, 255, 0.12);
  --mint:          #4FE6A8;
  --mint-soft:     rgba(79, 230, 168, 0.12);
  --coral:         #FF6B5A;
  --coral-soft:    rgba(255, 107, 90, 0.12);
  --violet:        #FF5CA8;
  --violet-soft:   rgba(255, 92, 168, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.85);
}

/* ── Шапка и подвал ─────────────────────────────────────────────── */

/* Светлое стекло из landing.css задано oklch-литералом, а не токеном —
   переопределяем явно, иначе шапка осталась бы белой полосой. */
.l-nav {
  background: rgba(7, 8, 11, 0.78);
  border-bottom-color: var(--border);
}

/* Знак стал картинкой вместо амберного квадрата с буквой «W». */
.l-nav__brand-logo {
  width: auto;
  height: 26px;
  background: none;
  border-radius: 0;
  display: block;
}

.l-nav__login:hover { background: rgba(255, 255, 255, 0.06); }
.l-nav__cta { color: var(--amber-ink); }

.l-footer { background: var(--bg); }
/* Ссылки в колонках футера на hover красились в --amber-ink (landing.css:1028).
   Этот токен — «текст ПОВЕРХ янтарной заливки» (почти чёрный, #2A1B06); на
   светлой бумаге он читался как тёмный акцент, а на этой палитре ссылка при
   наведении уходила в фон: #2A1B06 на #07080B. Акцент здесь — сам янтарь,
   ровно как на главной (landing-app/src/sections.css, .wb-footer__links a:hover).
   Правим точечно здесь, а не в landing.css: светлый landing.html подключается
   без этого файла и остаётся рабочим для отката. */
.l-footer__col-links a:hover { color: var(--amber); }

/* ── Документные страницы ───────────────────────────────────────── */

.l-doc code,
.l-doc th,
.l-doc__notice,
.l-sec-cell,
.l-about-stat,
.l-docs__card {
  background: var(--surface);
  border-color: var(--border);
}

.l-doc th, .l-doc td { border-color: var(--border); }

/* Ховер карточки в документации в светлой теме уходил в #fff — на тёмном
   это была бы вспышка; поднимаем на одну ступень вместо этого. */
.l-docs__card:hover {
  background: var(--surface-2);
  border-color: rgba(255, 178, 61, 0.32);
}

.l-doc__hl {
  background: linear-gradient(135deg, var(--surface), rgba(255, 178, 61, 0.10));
  border-color: rgba(255, 178, 61, 0.22);
}

/* Блок «чего мы не делаем» на /security/ был тёмной плашкой на светлом
   фоне — приём, который на тёмной странице не работает. Разворачиваем:
   теперь это светлая по краю карточка с коралловым акцентом. */
.l-sec-no {
  background: var(--surface);
  color: var(--text);
  border: 1px solid rgba(255, 107, 90, 0.28);
}
.l-sec-no h3 { color: var(--text); }

/* Выделение текста — тем же янтарём, что и на главной. */
::selection { background: var(--amber); color: var(--amber-ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Поиск по документации ──────────────────────────────────────── */

/* Поле было с жёстко заданным белым фоном, а кнопка красилась в var(--text)
   с белой надписью — на светлой теме это тёмная кнопка, на тёмной стала бы
   светлым пятном с белым текстом поверх. Разворачиваем обе. */
.l-docs__search input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.l-docs__search input::placeholder { color: var(--text-soft); }

.l-docs__search button {
  background: var(--amber);
  color: var(--amber-ink);
}
.l-docs__search button:hover { background: #FFC873; }