/* ============================================================
   ДИЗАЙН-СИСТЕМА LIQUID GLASS — ОСНОВА СТРАНИЦЫ
   ------------------------------------------------------------
   Внутри: сброс, html и стеклянное полотно body, точечная сетка
           фона, ambient mesh, плавный скролл, ссылка пропуска
           к контенту.
   Зависит: только от ds/tokens.css.
   Зачем: backdrop-filter проявляется лишь тогда, когда за стеклом
           что-то есть — фон и сетку приносит этот файл.
   Полотно включается двумя способами: классом body.liquid-studio
           (главная) и атрибутом <html data-ui="glass"> (кабинет,
           справочники, публичная страница, вход). Селекторы одной
           специфичности, поэтому порядок между ними не значим.
   Точки перелома: нет.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: var(--ls-bg-canvas);
  color: var(--ls-text-primary);
  font-family: var(--font-native);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body.liquid-studio,
[data-ui="glass"] body {
  background-color: var(--ls-bg-canvas);
  color: var(--ls-text-primary);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ── Ambient Mesh: органическое фоновое свечение ── */

.ls-ambient-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Dotted Grid Canvas: точечная сетка фона для проявления физики стекла ── */

.ls-dotted-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--ls-dot-color) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  background-position: 2px 2px;
  opacity: 0.95;
}

.ls-mesh-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

[data-theme="light"] .ls-mesh-sphere {
  opacity: 0.55;
  mix-blend-mode: normal;
}

.ls-mesh-sphere--primary {
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  top: -10%;
  right: -8%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(240, 243, 250, 0.40) 50%, transparent 75%);
}

[data-theme="dark"] .ls-mesh-sphere--primary {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(180, 195, 225, 0.14) 60%, transparent 100%);
}

.ls-mesh-sphere--secondary {
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  top: 15%;
  left: -8%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(235, 240, 248, 0.30) 55%, transparent 75%);
}

[data-theme="dark"] .ls-mesh-sphere--secondary {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, transparent 70%);
}

.ls-mesh-sphere--lime {
  width: 50vw;
  height: 50vw;
  max-width: 650px;
  max-height: 650px;
  top: 35%;
  right: 10%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, rgba(240, 245, 255, 0.25) 50%, transparent 70%);
}

[data-theme="dark"] .ls-mesh-sphere--lime {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, transparent 70%);
}

.ls-mesh-sphere--mid {
  width: 55vw;
  height: 55vw;
  max-width: 750px;
  max-height: 750px;
  top: 55%;
  left: -5%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.70) 0%, rgba(240, 244, 252, 0.30) 50%, transparent 75%);
}

[data-theme="dark"] .ls-mesh-sphere--mid {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, transparent 70%);
}

.ls-mesh-sphere--calc {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  top: 72%;
  right: -5%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, rgba(235, 242, 250, 0.28) 50%, transparent 75%);
}

[data-theme="dark"] .ls-mesh-sphere--calc {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, transparent 70%);
}

.ls-mesh-sphere--pricing {
  width: 60vw;
  height: 60vw;
  max-width: 850px;
  max-height: 850px;
  top: 88%;
  left: 20%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.70) 0%, rgba(240, 244, 252, 0.25) 50%, transparent 75%);
}

[data-theme="dark"] .ls-mesh-sphere--pricing {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.30) 0%, transparent 70%);
}

/* Ссылка для пропуска к контенту */

.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  background: var(--ls-accent-primary);
  color: var(--ls-white);
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 100000;
  font-weight: 500;
}

.skip-link:focus {
  top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}