/* ─────────────────────────────────────────────────────────────────────────
   legal-canvas.css — язык холста для правовых страниц
   (/privacy, /terms, /cookies, /consent).

   Почему отдельный файл, а не site-canvas.css: правовые страницы не подключают
   rugma-pages.css вовсе — у них автономный документный шаблон (сайдбар + main)
   со СВОИМ набором токенов (--bg2..--bg4, --text2, --border вместо --surf, --t2,
   --bd). Общий слой их просто не задел бы: он переопределяет другие имена.

   Все четыре страницы используют один и тот же шаблон, поэтому файл один.
   Подключать ПОСЛЕДНИМ — правила намеренно переопределяют страничные.

   Виньетку холста здесь НЕ применяем: на главной она собирает взгляд к центру,
   а на длинном юридическом тексте затемняла бы края абзацев.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Токены: палитра холста ────────────────────────────────────────────────
   Модель темы у этих страниц своя: обе ветки заданы явно ([data-theme=dark] и
   [data-theme=light]) плюс системная для :root без атрибута. Повторяем ту же
   структуру — иначе половина случаев осталась бы на старых цветах. */

:root {
  --accent: #7c5cff;
  --accent2: #ff8ab5;   /* розовый холста вместо #FF5C8A */
  --accent3: #4ade80;   /* зелёный холста вместо #5CFFB8 */
  --cvl-r: 22px;
  --cvl-dot: rgba(255, 255, 255, .13);
  --cvl-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}

[data-theme="dark"] {
  --bg: #0b0b0f;
  --bg2: #111117;
  --bg3: rgba(255, 255, 255, .035);
  --bg4: rgba(255, 255, 255, .06);
  --text: #f2f1f7;
  --text2: #a4a4b3;
  --border: rgba(255, 255, 255, .09);
  --cvl-dot: rgba(255, 255, 255, .13);
  --cvl-card: rgba(17, 17, 23, .9);
  --cvl-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}

[data-theme="light"] {
  --accent: #6a45f5;
  --accent2: #c03571;
  --accent3: #15803d;
  --bg: #f3f1ec;
  --bg2: #ffffff;
  --bg3: rgba(20, 18, 28, .035);
  --bg4: rgba(20, 18, 28, .06);
  --text: #1a1822;
  --text2: #4b4858;
  --border: rgba(20, 18, 28, .12);
  --cvl-dot: rgba(20, 18, 28, .14);
  --cvl-card: rgba(255, 255, 255, .94);
  --cvl-shadow: 0 30px 90px rgba(20, 18, 28, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0b0f;
    --bg2: #111117;
    --bg3: rgba(255, 255, 255, .035);
    --bg4: rgba(255, 255, 255, .06);
    --text: #f2f1f7;
    --text2: #a4a4b3;
    --border: rgba(255, 255, 255, .09);
    --cvl-dot: rgba(255, 255, 255, .13);
    --cvl-card: rgba(17, 17, 23, .9);
    --cvl-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --accent: #6a45f5;
    --accent2: #c03571;
    --accent3: #15803d;
    --bg: #f3f1ec;
    --bg2: #ffffff;
    --bg3: rgba(20, 18, 28, .035);
    --bg4: rgba(20, 18, 28, .06);
    --text: #1a1822;
    --text2: #4b4858;
    --border: rgba(20, 18, 28, .12);
    --cvl-dot: rgba(20, 18, 28, .14);
    --cvl-card: rgba(255, 255, 255, .94);
    --cvl-shadow: 0 30px 90px rgba(20, 18, 28, .14);
  }
}

/* ── Фон: точечная сетка холста ────────────────────────────────────────────
   Своего слоя-подложки у этих страниц нет (нет .bg-canvas), поэтому рисуем
   сетку фиксированным псевдоэлементом под контентом. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--cvl-dot) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Сайдбар перекрывает сетку своей подложкой — делаем его прозрачным, чтобы
   холст шёл под всей страницей, а колонку отделяла только граница. */
.sidebar {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Типографика холста ────────────────────────────────────────────────────
   Холст набран плотнее: тот же трекинг, что у .cv-h1/.cv-h2. */

h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 800; letter-spacing: -.03em; }

/* Иконка-плашка у h2 — в холсте это тихая подложка, а не цветной бейдж. */
h2 .h2-icon {
  background: var(--bg3);
  border-color: var(--border);
}

/* Метка раздела — моноширинная, как эйбрау холста: без плашки и рамки. */
.doc-tag {
  padding: 0;
  background: none;
  border: 0;
  letter-spacing: .11em;
  color: var(--accent);
}

/* Логотип в сайдбаре: градиент из брендовой пары холста. */
.sidebar-logo a {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ── Карточки ──────────────────────────────────────────────────────────────
   Общий приём холста: крупный радиус, непрозрачная подложка, мягкая глубокая
   тень. Заголовочный блок документа (.doc-hero) был градиентной заливкой —
   переводим в обычную карточку, цвет несёт только акцентная метка внутри. */

.doc-hero {
  background: var(--cvl-card);
  border: 1px solid var(--border);
  border-radius: var(--cvl-r);
  box-shadow: var(--cvl-shadow);
}

.tool-card {
  background: var(--cvl-card);
  border: 1px solid var(--border);
  border-radius: var(--cvl-r);
  box-shadow: var(--cvl-shadow);
}
.tool-card:hover { border-color: var(--accent); }

.tool-icon {
  background: var(--bg3);
  border-color: var(--border);
}

/* Врезки-подсказки: цветная полоса слева остаётся смысловой (зелёная —
   нейтральная, фиолетовая — информация, жёлтая — предупреждение), но заливка
   уходит в общий тон холста. */
.tip {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent3);
  border-radius: 0 12px 12px 0;
}
.tip.info { background: var(--bg3); border-color: var(--border); border-left-color: var(--accent); }
.tip.warn { background: var(--bg3); border-color: var(--border); border-left-color: #ffd27a; }

/* Активный пункт бокового меню — акцент холста. */
.nav-item.active {
  background: var(--bg3);
  border-left-color: var(--accent);
  color: var(--accent);
}

/* Кнопки в правом верхнем углу — в тон холсту, без своей подложки. */
.theme-btn, .back-btn {
  background: var(--bg3);
  border-color: var(--border);
}
.theme-btn:hover, .back-btn:hover { border-color: var(--accent); }

/* Таблица cookie (только /cookies) — рамки и шапка в тон холста. */
.cookie-table th { background: var(--bg3); }
.cookie-table th, .cookie-table td { border-color: var(--border); }

/* Бейджи «обязательные / необязательные» несли хардкодные цвета старой палитры
   (#5CFFB8, #FF5C8A) — они не переключались вместе с темой и на светлом фоне
   почти не читались. Переводим на токены: в светлой теме это тёмные оттенки. */
.badge-req {
  background: color-mix(in srgb, var(--accent3) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent3) 32%, transparent);
  color: var(--accent3);
}
.badge-opt {
  background: color-mix(in srgb, var(--accent2) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent2) 32%, transparent);
  color: var(--accent2);
}