/* ============================================================================
   SCA UI-кит «мягкая глубина» v2 — ЕДИНСТВЕННЫЙ источник истины дизайн-токенов.
   URL: /sca-kit.css. ⚠️ Файл существует в ДВУХ местах: public/sca-kit.css
   (исходник, попадает в vite-сборки) и dist/sca-kit.css (golden master,
   раздаётся прод-сервером) — менять СИНХРОННО.
   Подключают: server-rendered страницы (/gift, /community, /oferta, /privacy,
   /rekvizity, /learn/texts/*), корневой index.html (build:web). Публичный SPA
   (dist/index.html) держит те же значения в <style id="sca-theme-polish-v1/v2">.
   Правило elevation: уровень = токен тени + на dark поверхность на шаг светлее.
   L0 плоские списки (hairline) → L1 карточки (shadow-1+highlight) →
   L2 модалки/меню (shadow-2) → L3 навигация/шторки (shadow-3).
   ========================================================================== */
:root {
  color-scheme: dark;
  /* Акцент (заблокирован на синем) */
  --accent-color: #2b74c9;
  --accent-color-dark: #21619f;
  --accent-text: #7ab8f8;
  --accent-soft: color-mix(in srgb, var(--accent-color) 18%, transparent);
  --accent-border: color-mix(in srgb, var(--accent-color) 38%, transparent);
  /* Нейтрали */
  --sca-page-bg: #07090d;
  --sca-surface: #12151b;
  --sca-surface-2: #191d24;
  --sca-surface-3: #222731;
  --sca-border: rgba(255, 255, 255, 0.08);
  --sca-border-strong: rgba(255, 255, 255, 0.14);
  --sca-text: #f8fafc;
  --sca-muted: #a7b0bf;
  --sca-soft: #7f8898;
  --sca-input-bg: #0d1015;
  --sca-control-bg: #1f242c;
  --sca-danger: #f87171;
  --sca-danger-strong: #ef4444;
  /* Elevation */
  --sca-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.24);
  --sca-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.35);
  --sca-shadow-3: 0 6px 16px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.50);
  --sca-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Радиусы (концентричность: внутренний = внешний − паддинг) */
  --sca-r-card: 24px;
  --sca-r-card-sm: 20px;
  --sca-r-control: 14px;
  --sca-r-pill: 999px;
  /* Моушен */
  --sca-ease: cubic-bezier(0.2, 0, 0, 1);
  --sca-dur-fast: 0.16s;
  --sca-dur: 0.24s;
  --sca-dur-slow: 0.36s;
}
html[data-theme="light"] {
  color-scheme: light;
  --accent-color: #2563eb;
  --accent-color-dark: #1d4ed8;
  --accent-text: #2158cc;
  --sca-page-bg: #f6f8fb;
  --sca-surface: #ffffff;
  --sca-surface-2: #f8fafc;
  --sca-surface-3: #eef2f7;
  --sca-border: #e2e8f0;
  --sca-border-strong: #cbd5e1;
  --sca-text: #0f172a;
  --sca-muted: #475569;
  --sca-soft: #64748b;
  --sca-input-bg: #ffffff;
  --sca-control-bg: #edf2f7;
  --sca-danger: #b91c1c;
  --sca-danger-strong: #dc2626;
  --sca-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sca-shadow-2: 0 2px 4px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.09);
  --sca-shadow-3: 0 8px 20px rgba(16, 24, 40, 0.10), 0 20px 48px rgba(16, 24, 40, 0.16);
  --sca-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Утилиты для server-rendered страниц (SPA их не использует) */
.sca-kit-card {
  background: var(--sca-surface);
  border: 1px solid var(--sca-border);
  border-radius: var(--sca-r-card-sm);
  box-shadow: var(--sca-shadow-1), var(--sca-highlight);
  color: var(--sca-text);
}
.sca-kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--sca-r-control);
  background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sca-shadow-1);
  transition-property: background-color, box-shadow, scale;
  transition-duration: var(--sca-dur-fast);
  transition-timing-function: var(--sca-ease);
}
.sca-kit-btn:active {
  background: var(--accent-color-dark);
  box-shadow: none;
  scale: 0.96;
}
@media (prefers-reduced-motion: reduce) {
  .sca-kit-btn:active { scale: none; }
}