/* ═══════════════════════════════════════════════════════════
   site-colors.css — единственный источник дизайн-токенов.
   Все переменные определяются здесь и только здесь.
   Не дублировать :root-блоки в других файлах.

   Палитра: бургунди / чёрный / белый.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Основная палитра (тёмная зона) ───────────────────── */
  --bg:          #0E0809;                 /* фон страницы — тёмный с бургунди-намёком */
  --surface:     #2A1A1E;                 /* surface карточек/секций */
  --surface-2:   rgba(107,31,46,.12);     /* burgundy-tinted secondary surface */
  --surface-raised: #3A252B;                /* карточки на фоне surface */
  --border-strong:  rgba(196,107,123,.45);  /* выраженная граница форм/карточек */
  --text:        #F0E8E9;                 /* основной читаемый текст на тёмном */
  --muted:       rgba(240,232,233,.58);   /* приглушённый текст на тёмном */
  --border:      rgba(196,107,123,.28);     /* граница элементов */
  --shadow:      0 12px 30px rgba(0,0,0,.40);

  /* ─── Primary brand — бургунди ──────────────────────────── */
  --primary:     #6B1F2E;
  --primary-600: #4A1520;
  --primary-700: #2E0D14;

  /* ─── Secondary — средний бургунди ────────── */
  --secondary:   #A63750;

  /* ─── Ring / focus ──────────────────────────────────────── */
  --ring:        rgba(107,31,46,.16);

  /* ─── Accent для sold/error ─────────────────────────────── */
  --accent-2:    #C8102E;

  /* ─── Backward-compat алиасы (старый car-page / hero код) ─ */
  --accent:         var(--primary);
  --c-accent:       var(--primary);
  --c-accent-hover: var(--primary-600);
  --c-text:         var(--text);
  --c-bg:           var(--bg);
  --c-muted:        var(--muted);

  /* ─── Layout ────────────────────────────────────────────── */
  --radius:         16px;
  --radius-sm:      12px;
  --radius-card:    16px;
  --radius-chip:    999px;
  --radius-control: 12px;
  --container:      1200px;
  --pad:            16px;

  /* ─── Тени карточек ─────────────────────────────────────── */
  --shadow-card:       0 12px 30px rgba(0,0,0,.28);
  --shadow-card-hover: 0 18px 44px rgba(0,0,0,.40);

  /* ─── Анимации ──────────────────────────────────────────── */
  --anim-fast:    150ms;
  --anim-med:     220ms;
  --anim-slow:    420ms;
  --ease-out:     cubic-bezier(.2,.8,.2,1);
  --ease-spring:  cubic-bezier(.2,1,.2,1);

  /* ─── Pagination tokens (--pagi-*) ──────────────────────── */
  --pagi-accent-rgb: 107, 31, 46;         /* rgb(--primary) */
  --pagi-h:          40px;
  --pagi-gap:        8px;
  --pagi-radius:     14px;
  --pagi-accent:     var(--primary);
  --pagi-bg:         var(--surface);
  --pagi-bg-hover:   rgba(107,31,46,.12);
  --pagi-text:       var(--text);
  --pagi-muted:      var(--muted);
  --pagi-border:     rgba(107,31,46,.28);
  --pagi-shadow:     0 14px 34px rgba(0,0,0,.25);
  --pagi-glow:       0 14px 34px rgba(107,31,46,.22);
  --pagi-ring:       0 0 0 3px rgba(107,31,46,.18);

  /* ─── Inventory page tokens (--cyp-*) — имена сохранены для
           совместимости с существующими компонентами ──────── */
  --cyp-green:     var(--primary);
  --cyp-green-2:   rgba(107,31,46,.16);
  --cyp-text:      var(--text);
  --cyp-muted:     var(--muted);
  --cyp-bg:        var(--bg);
  --cyp-soft:      var(--surface);
  --cyp-border:    rgba(107,31,46,.22);
  --cyp-shadow:    0 12px 30px rgba(0,0,0,.28);
  --cyp-radius:    18px;
  --cyp-radius-sm: 12px;
  --cyp-container: 1160px;
  --cyp-t:         220ms;

  /* ─── Cream zone (светлая пауза между тёмными секциями) ── */
  --surface-cream:   #F7F1EE;
  --surface-cream-2: #EDE3DE;

  /* ─── Gold accent (только на тёмных фонах) ────────────── */
  --gold:     #C9A56A;
  --gold-600: #A8854E;
}

/* Responsive pagination token overrides — только здесь */
@media (max-width: 520px) {
  :root {
    --pagi-h:      36px;
    --pagi-gap:    6px;
    --pagi-radius: 12px;
  }
}