/* ============================================================
   DESIGN SYSTEM — CSS Custom Properties
   K1Авто · Коллекционные автомобили
   ============================================================ */

:root {

  /* ── Цвета ──────────────────────────────────────────────── */
  --color-bg:           #FAFAFA;
  --color-white:        #FFFFFF;
  --color-black:        #0F0F0F;

  --color-green:        #2D5F4D;
  --color-green-dark:   #234A3C;
  --color-logo:         #1F4739;

  --color-text:         #1A1A1A;
  --color-text-muted:   #6B6B6B;
  --color-text-faint:   rgba(107, 107, 107, 0.60);

  --color-border:       #E5E5E5;
  --color-border-faint: rgba(229, 229, 229, 0.50);

  --color-icon-bg:      #F0F2F1;
  --color-danger:       #D32F2F;
  --color-danger-bg:    #FFF5F5;
  --color-danger-border:#FFCDD2;

  /* ── Типографика ────────────────────────────────────────── */
  --font:               'Manrope', sans-serif;
  --font-weight:        400;

  /* Размеры шрифта */
  --text-10:  10px;
  --text-11:  11px;
  --text-13:  13px;
  --text-14:  14px;
  --text-15:  15px;
  --text-18:  18px;
  --text-20:  20px;
  --text-22:  22px;
  --text-24:  24px;
  --text-30:  30px;
  --text-36:  36px;
  --text-37:  37px;
  --text-42:  42px;
  --text-48:  48px;
  --text-60:  60px;

  /* Letter-spacing */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;
  --ls-wider:    0.12em;
  --ls-widest:   0.25em;

  /* Line-height */
  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-base:    1.4;
  --lh-relaxed: 1.625;

  /* ── Отступы ────────────────────────────────────────────── */
  --gap-1:   4px;
  --gap-2:   8px;
  --gap-2h: 10px;
  --gap-3:  12px;
  --gap-4:  16px;
  --gap-5:  20px;
  --gap-6:  24px;
  --gap-7:  28px;
  --gap-8:  32px;
  --gap-9:  36px;
  --gap-10: 40px;
  --gap-12: 48px;
  --gap-14: 56px;
  --gap-16: 64px;
  --gap-24: 96px;

  /* ── Адаптивные отступы контейнера ─────────────────────── */
  --px: 16px;

  /* ── Максимальная ширина контейнеров ────────────────────── */
  --container:      1440px;
  --container-mid:  1140px;
  --container-sm:   1000px;

  /* ── Высота шапки ───────────────────────────────────────── */
  --header-h:    64px;

  /* ── Скругления ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ── Тени ───────────────────────────────────────────────── */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card-hv: 0 6px 20px rgba(0, 0, 0, 0.09);
  --shadow-btn:     0 4px 16px rgba(45, 95, 77, 0.20);
  --shadow-btn-hv:  0 8px 24px rgba(45, 95, 77, 0.30);
  --shadow-panel:   0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-form:    0 12px 40px rgba(0, 0, 0, 0.04);

  /* ── Переходы ───────────────────────────────────────────── */
  --ease:     all 0.3s ease;
  --ease-slow: all 0.7s ease-out;
}

/* ── Медиа-переменные шапки ─────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --px:       24px;
    --header-h: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --px:       32px;
    --header-h: 96px;
  }
}