/* ============================================
   SIGNAL SCOPE AI — DESIGN SYSTEM TOKENS
   Версия: 1.0.0
   Описание: Единый источник цветов, отступов,
   скруглений и типографики для всего проекта
   ============================================ */

:root {
    /* ─── ФОНОВЫЕ ЦВЕТА ─── */
    --bg-primary: #0d1117;        /* Основной фон страницы */
    --bg-secondary: #161b22;      /* Фон панелей, sidebar */
    --bg-card: #21262d;           /* Фон карточек, модалок */
    --bg-elevated: #1c2128;       /* Elevated элементы (dropdown) */
    --bg-hover: #292e36;          /* Ховер на интерактивных элементах */
    --bg-active: #2d333b;         /* Активное состояние */
    
    /* ─── ГРАНИЦЫ ─── */
    --border-default: #30363d;    /* Стандартная граница */
    --border-muted: #21262d;      /* Мягкая граница */
    --border-accent: #58a6ff;     /* Акцентная граница */
    
    /* ─── ТЕКСТ ─── */
    --text-primary: #e6edf3;      /* Основной текст */
    --text-secondary: #8b949e;    /* Вторичный текст */
    --text-muted: #6e7681;        /* Приглушённый текст */
    --text-link: #58a6ff;         /* Ссылки */
    --text-inverse: #0d1117;      /* Текст на цветном фоне */
    
    /* ─── АКЦЕНТЫ ─── */
    --accent: #58a6ff;            /* Основной акцент (синий) */
    --accent-hover: #388bfd;      /* Ховер акцента */
    --accent-muted: rgba(88, 166, 255, 0.15); /* Фон акцентного бейджа */
    
    /* ─── СЕМАНТИЧЕСКИЕ ЦВЕТА ─── */
    --success: #3fb950;           /* Успех */
    --success-hover: #2ea043;     /* Ховер успеха */
    --success-muted: rgba(63, 185, 80, 0.15);
    
    --danger: #f85149;            /* Ошибка/Опасность */
    --danger-hover: #da3633;      /* Ховер ошибки */
    --danger-muted: rgba(248, 81, 73, 0.15);
    
    --warning: #d29922;           /* Предупреждение */
    --warning-hover: #bb8009;     /* Ховер предупреждения */
    --warning-muted: rgba(210, 153, 34, 0.15);
    
    /* ─── ЦВЕТА ДЛЯ ГРАФИКОВ (Plotly, Chart.js) ─── */
    --chart-success: rgba(63, 185, 80, 0.8);
    --chart-success-fill: rgba(63, 185, 80, 0.1);
    --chart-danger: rgba(248, 81, 73, 0.8);
    --chart-danger-fill: rgba(248, 81, 73, 0.1);
    --chart-warning: rgba(210, 153, 34, 0.8);
    --chart-warning-fill: rgba(210, 153, 34, 0.1);
    --chart-info: rgba(88, 166, 255, 0.8);
    --chart-info-fill: rgba(88, 166, 255, 0.1);
    --chart-neutral: rgba(139, 148, 158, 0.8);
    --chart-neutral-fill: rgba(139, 148, 158, 0.1);
    
    /* ─── СПЕЦИАЛЬНЫЕ ЦВЕТА ─── */
    --teal: #26a69a;              /* Для нейтрального сигнала */
    --teal-muted: rgba(38, 166, 154, 0.15);
    --purple: #d2a8ff;            /* Для AI/ML элементов */
    --purple-muted: rgba(210, 168, 255, 0.15);
    --pink: #f48fb1;              /* Дополнительный */
    --orange: #ffa94d;            /* Дополнительный */
    
    /* ─── СКРУГЛЕНИЯ ─── */
    --radius-sm: 0.25rem;         /* 4px — бейджи, теги */
    --radius-md: 0.5rem;          /* 8px — карточки, кнопки */
    --radius-lg: 0.75rem;         /* 12px — модалки, крупные блоки */
    --radius-full: 9999px;        /* Пилюли, аватары */
    
    /* ─── ОТСТУПЫ ─── */
    --spacing-xs: 0.25rem;        /* 4px */
    --spacing-sm: 0.5rem;         /* 8px */
    --spacing-md: 1rem;           /* 16px */
    --spacing-lg: 1.5rem;         /* 24px */
    --spacing-xl: 2rem;           /* 32px */
    --spacing-2xl: 3rem;          /* 48px */
    
    /* ─── ТЕНИ ─── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    
    /* ─── ПЕРЕХОДЫ ─── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* ─── Z-INDEX ─── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-tooltip: 500;
}