/* ==========================================================================
   tokens.css — ДИЗАЙН-ТОКЕНЫ (переменные темы)
   Здесь только переменные: цвета, шрифты, размеры, радиусы, тени, отступы.
   Меняя значения здесь, вы меняете тему всего сайта.
   ========================================================================== */

:root{
  /* ----- Цвета ----- */
  --color-bg: #0f1b33;                   /* Фон страницы */
  --color-fg: #ffffff;                   /* Основной цвет текста */
  --color-fg-muted: rgba(255,255,255,.8);/* Ослабленный текст */
  --color-fg-dim: rgba(255,255,255,.7);  /* Ещё слабее */
  --color-accent: #4a9eff;               /* Акцент (кнопки, ссылки, заголовки) */
  --color-accent-2: #00d4ff;             /* Второй акцент для градиентов */
  --color-surface: rgba(255,255,255,.05);/* Полупрозрачные карточки/плитки */
  --color-surface-2: rgba(30,30,47,.8);  /* Тёмные поля/инпуты */
  --color-border: rgba(74,158,255,.2);   /* Граница карточек/таблиц */
  --color-border-subtle: rgba(74,158,255,.1);
  --color-footer: rgba(12,12,12,.95);
  --color-error: #ff6b6b;
  --color-success: #51cf66;

  /* ----- Радиусы и тени ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.3);

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

  /* ----- Размеры и отступы ----- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --container-max: 1400px; /* Ширина контентного контейнера */

  /* ----- Прочее ----- */
  --header-blur: 20px;                   /* Blur шапки */
  --surface-blur: 20px;                  /* Blur карточек */

  --content-max-width: 2200px;
}