/* ========================================================================= */
/* =================== CSS ПЕРЕМЕННЫЕ - ЦВЕТОВАЯ СИСТЕМА ================= */
/* ========================================================================= */

/* ===================== ЦВЕТОВАЯ СИСТЕМА И ТЕМЫ ========================= */
/* ========================================================================= */

/* ФИРМЕННЫЕ ЦВЕТА */
:root {
	--brand-dark: #2b3137;
	--brand-dark-alt: #24292e;
	--brand-blue: #007AFF;
	--brand-purple: #5856D6;
	--brand-orange: #FF9500;

	/* RGB версии для прозрачности */
	--brand-dark-rgb: 43, 49, 55;
	--brand-blue-rgb: 0, 122, 255;
	--brand-purple-rgb: 88, 86, 214;
	--brand-orange-rgb: 255, 149, 0;
}

/* СВЕТЛАЯ ТЕМА (по умолчанию) */
:root,
:root[data-theme="light"] {
	/* Семантические цвета */
	--color-primary: var(--brand-blue);
	--color-secondary: var(--brand-purple);
	--color-accent: var(--brand-orange);
	--color-success: #34C759;
	--color-error: #FF3B30;
	--color-warning: var(--brand-orange);

	/* Текстовые цвета */
	--text-primary: var(--brand-dark);
	--text-secondary: #3c3c43;
	--text-tertiary: #3c3c4399;
	--text-muted: #8e8e93;
	--text-inverse: #ffffff;

	/* Фоновые цвета */
	--bg-primary: #ffffff;
	--bg-secondary: #f2f2f7;
	--bg-tertiary: #e5e5ea;
	--bg-surface: #ffffff;
	--bg-elevated: #ffffff;

	/* Границы */
	--border-light: #e5e5ea;
	--border-medium: #d1d1d6;
	--border-dark: #c7c7cc;

	/* Готовые градиенты */
	--gradient-dark: linear-gradient(145deg, var(--brand-dark), var(--brand-dark-alt));
	--gradient-light: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.95));
	--gradient-brand: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
	--gradient-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);

	/* Готовые тени */
	--shadow-xs: 0 1px 2px rgba(var(--brand-dark-rgb), 0.05);
	--shadow-sm: 0 2px 4px rgba(var(--brand-dark-rgb), 0.06);
	--shadow-md: 0 4px 12px rgba(var(--brand-dark-rgb), 0.1);
	--shadow-lg: 0 8px 24px rgba(var(--brand-dark-rgb), 0.15);
	--shadow-xl: 0 20px 40px rgba(var(--brand-dark-rgb), 0.2);

	/* Неймофизм тени */
	--shadow-inset-light: inset -2px -2px 4px rgba(var(--brand-dark-rgb), 0.06), inset 2px 2px 4px rgba(255, 255, 255, 1);
	--shadow-inset-pressed: inset 3px 3px 5px rgba(var(--brand-dark-rgb), 0.12), inset -2px -2px 4px rgba(255, 255, 255, 0.9);

	/* Гласморфизм эффекты */
	--glassmorphism: rgba(255, 255, 255, 0.25);
	--glassmorphism-border: rgba(255, 255, 255, 0.18);
	--blur-backdrop: blur(10px);
}

/* ТЕМНАЯ ТЕМА */
:root[data-theme="dark"] {
	/* Семантические цвета для темной темы */
	--color-primary: #0A84FF;
	--color-secondary: #5E5CE6;
	--color-accent: #FF9F0A;
	--color-success: #30D158;
	--color-error: #FF453A;
	--color-warning: #FF9F0A;

	/* Текстовые цвета */
	--text-primary: #ffffff;
	--text-secondary: #ebebf5;
	--text-tertiary: #ebebf599;
	--text-muted: #8e8e93;
	--text-inverse: #000000;

	/* Фоновые цвета */
	--bg-primary: #000000;
	--bg-secondary: #1c1c1e;
	--bg-tertiary: #2c2c2e;
	--bg-surface: #1c1c1e;
	--bg-elevated: #2c2c2e;

	/* Границы */
	--border-light: #38383a;
	--border-medium: #48484a;
	--border-dark: #636366;

	/* Готовые градиенты */
	--gradient-dark: linear-gradient(145deg, #1c1c1e, #000000);
	--gradient-light: linear-gradient(145deg, rgba(28, 28, 30, 0.95), rgba(44, 44, 46, 0.95));
	--gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	--gradient-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);

	/* Готовые тени для темной темы */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.8);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
	--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

	/* Неймофизм тени */
	--shadow-inset-light: inset -2px -2px 4px rgba(0, 0, 0, 0.8), inset 2px 2px 4px rgba(255, 255, 255, 0.02);
	--shadow-inset-pressed: inset 3px 3px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 4px rgba(255, 255, 255, 0.05);

	/* Гласморфизм эффекты */
	--glassmorphism: rgba(28, 28, 30, 0.8);
	--glassmorphism-border: rgba(255, 255, 255, 0.1);
	--blur-backdrop: blur(20px);
}

/* ========================================================================= */
/* ==================== АДАПТИВНЫЕ ПЕРЕМЕННЫЕ ============================ */
/* ========================================================================= */

:root {
	/* РАЗМЕРЫ КНОПОК */
	--nav-button-size: 48px;
	--nav-button-size-mobile: 44px;
	--theme-button-width: 50px;
	--theme-button-height: 28px;
	--theme-button-width-mobile: 46px;
	--theme-button-height-mobile: 26px;
	--chat-button-size: 60px;
	--chat-button-size-mobile: 56px;

	/* Z-INDEX СИСТЕМА */
	--z-base: 1;
	--z-scroll-progress: 10;
	--z-top-header: 1000;
	--z-nav-burger: 1100;
	--z-nav-menu: 1200;
	--z-theme-toggle: 1300;
	--z-chat: 1400;

	/* АНИМАЦИИ */
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--transition-fast: all 0.1s ease;

	/* РАДИУСЫ */
	--radius-small: 6px;
	--radius-medium: 12px;
	--radius-large: 20px;
	--radius-button: 100px;

	/* UI ПОЗИЦИОНИРОВАНИЕ */
	--ui-edge-top: 1.2rem;
	--ui-edge-bottom: 3rem;
	--ui-edge-right: 1.2rem;
	--ui-gap: 0.75rem;
}

/* N8N CHAT ПЕРЕМЕННЫЕ */
:root {
	--chat--color-primary: var(--color-primary);
	--chat--color-white: var(--bg-primary);
	--chat--color-light: var(--bg-secondary);
	--chat--color-dark: var(--text-primary);
	--chat--border-radius: 0.75rem;
	--chat--color-disabled: #777980;
	--chat--spacing: 2rem;
	--chat--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
	--chat--color-white: #1c1c1e;
	--chat--color-light: #2c2c2e;
}

/* АДАПТИВНЫЕ ПЕРЕМЕННЫЕ ПО ЭКРАНАМ */
@media (min-width: 601px) and (max-width: 900px) {
	:root {
		--chat--spacing: 1.5rem;
	}
}

@media (max-width: 600px) {
	:root {
		--chat--spacing: 1.5rem;
	}
}

/* ========================================================================= */