/*
 * Тёмная тема. Подключается поверх app.css по cookie `dark` (см. layout.tsx
 * и ThemeToggle.tsx), поэтому здесь только переопределения — общая вёрстка,
 * размеры и шрифты берутся из app.css.
 *
 * Палитра нейтрально-серая, а не сине-серая как раньше:
 *
 *   #141414  фон страницы
 *   #222222  поверхность — карточки, шапка, боковое меню, поля ввода
 *   #363738  границы и разделители
 *   #e1e2e5  основной текст, #fff — заголовки и акценты текста
 *   #9dafbe  приглушённый текст (даты, подписи, неактивные пункты)
 *   #63d6f4  акцент — активный пункт меню, ссылки в тексте, подчёркивания
 *
 * Значения взяты из тёмной темы соседнего проекта редакции: важно, чтобы у
 * сайтов одной команды тёмный режим выглядел одинаково.
 */
:root {
	/* --white-color НЕ трогаем: в app.css он служит и фоном, и цветом текста
	   поверх цветных подложек (кнопки, метки «Эксклюзив»). Подменив его на
	   тёмный, мы бы получили тёмные буквы на тёмном. Поверхности перекрашены
	   ниже поимённо. */
	--white-color: #fff;
	--back-color: #141414;
	/* Брендовый тёмно-синий на чёрном фоне не читается — в тёмной теме роль
	   акцента играет голубой. */
	--dark-color: #63d6f4;
	--text-color: #e1e2e5;
	--light-color: #9dafbe;
	--second-color: rgb(255, 255, 255, .75);
	--menu-color: #e1e2e5;
	/* Рамки — тот же #363738, которым здесь перекрашены все разделители */
	--line-color: #363738;
	--menu-back-color: #63d6f4;
	--menu-hover-color: #8ae2f7;
	--stories-back-color: #222222;
	--story-border-color: #ff0000;
	--progress-back-color: rgb(255, 255, 255, .35);
	--stories-button-back: rgba(0, 0, 0, .25);
	--black-back-back: rgb(255, 255, 255, .08);
	--modal-back-back: rgb(0, 0, 0, .6);
	--footer-text: #e1e2e5;
	--social-back-color: rgb(255, 255, 255, .12);
	--transparent-black: rgb(255, 255, 255, .05);
	--video-hover-color: #ff0000;
}

body {
	background-color: #141414;
	color: #e1e2e5;
}

/* ── Поверхности ─────────────────────────────────────────────────────────── */
.card {
	background-color: #222222;
	border-color: #363738;
	/* Тень от светлой темы на чёрном фоне превращается в грязное пятно. */
	box-shadow: none;
}
/* Сам .header — подложка под обеими полосами шапки, в светлой теме белая.
   Без него между полосами и по краям оставалась белая рамка. */
.header {
	background-color: #141414;
	box-shadow: none;
}
.header_wrap {
	background-color: #222222;
	border-bottom: 3px solid #222222;
}
.header_top { background-color: #141414 }
.sidebar { background-color: #222222 }
.sidebar .menu_bar a { color: #e1e2e5 }
/* Подложка логотипа. Фирменный #002573 из светлой темы на чёрном фоне
   выглядел тусклым, поэтому здесь он на пару тонов светлее — квадрат
   читается, а оттенок остаётся тем же синим. */
.header .logo a { background-color: #0a3a8f }

/* ── Заголовки и текст ───────────────────────────────────────────────────── */
h1, h2, h3, .news_title, .title { color: #fff }
.card .title { border-color: #363738 }
.card .title:after { background-color: #63d6f4 }
.single_item span,
.left_item span,
.time_ago { color: #9dafbe }
/* Подпись автора поверх фото. Брендовый --dark-color в тёмной теме стал
   голубым, и белые буквы на нём не читались (контраст 1.9), а серая плашка
   сливалась с фотографией. Здесь тот же осветлённый синий, что и у логотипа. */
.single_item .img .author strong {
	background-color: #0a3a8f;
	color: #fff;
}

/* ── Меню категорий ──────────────────────────────────────────────────────── */
.header .menu_bar a { color: #e1e2e5 }
.header .menu_bar a:hover {
	color: #63d6f4;
	border-color: #63d6f4;
}
.header .menu_bar a.current:hover,
.header .menu_bar a.current {
	color: #63d6f4;
	border-color: #63d6f4;
}
.app_menu a { color: #e1e2e5 }

/* ── Переключатель языка ─────────────────────────────────────────────────── */
.header_top .app_lang,
.app_tools.app_lang .lang_list { background-color: #222222 }
.app_lang a { color: #9dafbe }
.app_lang a.current {
	background-color: #363738;
	color: #fff;
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn_outline {
	color: #63d6f4;
	border-color: #363738;
	background-color: transparent;
}
.btn_outline:hover {
	background-color: #363738;
	color: #fff;
}

/* ── Поиск ───────────────────────────────────────────────────────────────── */
.app_search {
	background-color: #222222;
	border-color: #363738;
	color: #e1e2e5;
}
.app_search::placeholder { color: #9dafbe }
.app_search:hover,
.app_search:focus { border-color: #63d6f4 }

/* ── Турнирная таблица ───────────────────────────────────────────────────── */
.table_row { border-color: #363738 }
.league_tab .current_league {
	background-color: #222222;
	border-color: #363738;
	color: #e1e2e5;
}
.league_tab:hover .current_league {
	color: #63d6f4;
	border-color: #63d6f4;
}
.league_tab.open .current_league path { stroke: #63d6f4 }
/* Селектор с .league_tab обязателен: в app.css выпадающий список описан именно
   так, и правило по одному классу проигрывало ему по специфичности — список
   оставался белым. */
.league_tab .league_list {
	background-color: #222222;
	border-color: #363738;
}
.btn_league { color: #e1e2e5 }
.btn_league.current { color: #63d6f4 }

/* ── Текст статьи ────────────────────────────────────────────────────────── */
/* !important здесь вынужденно: редакция годами вставляла материалы из Word
   и других редакторов, и в самом HTML статей сидят инлайновые цвета вида
   style="color:#000" — без перебивки такой абзац остаётся чёрным на чёрном. */
.news_content span,
.news_content strong,
.news_content p,
.news_content h1,
.news_content h2,
.news_content h3,
.news_content h4,
.news_content h5,
.news_content a,
.news_content li {
	background-color: transparent !important;
	color: #e1e2e5 !important;
}
.news_content a *,
.news_content a { color: #63d6f4 !important }
.news_content blockquote { border-color: #363738 }
.news_authors a { color: #9dafbe }

/* ── Подвал ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid #363738 }
.footer_menu a { color: #e1e2e5 }
.contact_text h3 { color: #fff }
.footer_wrap .social_bar a { background-color: rgb(255, 255, 255, .12) }
.header_wrap .social_bar a { background-color: #363738 }

/* ── Пагинация ───────────────────────────────────────────────────────────── */
.page-link { color: #e1e2e5 }
/* Текущая и наведённая страницы в светлой теме выделяются светло-серым
   кружком (#f3f5f7) — на тёмном фоне он превращался в белое пятно. */
.page-link:hover,
.page-item.active .page-link {
	background-color: #363738;
	color: #63d6f4;
}

/* ── Модалки ─────────────────────────────────────────────────────────────── */
.modal_back { background-color: rgb(0, 0, 0, .6) }
.modal_back .card { background-color: #222222 }

/* ── Иконки ──────────────────────────────────────────────────────────────── */
/* Тёмные SVG со светлой темы на чёрном фоне сливаются — у этих иконок в
   наследии старого сайта есть светлые двойники. */
.ic_burger { background-image: url(/static/images/icons/ic_burger_light.svg) }
.ic_microphone { background-image: url(/static/images/icons/ic_microphone_light.svg) }
.ic_video { background-image: url(/static/images/icons/ic_video_light.svg) }