/* =====================================================================
   ATMOS — дизайн-токены
   Все цвета, шрифты и радиусы шаблона лежат здесь.
   Хотите перекрасить сайт — меняйте значения в этом файле.

   Тема задаётся атрибутом на <html>:  data-theme="light" | "dark"
   (его ставит скрипт в head.tpl, переключает кнопка в шапке).
   ===================================================================== */

/* ---------- Шрифты (лежат локально в /fonts, без Google Fonts) ---------- */
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/onest-cyrillic-wght-normal.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/onest-latin-wght-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Tektur';
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url(../fonts/tektur-cyrillic-wght-normal.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Tektur';
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url(../fonts/tektur-latin-wght-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Общее для обеих тем ---------- */
:root {
	--font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-display: 'Tektur', 'Onest', system-ui, sans-serif;

	--radius-xs: 6px;
	--radius-s: 10px;
	--radius-m: 14px;
	--radius-l: 20px;

	--container: 1240px;
	--header-h: 68px;           /* высота шапки на телефонах и планшетах */
	--header-top-h: 62px;       /* верхний ярус шапки на широких экранах */

	/* «HUD-полоса»: шапка и мониторинг серверов. Тёмная в обеих темах —
	   как игровой интерфейс, на котором лежит остальная страница. */
	--hud-bg: #14170f;
	--hud-surface: #1e2219;
	--hud-surface-2: #2a2f23;
	--hud-border: #343b2c;
	--hud-text: #dfe5d3;
	--hud-muted: #99a38b;

	/* Янтарный цвет HUD из CS 1.6 */
	--accent: #ffa31a;
	--accent-hover: #ffb84d;
	--accent-ink: #1e1500;            /* текст на янтарном фоне */

	/* Фон страницы картинкой (по желанию). Пример — в mystyles.css */
	--site-bg-image: none;
	--site-bg-opacity: .12;
}

/* ---------- Светлая тема ---------- */
:root,
:root[data-theme="light"] {
	color-scheme: light;

	--bg: #eaede3;
	--surface: #fbfcf8;
	--surface-2: #f0f3e8;
	--surface-3: #e3e8d8;
	--input-bg: #ffffff;

	--border: #d8ddcb;
	--border-strong: #bcc4aa;

	--text: #3b4233;
	--text-strong: #1a1f14;
	--text-muted: #687159;
	--text-faint: rgba(104, 113, 89, .5);

	--accent-text: #9c5200;           /* янтарный как цвет текста */
	--accent-soft: rgba(255, 163, 26, .16);
	--link: #2460ab;
	--link-hover: #17457f;

	--ok: #4f9a1e;
	--ok-text: #376b12;
	--ok-bg: #e4f2d3;
	--ok-border: #c3deaa;

	--info: #2f7fd6;
	--info-text: #245a96;
	--info-bg: #e0edf9;
	--info-border: #bdd6ee;

	--warn: #d99100;
	--warn-text: #7d5600;
	--warn-bg: #fcefcb;
	--warn-border: #ecd79d;

	--danger: #d6452f;
	--danger-text: #a23322;
	--danger-bg: #fbe3dd;
	--danger-border: #f0c1b7;

	/* сплошные заливки для кнопок и бейджей */
	--ok-solid: #3f7d16;        --on-ok: #ffffff;
	--info-solid: #2468b8;      --on-info: #ffffff;
	--warn-solid: #e3a400;      --on-warn: #1e1500;
	--danger-solid: #c73b26;    --on-danger: #ffffff;

	--tooltip-bg: #1a1f14;
	--tooltip-text: #f1f4e8;

	--shadow-1: 0 1px 2px rgba(40, 48, 26, .06), 0 2px 8px rgba(40, 48, 26, .04);
	--shadow-2: 0 12px 40px rgba(30, 36, 20, .18);
	--overlay: rgba(20, 23, 15, .55);
}

/* ---------- Тёмная тема ---------- */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #191c14;
	--surface: #22261c;
	--surface-2: #2b3024;
	--surface-3: #363c2d;
	--input-bg: #1a1d15;

	--border: #373d2e;
	--border-strong: #4d5541;

	--text: #c3cab6;
	--text-strong: #eef2e4;
	--text-muted: #8f987f;
	--text-faint: rgba(143, 152, 127, .5);

	--accent-text: #ffb340;
	--accent-soft: rgba(255, 163, 26, .14);
	--link: #8dbcf5;
	--link-hover: #b6d4fa;

	--ok: #8fce4a;
	--ok-text: #a9dc70;
	--ok-bg: rgba(143, 206, 74, .13);
	--ok-border: rgba(143, 206, 74, .3);

	--info: #6fb1ff;
	--info-text: #9cc9ff;
	--info-bg: rgba(111, 177, 255, .12);
	--info-border: rgba(111, 177, 255, .3);

	--warn: #f0b429;
	--warn-text: #f5c95c;
	--warn-bg: rgba(240, 180, 41, .12);
	--warn-border: rgba(240, 180, 41, .32);

	--danger: #f0624d;
	--danger-text: #f58d7c;
	--danger-bg: rgba(240, 98, 77, .13);
	--danger-border: rgba(240, 98, 77, .34);

	--ok-solid: #8fce4a;        --on-ok: #10190a;
	--info-solid: #6fb1ff;      --on-info: #06182d;
	--warn-solid: #f0b429;      --on-warn: #1e1500;
	--danger-solid: #cf4532;    --on-danger: #ffffff;

	--tooltip-bg: #3d4433;
	--tooltip-text: #f1f4e8;

	--shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow-2: 0 16px 48px rgba(0, 0, 0, .55);
	--overlay: rgba(8, 10, 5, .72);
}