/* ============================================================
   QCN PRODUCTION — Design System
   Цветовая палитра и токены основаны на визуальном анализе
   приложения ObservTools (наблюдение, НЕ копирование интерфейса).
   ============================================================ */

:root {
  /* ---------- Backgrounds ---------- */
  --bg-primary:    #0A0A0F;   /* самый глубокий фон, шапка, футер */
  --bg-secondary:  #0D0E17;   /* базовый фон страниц */
  --bg-body:       #0f0f1a;   /* фон body */
  --surface:       #12121A;   /* карточки */
  --surface-alt:   #14141d;   /* альтернативная поверхность */
  --surface-2:     #1a1a24;   /* приподнятая поверхность / модалки */
  --surface-hover: #1d1d29;   /* hover-состояние карточек */

  /* ---------- Borders ---------- */
  --border:         #22222E;
  --border-strong:  #33334a;
  --border-hover:   #3a3a44;

  /* ---------- Accent (фирменный фиолетовый) ---------- */
  --accent:          #8B5CF6;
  --accent-light:    #9B6BF2;
  --accent-dark:     #7C3AED;
  --accent-deeper:   #6D28D9;
  --accent-deepest:  #5B21B6;
  --accent-pale:     #A78BFA;
  --accent-paler:    #C4B5FD;
  --accent-gradient: linear-gradient(135deg, var(--accent-light), var(--accent-dark));
  --accent-gradient-vertical: linear-gradient(180deg, var(--accent-light), var(--accent-deeper));

  /* ---------- Secondary accent ---------- */
  --info: #4EA3FF;

  /* ---------- Status ---------- */
  --success: #22C55E;
  --danger:  #ef4444;

  /* ---------- Text ---------- */
  --text-primary:   #EAEAEA;
  --text-secondary: #8A8F9E;
  --text-muted:     #6C7282;
  --text-on-accent: #FFFFFF;

  /* ---------- Glow / Shadow ---------- */
  --glow-accent:      rgba(139, 92, 246, 0.6);
  --glow-accent-soft: rgba(139, 92, 246, 0.35);
  --glow-accent-faint: rgba(139, 92, 246, 0.18);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-button: 0 4px 18px var(--glow-accent-soft);
  --shadow-button-hover: 0 6px 24px var(--glow-accent);

  /* ---------- Typography ---------- */
  --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-round: 50%;

  /* ---------- Spacing scale ---------- */
  --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;
  --space-10: 128px;

  /* ---------- Layout ---------- */
  --container-width: 1240px;
  --header-height: 76px;

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
}

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