/*
 * tokens.css — единственное место с литеральными значениями.
 *
 * При клонировании MASTER на мини-сайт меняется этот файл, а не вёрстка
 * (CLAUDE.md §11). В остальных таблицах стилей литералов быть не должно —
 * проверяется на приёмке:
 *   grep -E '#[0-9a-fA-F]{3,6}|rgba?\(' assets/css/ вне tokens.css пуст.
 *
 * Значения сняты с действующего сайта napitki133.ru через computed styles,
 * а не подобраны на глаз.
 *
 * ВАЖНО про тёмное оформление: на старом сайте темноту даёт плагин
 * wp-dark-mode, который проекту запрещён (CLAUDE.md §12). Поэтому цвета
 * ниже — это снятый результат его работы, воспроизведённый нативно.
 * Переключателя светлой темы нет и не будет.
 */

:root {
	/* ---------------------------------------------------------------
	 * Цвет
	 * --------------------------------------------------------------- */

	/* Фон страницы. Снято: rgb(29, 31, 39). */
	--nn-color-bg: #1d1f27;

	/* Приподнятые поверхности: карточки, подвал, выпадающие панели.
	   Снято с подвала: rgb(36, 38, 51). */
	--nn-color-surface: #242633;

	/* Поверхность второго уровня: подложка изображения в карточке,
	   блоки кода. Снято с карточки: rgb(34, 36, 47). */
	--nn-color-surface-2: #22242f;

	/* Основной текст. Снято: rgb(207, 216, 221). */
	--nn-color-text: #cfd8dd;

	/* Второстепенный текст: даты, счётчики, анонсы в карточках.
	   Снято с карточки действующего сайта: rgb(133, 161, 187). */
	--nn-color-text-muted: #85a1bb;

	/* Текст подвала — светлее основного. Снято: rgb(244, 243, 238).
	   Тот же цвет у названия сайта в шапке. */
	--nn-color-footer-text: #f4f3ee;

	/*
	 * Фон подвала — тёплый почти чёрный, снят с макета заказчика
	 * (#080b0b в колонках, #1d1812 в нижней полосе, берём среднее).
	 * Он намеренно темнее и теплее страницы: гравюры на нём читаются,
	 * а на общем сине-сером #242633 бледнеют до серой каши — проверено
	 * подстановкой. Отделённый тоном подвал есть и в самом макете.
	 */
	--nn-color-footer-bg: #100e0c;

	/*
	 * Цвета текста подвала. Отдельные от --nn-color-footer-text: тот,
	 * несмотря на имя, используется и в шапке, и на главной, и менять
	 * его ради подвала нельзя.
	 *
	 * Значения сняты с макета по обводке знака (90-й процентиль яркости
	 * в области текста, а не среднее — среднее занижают сглаженные края).
	 * Белого в макете нет вовсе: основной текст тёплый кремовый,
	 * второстепенный глуше и теплее. Прежний #f4f3ee на почти чёрном
	 * фоне давал резкий холодный контраст.
	 */
	--nn-color-footer-body: #cec6b2;
	--nn-color-footer-dim: #ab9f8a;
	--nn-color-footer-accent: #dcb682;

	/* Подпись под названием сайта. Снято: rgb(234, 231, 75). */
	--nn-color-tagline: #eae74b;

	/*
	 * Тёплый маркер: указатель вложенности в меню и подчёркивание
	 * активного пункта. Снято: rgb(236, 105, 45) и rgb(190, 73, 21).
	 * В исходной теме это оранжевый #ff4e00, приглушённый плагином
	 * тёмной темы; здесь записан результат, который видит посетитель.
	 */
	--nn-color-marker: #ec692d;
	--nn-color-marker-dim: #be4915;

	/* Разделитель под меню. Снято: rgb(50, 53, 74). */
	--nn-color-border-nav: #32354a;

	/* Разделитель в подвале. Снято: rgba(89, 129, 168, 0.1). */
	--nn-color-border-footer: rgba(89, 129, 168, 0.1);

	/* Акцент: ссылки и активные пункты меню. Снято: rgb(4, 226, 255). */
	--nn-color-accent: #04e2ff;
	--nn-color-accent-hover: #6beeff;

	/*
	 * Акцент для кнопок действия. Снято с действующего сайта:
	 * rgb(46, 137, 255).
	 *
	 * ВНИМАНИЕ: со светлым текстом контраст 3.27:1 — ниже минимальных
	 * 4.5:1 по WCAG AA, надпись на кнопке читается плохо. Затемнённый
	 * вариант #256ecc даёт 4.80:1.
	 *
	 * Оставлен исходный цвет по решению заказчика: дизайн должен
	 * полностью соответствовать действующему сайту. Замечание
	 * зафиксировано в docs/handoff-report.md.
	 */
	--nn-color-action: #2e89ff;
	--nn-color-action-hover: #57a3ff;
	--nn-color-action-text: #f8fafc;

	/* Границы и разделители. */
	--nn-color-border: #3a3d4d;
	--nn-color-border-strong: #4f5366;

	/* Состояния. */
	--nn-color-danger: #ff5c5c;
	--nn-color-danger-bg: #3a2226;
	--nn-color-success: #3ddc84;
	--nn-color-success-bg: #1d3329;
	--nn-color-warning: #ff9800;
	--nn-color-warning-bg: #3a2f1c;

	/* Поле ввода. Снято: фон rgb(69, 66, 95). */
	--nn-color-field-bg: #45425f;
	--nn-color-field-text: #ffffff;
	/* Светлая рамка поля на тёмной подложке — как на действующем сайте. */
	--nn-color-field-border: #f0f0f0;
	--nn-color-field-placeholder: #a0a0b5;

	/* Кольцо фокуса. Обязано быть заметным на тёмном фоне. */
	--nn-color-focus: #ffd54f;

	/* ---------------------------------------------------------------
	 * Золотая палитра плиток разделов
	 *
	 * Отдельная семья, а не примесь к основным цветам: так оформлены
	 * только плитки, остальной сайт остаётся в сине-бирюзовой гамме.
	 * Значения сняты с макета заказчика; если он пришлёт исходник,
	 * правятся здесь и нигде больше.
	 * --------------------------------------------------------------- */

	--nn-color-tile-bg: #17151b;
	--nn-color-tile-title: #e9cd93;
	--nn-color-tile-text: #d7d5d1;
	--nn-color-gold: #c39a51;
	--nn-color-gold-bright: #f3e3b0;
	--nn-color-gold-deep: #8a6a2c;
	--nn-color-gold-dim: rgba(195, 154, 81, 0.45);
	--nn-color-on-gold: #2a1f0c;

	/*
	 * Подсветка плитки под курсором. На «Аркане» золотое свечение
	 * у карточки постоянное и внутреннее; заказчик попросил делать
	 * его при наведении, поэтому здесь оно снаружи и заметнее —
	 * иначе на тёмном фоне разницы не видно.
	 */
	--nn-glow-gold: 0 0 0 1px rgba(195, 154, 81, 0.55), 0 10px 34px rgba(195, 154, 81, 0.22);

	/* Рамка и кнопка: один и тот же перелив, заданный один раз. */
	--nn-gradient-gold: linear-gradient(
		135deg,
		var(--nn-color-gold-deep) 0%,
		var(--nn-color-gold-bright) 45%,
		var(--nn-color-gold) 100%
	);

	/* ---------------------------------------------------------------
	 * Типографика
	 *
	 * ВАЖНО. В настройках темы действующего сайта заголовки заданы
	 * как Montserrat, а меню как Roboto — но фактически на страницах
	 * применяется Open Sans. Проверено computed styles на материале,
	 * главной и странице: h1, h2, h3, меню, карточки — везде Open Sans.
	 * Настройки темы до вывода не доходят.
	 *
	 * Здесь стоит то, что видит посетитель, а не то, что записано
	 * в настройках. Исключение — название сайта в шапке: там реально
	 * работает Exo 2.
	 * --------------------------------------------------------------- */

	--nn-font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--nn-font-heading: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--nn-font-display: "Exo 2", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--nn-font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--nn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	 * Бегущая строка намеренно набрана не шрифтом сайта. На действующем
	 * сайте полоса печатается с `font-family: sans-serif`, то есть
	 * системным шрифтом без засечек, и заказчик просил повторить её
	 * один в один. Отдельная переменная, а не значение по месту: если
	 * решим вернуть строку к шрифту сайта, правка будет в одном месте.
	 */
	--nn-font-ticker: sans-serif;

	/*
	 * Заголовок плитки. В макете заказчика он засечный — из системных,
	 * без загрузки веб-шрифта: лишний файл на главной стоит дороже,
	 * чем точное совпадение начертания. Понадобится точь-в-точь —
	 * подключим и поменяем здесь.
	 */
	--nn-font-tile-title: Georgia, "Times New Roman", "PT Serif", serif;

	/*
	 * Эмодзи-значки кнопок. Шрифт сайта их не содержит, и без явного
	 * списка браузер подставляет что найдёт: в Windows это чаще всего
	 * чёрно-белый Segoe UI Symbol вместо цветного Segoe UI Emoji.
	 * Перечислены цветные наборы трёх систем, дальше — обычный запасной.
	 */
	--nn-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;

	/* Размерная шкала. Все значения сняты computed styles с материала
	   действующего сайта, а не выведены из настроек темы. */
	--nn-fs-nav: 0.6875rem; /* 11px — пункт главного меню */
	--nn-fs-xs: 0.8rem;     /* 12.8px — мета карточки, счётчики */
	--nn-fs-sm: 0.85rem;    /* 13.6px — крошки */
	--nn-fs-card: 0.9rem;   /* 14.4px — анонс в карточке */
	--nn-fs-base: 1rem;     /* 16px — основной текст, заголовок карточки */
	--nn-fs-md: 1.125rem;   /* 18px — h3 */
	--nn-fs-lg: 1.5rem;     /* 24px — h4 */
	--nn-fs-xl: 1.75rem;    /* 28px — промежуточный, на сайте не встречается */
	--nn-fs-2xl: 2rem;      /* 32px — h2 */
	--nn-fs-3xl: 2.5rem;    /* 40px — h1 */
	--nn-fs-brand: 2.0625rem; /* 33px — название сайта в шапке */
	--nn-fs-display: 5rem;  /* 80px — крупная цифра на странице «не найдено» */

	/* Межстрочные. Сняты с сайта: h1 44/40, h2 38.4/32, h3 25.2/18,
	   текст 24/16. */
	--nn-lh-tight: 1.1;
	--nn-lh-heading: 1.2;
	--nn-lh-h3: 1.4;
	--nn-lh-base: 1.5;
	--nn-lh-loose: 1.75;

	/* Насыщенность. На сайте h1 и h2 — 700, h3 — 500,
	   заголовок карточки — 400. */
	--nn-fw-normal: 400;
	--nn-fw-medium: 500;
	--nn-fw-bold: 700;

	/* ---------------------------------------------------------------
	 * Пространство
	 *
	 * Шаг 4px. Используется и для отступов, и для промежутков в сетках.
	 * --------------------------------------------------------------- */

	--nn-space-1: 0.25rem;  /*  4px */
	--nn-space-2: 0.5rem;   /*  8px */
	--nn-space-3: 0.75rem;  /* 12px */
	--nn-space-4: 1rem;     /* 16px */
	--nn-space-5: 1.5rem;   /* 24px */
	--nn-space-6: 2rem;     /* 32px */
	--nn-space-7: 3rem;     /* 48px */
	--nn-space-8: 4rem;     /* 64px */

	/* ---------------------------------------------------------------
	 * Скругления и тени
	 * --------------------------------------------------------------- */

	/* Сняты с сайта: кнопка 9px, подложка изображения в карточке 6px.
	   Сама карточка скругления не имеет. */
	--nn-radius-sm: 4px;
	--nn-radius-card: 6px;
	--nn-radius-md: 9px;
	--nn-radius-lg: 16px;
	--nn-radius-pill: 999px;

	--nn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--nn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	/*
	 * Свечение вокруг колонки страницы. Тёплый полупрозрачный ореол —
	 * единственное, что отделяет колонку от фона: цвет у них одинаковый.
	 * Значения сняты с действующего сайта.
	 */
	--nn-shadow-page: 0 0 100px rgba(99, 91, 58, 0.19);
	--nn-shadow-nav: 0 5px 45px -14px rgba(99, 91, 58, 0.19);

	/* ---------------------------------------------------------------
	 * Раскладка
	 * --------------------------------------------------------------- */

	/*
	 * Снято с действующего сайта: контейнер 1140px, боковой отступ
	 * 20px на узком экране и 45px на широком. Переключение отступа
	 * задаётся в layout.css переопределением переменной.
	 */
	--nn-container-max: 1140px;
	--nn-container-pad: 20px;
	--nn-container-pad-wide: 45px;
	--nn-sidebar-width: 320px;
	--nn-grid-gap: var(--nn-space-5);

	/* Каркас. Снято: шапка 20px сверху и снизу, подвал — 50px. */
	--nn-header-pad-y: 20px;
	--nn-footer-pad-y: 50px;

	/* Логотип. Снято: max-width 200px, фактическая высота 120px. */
	--nn-logo-max: 200px;
	--nn-logo-height: 120px;

	/* ---------------------------------------------------------------
	 * Брейкпоинты
	 *
	 * Объявлены здесь ради единого источника значений, но в самих
	 * медиазапросах приходится писать литералы: CSS не подставляет
	 * переменные внутрь @media — это ограничение языка, а не недосмотр.
	 * Значения обязаны совпадать с перечисленными ниже:
	 *
	 *   телефон   — до 599px
	 *   планшет   — 600px … 1023px
	 *   компьютер — от 1024px
	 * --------------------------------------------------------------- */

	--nn-bp-tablet: 600px;
	--nn-bp-desktop: 1024px;

	/* Длительность переходов. Одна на весь проект. */
	--nn-transition: 0.15s ease;
}

/*
 * Уважение к системной настройке «уменьшить движение»: у части
 * пользователей анимация вызывает физический дискомфорт, и браузер
 * об этом сообщает.
 */
@media (prefers-reduced-motion: reduce) {

	:root {
		--nn-transition: 0s;
	}
}