/* ═══════════════════════════════════════════════════════════════════════════
   SURFACES — единая база «поверхностей» сайта poligrav.ru
   ─────────────────────────────────────────────────────────────────────────
   Заменяет «стеклянные» блоки (backdrop-filter: blur … saturate …) плотным
   фоном ТОГО ЖЕ цвета. Причина: постоянный backdrop-filter заставляет браузер
   перерастеризовывать область размытия на КАЖДОМ кадре скролла и любой
   анимации на странице → скролл главной падал с 40 до 22 кадров, ховеры
   карточек — с 22 до 14. Плотный фон слоя не создаёт и выглядит так же:
   на светлых секциях сайта белое стекло .32–.55 и так даёт почти белый цвет
   (подтверждено сэмплом реального рендера — #fbfcfd).

   ПЕРЕИСПОЛЬЗОВАНИЕ: все стеклянные блоки ссылаются на эти переменные —
   единый источник цвета. Новую «карточку-поверхность» верстай классом
   .u-surface / .u-surface-strong / .u-surface-dark, не выдумывай свой фон.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Светлые поверхности (карточки, бейджи, панели на светлом фоне) */
  --surface:            #fbfcfd;                          /* было rgba(255,255,255,.32–.45)+blur */
  --surface-strong:     #f3f7fb;                          /* крупные панели/матрицы (.55) — чуть плотнее, чтобы отделяться от белого фона */
  --surface-border:     1px solid rgba(209,219,228,.55);
  --surface-radius:     16px;

  /* Тёмные поверхности (тост, cookie-виджет, док кнопок) */
  --surface-dark:       linear-gradient(180deg,#1d1e28,#16171f); /* было rgba(20,20,30,.85)+blur(28) */
  --surface-dark-border: 1px solid rgba(255,255,255,.08);
}

/* Утилити-классы — для НОВОГО кода. Существующие блоки переведены на
   переменные точечно в своих файлах (add/ruchki/plq/order/sticky-dock). */
.u-surface{
  background: var(--surface);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
}
.u-surface-strong{
  background: var(--surface-strong);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
}
.u-surface-dark{
  background: var(--surface-dark);
  border: var(--surface-dark-border);
  border-radius: var(--surface-radius);
  color: #fff;
}