/* Дизайн-токены (раздел 5 дизайн-ТЗ).
   Значения менять здесь, а не в компонентах. */

:root {
  /* Поверхности */
  --graphite-950: #111820;
  --graphite-800: #17212b;
  --graphite-700: #22303d;
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #eef1f5;

  /* Интерактив */
  --primary-600: #1263d6;
  --primary-700: #0d4faf;
  --primary-050: #e8f0fc;

  /* Статусы */
  --accent-500: #f59e0b;
  --accent-050: #fef4e3;
  --success-600: #18864b;
  --success-050: #e6f4ec;
  --danger-600: #c83b32;
  --danger-050: #fbeceb;

  /* Текст */
  --text-primary: #111827;
  --text-secondary: #667085;
  /* Более тёмный вариант для текста на серых подложках: на --surface-muted
     обычный --text-secondary даёт контраст 4.39 при норме 4.5 (WCAG AA). */
  --text-secondary-on-muted: #5a6575;
  --text-inverse: #ffffff;
  --text-inverse-muted: #b8c3ce;

  /* Границы */
  --border: #d8dee6;
  --border-strong: #b9c3ce;
  --border-inverse: #2b3948;

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

  /* Тени — мягкие и редкие */
  --shadow-sm: 0 1px 2px rgba(17, 24, 32, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 32, 0.08);

  /* Отступы, ритм 8 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Сетка */
  --content-max: 1240px;
  --content-narrow: 760px;
  --gutter: 16px;

  /* Типографика */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  --fs-display: clamp(34px, 4.2vw, 52px);
  --lh-display: 1.12;
  --fs-h1: clamp(34px, 3.6vw, 44px);
  --lh-h1: 1.18;
  --fs-h2: clamp(28px, 2.6vw, 34px);
  --lh-h2: 1.24;
  --fs-h3: clamp(22px, 1.9vw, 26px);
  --lh-h3: 1.3;
  --fs-h4: clamp(18px, 1.4vw, 20px);
  --lh-h4: 1.4;
  --fs-body: 16px;
  --lh-body: 1.55;
  --fs-small: 14px;
  --lh-small: 1.45;

  /* Переходы */
  --transition: 160ms ease;

  /* Минимальная интерактивная область */
  --tap: 44px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}