/* =========== Цветовая схема сайта =========== */

:root {
	/* Основной цвет */
	--primary-color: #6673D6;
	--primary-color-light: #A7AFEB;
	--primary-color-dark: #212E8B;
	--primary-color-medium: #6269A1;
	--primary-color-lighter: #8E99EB;

	/* Вторичный цвет A */
	--secondary-a-color: #8B61D5;
	--secondary-a-color-light: #BEA4EA;
	--secondary-a-color-dark: #471F8B;
	--secondary-a-color-medium: #765EA0;
	--secondary-a-color-lighter: #AD8AEA;

	/* Вторичный цвет B */
	--secondary-b-color: #58A8CF;
	--secondary-b-color-light: #9ECFE7;
	--secondary-b-color-dark: #1D6486;
	--secondary-b-color-medium: #58859B;
	--secondary-b-color-lighter: #84C6E7;

	/* Дополнительный цвет */
	--accent-color: #FFD465;
	--accent-color-light: #FFE8AA;
	--accent-color-dark: #A68121;
	--accent-color-medium: #BFA769;
	--accent-color-lighter: #FFDF8C;

	/* Нейтральные цвета */
	--text-color: #333;
	--text-light: #666;
	--text-lighter: #999;
	--bg-color: #fff;
	--bg-light: #f8f9fa;
	--border-color: #e9ecef;
	--border-light: #ddd;
}

/* Основной цвет в элементах */
a {
	color: var(--primary-color);
}

a:hover {
	color: var(--primary-color-medium);
}

/* Заголовки */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	color: var(--primary-color-dark);
}

/* Кнопки */
.btn {
	background: var(--primary-color);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn:hover {
	background: var(--primary-color-dark);
	text-decoration: none;
}

.btn_border {
	background: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

.btn_border:hover {
	background: var(--primary-color);
	color: #fff;
}

/* Акцентные кнопки */
.btn-accent {
	background: var(--accent-color);
	color: var(--primary-color-dark);
}

.btn-accent:hover {
	background: var(--accent-color-medium);
	color: var(--primary-color-dark);
}

/* Навигационные элементы */
.navigation a {
	color: var(--primary-color);
}

.navigation a:hover,
.navigation a.active {
	color: var(--primary-color-dark);
	background: var(--bg-light);
	border-left-color: var(--primary-color);
}

/* Выделение активных элементов */
.active,
[active] {
	color: var(--primary-color-dark);
	border-color: var(--primary-color);
}

/* Входная форма */
input:focus,
textarea:focus,
select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(102, 115, 214, 0.1);
}

/* Заголовки виджетов */
.widget-title {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-color-medium));
	color: #fff;
}

/* Фон блоков */
.block,
.story,
.comment,
.widget {
	border-color: var(--border-color);
	background: var(--bg-color);
}

/* Линии и разделители */
hr {
	border-color: var(--border-color);
}

/* Цветные блоки */
.info-box {
	background: rgba(102, 115, 214, 0.1);
	border-left: 4px solid var(--primary-color);
	padding: 15px;
	border-radius: 4px;
}

.success-box {
	background: rgba(39, 174, 96, 0.1);
	border-left: 4px solid #27ae60;
	color: #27ae60;
}

.error-box {
	background: rgba(255, 72, 91, 0.1);
	border-left: 4px solid #ff485b;
	color: #ff485b;
}

.warning-box {
	background: rgba(255, 212, 101, 0.1);
	border-left: 4px solid var(--accent-color);
	color: var(--primary-color-dark);
}

/* Оформление тегов */
.tag {
	background: linear-gradient(135deg, var(--secondary-b-color), var(--secondary-b-color-light));
	color: #fff;
	padding: 4px 10px;
	border-radius: 20px;
	display: inline-block;
	font-size: 0.85rem;
	margin: 2px;
	transition: all 0.3s ease;
}

.tag:hover {
	background: linear-gradient(135deg, var(--secondary-b-color-dark), var(--secondary-b-color));
	text-decoration: none;
	transform: translateY(-2px);
}

/* Рейтинги и звезды */
.rating {
	color: var(--accent-color);
}

.star-empty {
	color: var(--border-light);
}

.star-full {
	color: var(--accent-color);
}

/* Меню */
.menu a {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.menu a:hover {
	color: var(--primary-color-dark);
	background: rgba(102, 115, 214, 0.05);
}

/* Пагинация */
.pagination a,
.pagination span {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.pagination a:hover,
.pagination .current {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

/* Переходы и анимации */
* {
	--transition-speed: 0.3s;
}

a, button, input, textarea, select {
	transition: all var(--transition-speed) ease;
}