/* ===========================================================
   tokens.css — единственный источник правды по стилю сайта.
   Компоненты (style.css) потребляют только эти переменные —
   без сырых hex и произвольных px-отступов.
   =========================================================== */

:root {
  /* ---------- Шрифты ---------- */
  --font-sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---------- Типографическая шкала (5 размеров) ---------- */
  --text-xs: 12px;   /* мета-текст, подписи полей */
  --text-sm: 14px;   /* основной UI-текст, кнопки */
  --text-md: 16px;   /* акцентный UI-текст */
  --text-lg: 22px;   /* заголовки карточек */
  --text-xl: 34px;   /* крупные HUD/оверлей-заголовки */

  /* ---------- 8pt spacing-шкала ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* ---------- Нейтральный (фон/поверхности/текст) — HSL ---------- */
  --neutral-950: hsl(220 25% 3%);    /* фон страницы */
  --neutral-900: hsl(228 14% 6%);    /* глубокая поверхность (инпуты) */
  --neutral-850: hsl(225 16% 9%);    /* карточка/панель */
  --neutral-800: hsl(228 13% 13%);   /* приподнятая поверхность (кнопки) */
  --neutral-750: hsl(226 15% 17%);   /* приподнятая поверхность hover */
  --neutral-700: hsl(225 12% 18%);   /* граница */
  --neutral-600: hsl(228 10% 25%);   /* пунктирная граница */
  --neutral-400: hsl(228 8% 60%);    /* приглушённый текст (контраст 4.5:1+ на neutral-850) */
  --neutral-300: hsl(228 10% 68%);   /* вторичный текст */
  --neutral-200: hsl(225 20% 82%);   /* второстепенный основной текст */
  --neutral-100: hsl(0 0% 91%);      /* основной текст */
  --neutral-0: hsl(0 0% 100%);       /* белый */

  /* ---------- Primary: синий (интерактив, ссылки, фокус, выбор) ---------- */
  --primary-700: hsl(226 78% 52%);
  --primary-500: hsl(219 100% 66%);
  --primary-300: hsl(219 100% 80%);
  --primary-surface: hsl(226 50% 19%); /* фон выбранного состояния */

  /* ---------- Accent: голубой (вторичные акценты, лазер/щит) ---------- */
  --accent-700: hsl(198 55% 40%);
  --accent-500: hsl(195 100% 65%);
  --accent-200: hsl(198 100% 88%);
  --accent-surface: hsl(198 60% 14%);

  /* ---------- Семантика статуса (не декор!) ---------- */
  --success-700: hsl(146 55% 38%);
  --success-500: hsl(142 60% 55%);
  --success-300: hsl(142 100% 68%);

  --error-500: hsl(0 100% 68%);
  --error-300: hsl(0 100% 78%);

  --warning-500: hsl(43 100% 65%);
  --warning-300: hsl(33 100% 84%);

  /* ---------- Радиусы (согласованы с 8pt-шкалой) ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Тень/оверлей ---------- */
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.6);
  --overlay-scrim: rgba(6, 7, 10, 0.55);
}