/* ============================================================
   Дизайн-токены. Илья Ливенцев — маркетинг премиальных автосервисов
   Палитра: 5 цветов + нейтрали. Шрифты: Manrope, Inter.
   ============================================================ */

:root {
  /* --- Цвет --- */
  --ink: #10161d;
  --ink-soft: #1b2530;
  --accent: #9c5a21;
  --accent-hover: #7d4517;
  --accent-tint: #f0e4d6;

  --sand: #f8f5f0;
  --mist: #eaeff1;
  --cream: #f4f0ea;
  --white: #ffffff;

  --text: #10161d;
  --text-muted: #5a6674;
  --text-faint: #8b95a1;
  --text-inverse: #f6f4f0;
  --line: rgba(16, 22, 29, 0.1);
  --line-strong: rgba(16, 22, 29, 0.18);

  --success: #2f6b34;
  --error: #a32b2b;

  /* --- Типографика --- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.25rem + 2.2vw, 3.25rem);

  /* --- Отступы (шаг 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Радиусы --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Тени --- */
  --shadow-1: 0 1px 2px rgba(16, 22, 29, 0.05), 0 2px 8px rgba(16, 22, 29, 0.04);
  --shadow-2: 0 2px 6px rgba(16, 22, 29, 0.06), 0 12px 28px rgba(16, 22, 29, 0.08);
  --shadow-3: 0 4px 12px rgba(16, 22, 29, 0.07), 0 24px 56px rgba(16, 22, 29, 0.12);

  /* --- Движение --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Раскладка --- */
  --header-h: 68px;
  --max-w: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

@media (max-width: 760px) {
  :root {
    --header-h: 60px;
  }
}