/* ─────────────────────────────────────────────────────────────────────────
   site-canvas.css — визуальный язык холста для ОБЫЧНЫХ страниц сайта.

   Фаза 3 редизайна: главная и посадочные уже живут в языке холста
   (css/pages/canvas.css), остальные страницы отставали — аврора-градиенты,
   радужная гамма и линейная сетка читались как другой продукт.

   Почему слоем поверх, а не правкой разметки каждой страницы: страничные CSS
   уже написаны на общих токенах rugma-pages.css (--bg, --bd, --surf, --accent,
   градиенты). Достаточно подменить ЗНАЧЕНИЯ токенов и добить компоненты, чтобы
   весь сайт перешёл в новый язык — разметка не трогается, а значит не ломаются
   ни nav-consistency, ни контентные смоуки, ни CSP (файл внешний).

   Подключать ПОСЛЕДНИМ (после css/pages/<page>.css и responsive.css) —
   правила здесь намеренно переопределяют страничные.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Токены: палитра холста ────────────────────────────────────────────────
   Значения — те же, что в canvas.css, чтобы страницы и главная не разъезжались
   по оттенкам. Тёмная тема база, светлая переопределяет весь набор. */

:root {
  --bg: #0b0b0f;
  --bg2: #111117;
  --surf: rgba(255, 255, 255, .035);
  --surf2: rgba(255, 255, 255, .06);
  --bd: rgba(255, 255, 255, .09);
  --bd2: rgba(255, 255, 255, .14);
  --text: #f2f1f7;
  --t2: #a4a4b3;
  --t3: #6d6d7e;
  --accent: #7c5cff;

  /* Радужные градиенты холсту чужды: он монохромный, цвет несёт только акцент.
     Токены не удаляем (их читают десятки правил) — переводим в свою гамму. */
  --grad-brand: linear-gradient(135deg, #7c5cff 0%, #6a45f5 100%);
  --grad-full: linear-gradient(120deg, #7c5cff 0%, #8f74ff 100%);
  --grad-spark: linear-gradient(120deg, #7c5cff 0%, #ff8ab5 100%);

  /* Собственные величины холста — карточки и тени. */
  --cvs-r: 22px;
  --cvs-card: rgba(17, 17, 23, .9);
  --cvs-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  --cvs-dot: rgba(255, 255, 255, .13);
  --cvs-vignette: rgba(6, 6, 9, .72);
}

html[data-theme="light"] {
  --bg: #f3f1ec;
  --bg2: #eae7df;
  --surf: rgba(20, 18, 28, .035);
  --surf2: rgba(20, 18, 28, .06);
  --bd: rgba(20, 18, 28, .12);
  --bd2: rgba(20, 18, 28, .2);
  --text: #1a1822;
  --t2: #4b4858;
  --t3: #7a7688;
  --accent: #6a45f5;
  --grad-brand: linear-gradient(135deg, #6a45f5 0%, #5836e0 100%);
  --grad-full: linear-gradient(120deg, #6a45f5 0%, #7c5cff 100%);
  --grad-spark: linear-gradient(120deg, #6a45f5 0%, #c03571 100%);
  --cvs-card: rgba(255, 255, 255, .94);
  --cvs-shadow: 0 30px 90px rgba(20, 18, 28, .14);
  --cvs-dot: rgba(20, 18, 28, .14);
  --cvs-vignette: rgba(210, 205, 195, .6);
}

/* Тема не выбрана явно → идём за системой (та же ветка значений, что выше). */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --bg: #f3f1ec;
    --bg2: #eae7df;
    --surf: rgba(20, 18, 28, .035);
    --surf2: rgba(20, 18, 28, .06);
    --bd: rgba(20, 18, 28, .12);
    --bd2: rgba(20, 18, 28, .2);
    --text: #1a1822;
    --t2: #4b4858;
    --t3: #7a7688;
    --accent: #6a45f5;
    --grad-brand: linear-gradient(135deg, #6a45f5 0%, #5836e0 100%);
    --grad-full: linear-gradient(120deg, #6a45f5 0%, #7c5cff 100%);
    --grad-spark: linear-gradient(120deg, #6a45f5 0%, #c03571 100%);
    --cvs-card: rgba(255, 255, 255, .94);
    --cvs-shadow: 0 30px 90px rgba(20, 18, 28, .14);
    --cvs-dot: rgba(20, 18, 28, .14);
    --cvs-vignette: rgba(210, 205, 195, .6);
  }
}

/* ── Фон: точечная сетка холста вместо авроры ──────────────────────────────
   Три размытых цветных пятна — самая заметная примета старого языка. Скрываем
   их (не удаляя разметку .bg-aurora со страниц) и заменяем линейную сетку 48px
   на точечную 34px, как в редакторе. Виньетка добавляет холсту глубину. */

.bg-aurora { display: none !important; }

.bg-grid {
  inset: 0;
  background-image: radial-gradient(var(--cvs-dot) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Маска у прежней сетки гасила её ниже первого экрана — на холсте сетка
     ровная по всей странице, поэтому маску снимаем. */
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1;
}

.bg-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 45%, var(--cvs-vignette) 100%);
}

/* ── Типографика ───────────────────────────────────────────────────────────
   Холст набран одним Onest с плотным трекингом и весом 800 — Commissioner
   (--font-display) даёт другой ритм заголовка, поэтому переводим на брендовый. */

.h-display {
  font-family: var(--font-body, Onest), 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
}

/* Эйбрау холста — моноширинная метка без пилюли: рамка и фон спорят с
   карточкой, внутри которой метка обычно и стоит. */
.eyebrow {
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: .11em;
  font-size: 11px;
  color: var(--accent);
}
.eyebrow .sq { background: var(--accent); }

.lead { color: var(--t2); line-height: 1.55; }

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Главная кнопка холста — плоская заливка акцентом, без градиента и цветного
   свечения: свечение тянет взгляд сильнее, чем сам холст. */

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { background: #8f74ff; }
html[data-theme="light"] .btn-primary:hover { background: #5836e0; }

.btn-spark {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  border-color: var(--bd2);
  color: var(--t2);
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }

.chip { font-size: 12.5px; color: var(--t2); }

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

.glass,
.plan, .waitlist,
.work-card, .tpl-card, .works-cta-box, .works-lb-box,
.post, .news, .blog-feat,
.d-card, .d-alert,
.pack, .step,
.tool-card, .doc-hero,
.art-cover,
.stack .stat {
  border-radius: var(--cvs-r);
  background: var(--cvs-card);
  border: 1px solid var(--bd);
  box-shadow: var(--cvs-shadow);
}

/* Наведение: холст приподнимает карточку и подсвечивает границу акцентом,
   без смены фона — фон карточки уже непрозрачный. */
.glass:hover,
.plan:hover,
.work-card:hover, .tpl-card:hover,
.post:hover, .news:hover,
.d-card:hover,
.pack:hover,
.tool-card:hover {
  border-color: var(--accent);
  background: var(--cvs-card);
}

/* Точечная подсветка под курсором (.card-spot) — из прежнего языка, но в
   холсте акцент тот же, поэтому просто переводим цвет. */
.card-spot::before {
  background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 70%);
}

/* ── Подвал ────────────────────────────────────────────────────────────────
   Заголовки колонок — моноширинные метки, как эйбрау холста. */

.r-foot-col h4 {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text);
}