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

:root {
  /* ─── Основная палитра ─────────────────────────────────── */
  --bg:          #080c14;                 /* фон страницы — очень тёмный */
  --surface:     #0d1422;                 /* поверхность карточек/секций */
  --surface-2:   rgba(20,40,90,.12);      /* blue-tinted secondary surface */
  --text:        #dde3f2;                 /* основной читаемый текст — светлый */
  --muted:       rgba(200,210,235,.58);   /* приглушённый текст */
  --border:      rgba(20,40,90,.30);      /* граница элементов */
  --shadow:      0 12px 30px rgba(0,0,0,.40);

  /* ─── Primary brand — тёмно-синий ─────────────────────── */
  --primary:     #0b3e90;
  --primary-600: #082e6d;
  --primary-700: #061f4d;

  /* ─── Secondary — насыщенный синий ─────────────────────── */
  --secondary:   #1a5cd8;

  /* ─── Ring / focus ─────────────────────────────────────── */
  --ring:        rgba(20,40,90,.16);

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

  /* ─── 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: 11, 62, 144;       /* rgb(--primary) */
  --pagi-h:          40px;
  --pagi-gap:        8px;
  --pagi-radius:     14px;
  --pagi-accent:     var(--primary);
  --pagi-bg:         var(--surface);
  --pagi-bg-hover:   rgba(20,40,90,.12);
  --pagi-text:       var(--text);
  --pagi-muted:      var(--muted);
  --pagi-border:     rgba(20,40,90,.28);
  --pagi-shadow:     0 14px 34px rgba(0,0,0,.25);
  --pagi-glow:       0 14px 34px rgba(11,62,144,.22);
  --pagi-ring:       0 0 0 3px rgba(11,62,144,.18);

  /* ─── Inventory page tokens (--cyp-*) ──────────────────── */
  --cyp-green:     var(--primary);
  --cyp-green-2:   rgba(20,40,90,.16);
  --cyp-text:      var(--text);
  --cyp-muted:     var(--muted);
  --cyp-bg:        var(--bg);
  --cyp-soft:      var(--surface);
  --cyp-border:    rgba(20,40,90,.22);
  --cyp-shadow:    0 12px 30px rgba(0,0,0,.28);
  --cyp-radius:    18px;
  --cyp-radius-sm: 12px;
  --cyp-container: 1160px;
  --cyp-t:         220ms;
}

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