/* =====================================================================
 * ВидеоСоздавAI — ЕДИНЫЙ дизайн-слой (theme.css)
 * ---------------------------------------------------------------------
 * Один источник истины для базовой типографики, системы иконок (Lucide)
 * и общих визуальных примитивов. Подключать на каждой странице:
 *
 *   <link rel="stylesheet" href="assets/theme.css?v=20260616-design-1"/>
 *
 * Цвета/шрифты/радиусы как Tailwind-токены живут в assets/tailwind-config.js.
 * Здесь — то, что Tailwind-утилитами не выразить (градиенты, свечения, иконки).
 *
 * NB: инлайновые <style> на страницах идут в <head> ПОСЛЕ этого файла и
 * перекрывают его — поэтому подключение безопасно (не ломает текущий вид).
 * Сведение разъехавшихся компонентов сюда — отдельный проход.
 * ===================================================================== */

/* ───────── Базовая типографика (бренд: Space Grotesk + Manrope) ───────── */
:root {
  --vs-font-headline: "Space Grotesk", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --vs-font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --vs-primary: #b89fff;
  --vs-secondary: #5ddcff;
  --vs-bg: #0e0e10;
}
html { font-family: var(--vs-font-body); }
.font-headline, h1, h2, h3, .font-display { font-family: var(--vs-font-headline); }

/* ───────── Система иконок: Lucide (SVG) ───────── */
/* Иконки в разметке: <i data-lucide="zap"></i> — JS (icons.js) заменит на <svg>. */
.lucide,
svg.lucide {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}
/* Пока иконка не отрисована — не показываем «сырой» <i> с текстом */
i[data-lucide] { display: inline-block; width: 1.5rem; height: 1.5rem; }

/* Анимация для иконок-лоадеров (loader-circle / loader) */
@keyframes vs-icon-spin { to { transform: rotate(360deg); } }
.icon-spin { animation: vs-icon-spin 1s linear infinite; }

/* Совместимость: если где-то остался старый Material Symbols — не ломаем */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ───────── Общие визуальные примитивы (канонические значения) ───────── */
.hero-gradient-text {
  background: linear-gradient(135deg, #c4adff 0%, #5ddcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.primary-cta-gradient {
  background: linear-gradient(135deg, #8c5fff 0%, #b89fff 100%);
}
.glow-shadow {
  box-shadow: 0px 20px 48px -14px rgba(184, 159, 255, 0.18);
}
.ambient-glow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 28% 18%, rgba(184, 159, 255, 0.10) 0%, rgba(0, 0, 0, 0) 32%),
    radial-gradient(circle at 80% 76%, rgba(0, 207, 252, 0.07) 0%, rgba(0, 0, 0, 0) 28%),
    radial-gradient(circle at 50% 50%, rgba(184, 159, 255, 0.04) 0%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
