/* public/css/theme.css — Цветовая тема и переменные */

/* ============================================================
   ТЁМНАЯ ТЕМА (стиль Nginx UI)
   ============================================================ */

:root {
    /* ===== ФОНЫ ===== */
    --bg-primary: #0f1419;          /* самый тёмный — body */
    --bg-secondary: #1a1f2e;        /* панели, sidebar */
    --bg-tertiary: #242938;         /* карточки, input */
    --bg-hover: #2a3042;            /* hover на элементах */
    --bg-active: #2d3548;           /* активный элемент */
    --bg-header: #151a24;           /* хедер */
    
    /* ===== ГРАНИЦЫ ===== */
    --border: #2a3042;              /* основная граница */
    --border-light: #1f2433;        /* тонкая граница */
    --border-focus: #3b82f6;        /* граница при фокусе */
    
    /* ===== ТЕКСТ ===== */
    --text-primary: #e5e7eb;        /* основной текст */
    --text-secondary: #9ca3af;      /* второстепенный */
    --text-muted: #6b7280;          /* приглушённый */
    --text-inverse: #0f1419;        /* текст на светлом фоне */
    
    /* ===== АКЦЕНТЫ (СИНИЙ) ===== */
    --accent: #3b82f6;              /* основной синий */
    --accent-hover: #2563eb;        /* hover */
    --accent-active: #1d4ed8;       /* active */
    --accent-bg: rgba(59, 130, 246, 0.1);  /* фон с прозрачностью */
    --accent-border: rgba(59, 130, 246, 0.3);
    
    /* ===== СТАТУСЫ ===== */
    --success: #10b981;             /* зелёный — успех */
    --success-bg: rgba(16, 185, 129, 0.1);
    
    --warning: #f59e0b;             /* жёлтый — предупреждение */
    --warning-bg: rgba(245, 158, 11, 0.1);
    
    --danger: #ef4444;              /* красный — ошибка */
    --danger-bg: rgba(239, 68, 68, 0.1);
    
    --info: #06b6d4;                /* голубой — инфо */
    --info-bg: rgba(6, 182, 212, 0.1);
    
    --purple: #8b5cf6;              /* фиолетовый — акцент 2 */
    --purple-hover: #7c3aed;        /* фиолетовый — hover (темнее на шаг) */
    --purple-bg: rgba(139, 92, 246, 0.1);
    
    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
    
    /* ===== РАЗМЕРЫ ===== */
    --header-height: 64px;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --footer-height: 40px;
    
    /* ===== ОТСТУПЫ ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* ===== РАДИУСЫ ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ===== ШРИФТЫ ===== */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
    
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    
    /* ===== ПЕРЕХОДЫ ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ============================================================
   БАЗОВЫЕ СТИЛИ
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
}

/* ============================================================
   СКРОЛЛБАР
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* ============================================================
   ТИПОГРАФИЯ
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }
.text-accent { color: var(--accent); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 600; }

.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* ============================================================
   ВЫДЕЛЕНИЕ ТЕКСТА
   ============================================================ */

::selection {
    background: var(--accent);
    color: white;
}

/* ============================================================
   ФОКУС
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}