/* ═══════════════════════════════════════════════════════════════════
   Soft Glass v1.12 — визуальный профиль MVP LAB
   ───────────────────────────────────────────────────────────────────
   Изолированный слой. Активируется атрибутом на <html>:
       data-ui-material="soft"   → новый материал
       data-ui-material="legacy" → прежний вид (или атрибута нет)

   Legacy-стили НЕ удаляются: этот файл только добавляет правила,
   ограниченные селектором [data-ui-material="soft"].

   Откат: убрать атрибут (или выставить legacy) — вид вернётся
   к прежнему без перезагрузки данных и без чистки хранилищ.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── Токены профиля ─────────── */

:root[data-ui-material="soft"] {
  /* Тёмная тема — угольно-сине-серая */
  --sg-fill: rgba(19, 28, 43, 0.72);
  --sg-fill-strong: rgba(22, 32, 48, 0.84);
  --sg-tint: rgba(255, 255, 255, 0.055);
  --sg-edge-top: rgba(232, 241, 255, 0.22);
  --sg-edge-side: rgba(209, 222, 242, 0.09);
  --sg-edge-bottom: rgba(190, 206, 228, 0.045);
  --sg-shadow: rgba(0, 5, 15, 0.28);
  --sg-blur: 20px;
  --sg-inset-fill: rgba(255, 255, 255, 0.028);
  --sg-opaque-fallback: #131c2b;
}

/* Светлая тема — молочно-голубая.
   Только при ЯВНОМ маркере светлой темы. Если приложение не сообщает тему,
   считаем её тёмной: так интерфейс не получит светлые панели под светлым текстом. */
:root[data-ui-material="soft"].light-theme,
:root[data-ui-material="soft"][data-theme="light"],
:root[data-ui-material="soft"][data-ui-theme="light"] {
  --sg-fill: rgba(230, 239, 250, 0.78);
  --sg-fill-strong: rgba(240, 246, 253, 0.9);
  --sg-tint: rgba(255, 255, 255, 0.27);
  --sg-edge-top: rgba(255, 255, 255, 0.75);
  --sg-edge-side: rgba(255, 255, 255, 0.32);
  --sg-edge-bottom: rgba(104, 126, 158, 0.1);
  --sg-shadow: rgba(32, 58, 92, 0.13);
  --sg-blur: 20px;
  --sg-inset-fill: rgba(255, 255, 255, 0.42);
  --sg-opaque-fallback: #eaf1fa;
}

/* Тёмная тема явно */
/* Тёмная тема: .dark-theme (MVP LAB), .dark (Tailwind/НЕБО), data-theme */
:root[data-ui-material="soft"].dark-theme,
:root[data-ui-material="soft"].dark,
:root[data-ui-material="soft"][data-theme="dark"],
:root[data-ui-material="soft"][data-ui-theme="dark"] {
  --sg-fill: rgba(19, 28, 43, 0.72);
  --sg-fill-strong: rgba(22, 32, 48, 0.84);
  --sg-tint: rgba(255, 255, 255, 0.055);
  --sg-edge-top: rgba(232, 241, 255, 0.22);
  --sg-edge-side: rgba(209, 222, 242, 0.09);
  --sg-edge-bottom: rgba(190, 206, 228, 0.045);
  --sg-shadow: rgba(0, 5, 15, 0.28);
  --sg-inset-fill: rgba(255, 255, 255, 0.028);
  --sg-opaque-fallback: #131c2b;
}

/* ─────────── Роли материала ─────────── */

/* surface — содержательная карточка */
:root[data-ui-material="soft"] .sg-surface,
:root[data-ui-material="soft"] .game,
:root[data-ui-material="soft"] .work,
:root[data-ui-material="soft"] .project,
:root[data-ui-material="soft"] .card,
:root[data-ui-material="soft"] .case,
:root[data-ui-material="soft"] .panel,
:root[data-ui-material="soft"] .pane,
:root[data-ui-material="soft"] .box,
:root[data-ui-material="soft"] .item,
:root[data-ui-material="soft"] .list-item,
:root[data-ui-material="soft"] .stop,
:root[data-ui-material="soft"] .report,
:root[data-ui-material="soft"] .pair,
:root[data-ui-material="soft"] .block,
:root[data-ui-material="soft"] .glass-card {
  background:
    linear-gradient(145deg, var(--sg-tint), transparent 57%),
    var(--sg-fill);
  border: 1px solid var(--sg-edge-side);
  border-top-color: var(--sg-edge-top);
  border-bottom-color: var(--sg-edge-bottom);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sg-edge-top) 44%, transparent),
    0 16px 38px -28px var(--sg-shadow);
  -webkit-backdrop-filter: blur(var(--sg-blur)) saturate(1.1);
  backdrop-filter: blur(var(--sg-blur)) saturate(1.1);
}

/* surface-raised — плавающая шапка, панель */
:root[data-ui-material="soft"] .topbar__inner,
:root[data-ui-material="soft"] .site-header,
:root[data-ui-material="soft"] .brand-bar,
:root[data-ui-material="soft"] header.site-header,
:root[data-ui-material="soft"] .nav-float,
:root[data-ui-material="soft"] .bottom-nav {
  background:
    linear-gradient(145deg, var(--sg-tint), transparent 60%),
    var(--sg-fill-strong);
  border: 1px solid var(--sg-edge-side);
  border-top-color: var(--sg-edge-top);
  border-bottom-color: var(--sg-edge-bottom);
  /* DESIGN.md 2.2: без декоративных теней. Границу и блик достаточно видно */
  box-shadow: none;
  -webkit-backdrop-filter: blur(calc(var(--sg-blur) + 4px)) saturate(1.12);
  backdrop-filter: blur(calc(var(--sg-blur) + 4px)) saturate(1.12);
}

/* surface-inset — вложенные области и поля.
   Чипы и метки читаются по контрасту: заливка плотнее, чем у поверхностей,
   иначе мелкий текст теряет WCAG AA на светлом участке фона. */
:root[data-ui-material="soft"] .tag,
:root[data-ui-material="soft"] .chip,
:root[data-ui-material="soft"] .badge,
:root[data-ui-material="soft"] .glass-subtle,
:root[data-ui-material="soft"] .glass-field {
  background: color-mix(in srgb, var(--sg-fill) 88%, var(--sg-inset-fill));
  border: 1px solid var(--sg-edge-side);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-edge-top) 26%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  backdrop-filter: blur(10px) saturate(1.06);
}

/* ─────────── Фон: спокойная тональная среда ─────────── */

:root[data-ui-material="soft"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 78% 6%, rgba(120, 158, 210, 0.16), transparent 70%),
    radial-gradient(52% 38% at 10% 30%, rgba(90, 132, 190, 0.13), transparent 72%),
    radial-gradient(66% 46% at 50% 96%, rgba(120, 104, 168, 0.1), transparent 74%);
}

:root[data-ui-material="soft"].light-theme body::before,
:root[data-ui-material="soft"][data-theme="light"] body::before {
  background:
    radial-gradient(58% 42% at 76% 8%, rgba(178, 205, 238, 0.5), transparent 70%),
    radial-gradient(52% 38% at 12% 28%, rgba(198, 220, 244, 0.42), transparent 72%),
    radial-gradient(66% 46% at 50% 96%, rgba(226, 214, 246, 0.3), transparent 74%);
}

:root[data-ui-material="soft"].dark-theme .chip,
:root[data-ui-material="soft"].dark .chip,
:root[data-ui-material="soft"][data-theme="dark"] .chip,
:root[data-ui-material="soft"][data-ui-theme="dark"] .chip,
:root[data-ui-material="soft"].dark-theme .tag,
:root[data-ui-material="soft"].dark .tag,
:root[data-ui-material="soft"][data-theme="dark"] .tag,
:root[data-ui-material="soft"][data-ui-theme="dark"] .tag {
  background: rgba(22, 30, 44, 0.86);
}

:root[data-ui-material="soft"].dark-theme body::before,
:root[data-ui-material="soft"].dark body::before,
:root[data-ui-material="soft"][data-theme="dark"] body::before {
  background:
    radial-gradient(58% 42% at 78% 6%, rgba(120, 158, 210, 0.16), transparent 70%),
    radial-gradient(52% 38% at 10% 30%, rgba(90, 132, 190, 0.13), transparent 72%),
    radial-gradient(66% 46% at 50% 96%, rgba(120, 104, 168, 0.1), transparent 74%);
}

/* ─────────── Контраст: значимый текст не зависит от стекла ─────────── */

:root[data-ui-material="soft"] .game__desc,
:root[data-ui-material="soft"] .game p,
:root[data-ui-material="soft"] .muted-text {
  color: var(--text-muted);
}

/* Основной CTA остаётся непрозрачным — это действие, а не поверхность */
:root[data-ui-material="soft"] .btn-primary,
:root[data-ui-material="soft"] .cta,
:root[data-ui-material="soft"] .btn-accent {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ─────────── Fallback без backdrop-filter ─────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-ui-material="soft"] .sg-surface,
  :root[data-ui-material="soft"] .game,
  :root[data-ui-material="soft"] .work,
  :root[data-ui-material="soft"] .project,
  :root[data-ui-material="soft"] .card,
  :root[data-ui-material="soft"] .case,
  :root[data-ui-material="soft"] .topbar,
  :root[data-ui-material="soft"] .site-header,
  :root[data-ui-material="soft"] .brand-bar,
  :root[data-ui-material="soft"] .nav {
    background: var(--sg-opaque-fallback);
  }
}

/* ─────────── Системные предпочтения ─────────── */

@media (prefers-reduced-transparency: reduce) {
  :root[data-ui-material="soft"] .sg-surface,
  :root[data-ui-material="soft"] .game,
  :root[data-ui-material="soft"] .work,
  :root[data-ui-material="soft"] .project,
  :root[data-ui-material="soft"] .card,
  :root[data-ui-material="soft"] .case,
  :root[data-ui-material="soft"] .topbar,
  :root[data-ui-material="soft"] .site-header,
  :root[data-ui-material="soft"] .brand-bar,
  :root[data-ui-material="soft"] .nav {
    background: var(--sg-opaque-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-ui-material="soft"] * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* SYS-02: обёртки внутри плавающей шапки не получают свой материал —
   иначе перекрывают скругления капсулы. */
:root[data-ui-material="soft"] header .wrap.nav,
:root[data-ui-material="soft"] header .nav {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}