/* css/theme.css
   Переопределения через CSS-переменные (--primary-color и т.д.). Должен подключаться ПОСЛЕДНИМ — иначе изменит каскад.
   Вынесено из style.css без изменения содержимого правил. */

:root {
  /* ===== БАЗОВЫЕ ТОКЕНЫ =====
     Это единственные 5 значений, которые реально редактируются в админке
     ("Настройки стилей" → js/admin/settingsStyleTab.js). Всё остальное ниже —
     производные через color-mix(), поэтому вся тема пересчитывается сама,
     без добавления новых полей в админку под каждый оттенок. */
  --bg-color: #0e0f13;
  --card-bg: #16171d;
  --text-color: #e6e7eb;
  --primary-color: #e94560;
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ===== ПРОИЗВОДНЫЕ ТОКЕНЫ ===== */
  /* Шкала поверхностей: от фона карточек к более "приподнятым" уровням */
  --surface-1: var(--card-bg);
  --surface-2: color-mix(in srgb, var(--card-bg) 80%, white 20%);
  --surface-3: color-mix(in srgb, var(--card-bg) 65%, white 35%);
  --border-color: color-mix(in srgb, var(--card-bg) 55%, white 45%);
  --border-color-strong: color-mix(in srgb, var(--card-bg) 35%, white 65%);

  --text-secondary: color-mix(in srgb, var(--text-color) 65%, transparent);
  --text-muted: color-mix(in srgb, var(--text-color) 40%, transparent);

  --primary-color-hover: color-mix(in srgb, var(--primary-color) 85%, white 15%);
  --primary-color-light: color-mix(in srgb, var(--primary-color) 55%, white 45%);
  --primary-color-muted: color-mix(in srgb, var(--primary-color) 16%, transparent);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
}
.header { background: var(--surface-1); border-bottom: 1px solid var(--border-color); box-shadow: none; }
.logo { color: var(--text-color); }
.cart-widget, .auth-btn, .notifications-btn { background: var(--surface-2); border: 1px solid var(--border-color); }
.cart-widget:hover, .auth-btn:hover, .notifications-btn:hover { background: var(--surface-3); }
.cart-badge { background: var(--primary-color); }
.cart-sum { color: var(--text-color); }
/* Обводка карточки, попытка №3. №1 (outline на .game-card-inner) и №2
   (box-shadow снаружи .game-card) оба сломаны — у box-shadow конкретная
   причина найдена точно: .game-card САМ имеет overflow:hidden (см. базовый
   .game-card в base.css, нужен для обрезки вращающегося конического
   градиента ::before при hover) — а overflow:hidden обрезает СОБСТВЕННЫЙ
   box-shadow элемента, даже если он не inset и рисуется "снаружи" рамки.
   Поэтому обводка №2 была не "перекрыта", а физически невидима во всех
   браузерах.
   Здесь — ::after у .game-card (не .game-card-inner) с border и inset:0:
   лежит СТРОГО внутри границ .game-card (не протыкает наружу — значит не
   попадает под действие overflow:hidden), border-radius:inherit — совпадает
   с .game-card, z-index явно выше .game-card-inner (2 против 1) — гарантированно
   красится поверх .game-card-overlay независимо от паддинга/скругления
   внутренних слоёв. */
.game-card { background: var(--border-color); border-radius: var(--radius-md); }
.game-card:hover { transform: translateY(-2px); }
.game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1.5px solid var(--border-color-strong);
  pointer-events: none;
}
/* .game-card-inner на 4px меньше .game-card с каждой стороны (padding-ring,
   см. base.css) — радиус скругления обязан быть меньше на те же 4px,
   иначе внутренний угол не вписывается в контур внешнего box-shadow-кольца
   и на глаз кажется, будто скругление "само" стало другим/неровным. */
.game-card-inner { border-radius: calc(var(--radius-md) - 4px); }
.product-card { background: var(--surface-1); border-radius: var(--radius-md); }
.product-card:hover { box-shadow: none; border-color: var(--border-color-strong); }
.product-name { color: var(--text-color); }
.btn { background: var(--primary-color); border-radius: var(--radius-sm); }
.btn:hover { background: var(--primary-color-hover); }
.admin-table th { background: var(--surface-2); color: var(--text-secondary); }
.admin-table td { border-bottom: 1px solid var(--border-color); }