/* ==========================================================================
   [KU:] — токены дизайна
   Единственное место, где живут «сырые» значения. Всё остальное ссылается
   сюда через var(). Палитра снята с дизайн-экспорта подсчётом частоты:
   красный, белый и серый #8E9296 покрывают ~80% всех цветов в макете.
   ========================================================================== */

:root {
	/* --- Бренд ---------------------------------------------------------- */
	--ku-accent: #D82A33;          /* фирменный красный: рельс, акценты, CTA  */
	--ku-accent-hover: #B92129;    /* нажатое состояние сплошных кнопок       */
	--ku-accent-dim: rgba(216, 42, 51, 0.15);  /* заливки-подложки            */
	--ku-accent-ghost: rgba(216, 42, 51, 0.16); /* декоративные иероглифы     */
	--ku-amber: #EA9C42;           /* второй акцент: статусы, «скоро»         */

	/* --- Тёмная схема (основная) ---------------------------------------- */
	--ku-bg: #0B0C0E;              /* фон страницы                            */
	--ku-bg-deep: #060708;         /* поле за мобильной колонкой              */
	--ku-surface: #111315;         /* секции-подложки, карточки               */
	--ku-surface-2: #16181C;       /* вложенная подложка                      */
	--ku-surface-3: #14161A;       /* карта, медиаплашки                      */
	--ku-line: #26292B;            /* основная граница на тёмном              */
	--ku-line-soft: #1E2125;       /* граница внутри карточек                 */
	--ku-line-strong: #3A3E43;     /* обводка иконок и вторичных кнопок       */
	--ku-text: #FFFFFF;
	--ku-text-muted: #8E9296;      /* подписи, метаданные                     */
	--ku-text-dim: #4A4E53;        /* выключенные состояния                   */

	/* --- Светлая схема (модалки, юр. страницы) --------------------------- */
	--ku-light-bg: #E5E6E7;
	--ku-light-surface: #D9DBDC;
	--ku-light-line: #C8CACC;
	--ku-light-line-soft: #D6D8DA;
	--ku-ink: #111315;             /* текст на светлом                        */
	--ku-ink-muted: #55595C;

	/* --- Наложения ------------------------------------------------------- */
	--ku-scrim: rgba(11, 12, 14, 0.8);   /* плашки поверх фото                */
	--ku-scrim-hero: rgba(10, 11, 13, 0.7); /* затемнение hero-фона           */
	--ku-overlay: rgba(6, 7, 8, 0.85);   /* фон под мобильным меню и модалкой */
	--ku-glass: rgba(11, 12, 14, 0.55);  /* липкая шапка с blur               */
	--ku-hairline: rgba(255, 255, 255, 0.08);

	/* --- Типографика ----------------------------------------------------- */
	--ku-font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ku-font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	/* Японский идёт с Google (см. inc/enqueue.php). Запасные — системные
	   японские шрифты macOS, Windows и Android: если CDN недоступен,
	   иероглифы на рельсе всё равно отрисуются, а не уедут в тофу. */
	--ku-font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
	              'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif;

	/* Мелкая моношкала — это язык интерфейса макета: подписи, метки, кнопки.
	   Три ступени покрывают почти всё (10/11/12px в экспорте — 220 вхождений). */
	--ku-fs-micro: 9px;
	--ku-fs-label: 10px;
	--ku-fs-ui: 11px;
	--ku-fs-ui-lg: 12px;
	--ku-fs-body-s: 13px;
	--ku-fs-body: 15px;
	--ku-fs-body-lg: 16px;
	--ku-fs-lead: 21px;

	/* Заголовки — флюидные: в макете 96px на десктопе и 32px на 375px.
	   clamp() снимает необходимость в ступенчатых медиазапросах. */
	--ku-fs-h1: clamp(32px, 7vw, 96px);
	--ku-fs-h1-hero: clamp(34px, 8vw, 130px);
	--ku-fs-h2: clamp(26px, 4.2vw, 72px);
	--ku-fs-h3: clamp(20px, 2.6vw, 40px);
	--ku-fs-h4: clamp(17px, 1.7vw, 24px);

	--ku-ls-tight: -0.02em;   /* крупные заголовки */
	--ku-ls-snug: -0.01em;
	--ku-ls-ui: 0.14em;       /* моношрифт в кнопках */
	--ku-ls-label: 0.2em;     /* надзаголовки-метки */
	--ku-ls-wide: 0.16em;
	--ku-ls-soft: 0.06em;

	--ku-lh-tight: 0.94;
	--ku-lh-heading: 1.05;
	--ku-lh-body: 1.6;
	--ku-lh-ui: 2;

	/* --- Сетка и размеры -------------------------------------------------- */
	--ku-rail-w: 100px;            /* красная панель на десктопе              */
	--ku-rail-w-mobile: 34px;
	--ku-header-h: 72px;
	--ku-header-h-mobile: 54px;
	/* Горизонтальные поля секций. В макете ровно два значения — 16px на
	   мобильном и 80px на десктопе, промежуточных нет: десктопная раскладка
	   там начинается с min-width:1280px и ниже просто скроллится вбок.
	   Мы этот скролл убрали, поэтому между 1000 и 1280 поля растут плавно,
	   но на самих брейкпоинтах совпадают с макетом до пикселя. */
	--ku-gutter: 16px;
	--ku-section-y: 44px;
	--ku-maxw: 1600px;             /* потолок контента на широких экранах     */
	--ku-maxw-narrow: 640px;       /* одноколоночные секции на планшете       */
	--ku-radius: 4px;              /* в макете скругление только у кнопок     */

	/* --- Движение --------------------------------------------------------- */
	--ku-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ku-dur-fast: 0.2s;
	--ku-dur: 0.3s;
	--ku-dur-slow: 0.35s;

	/* --- Слои ------------------------------------------------------------- */
	--ku-z-rail: 120;
	--ku-z-header: 110;
	--ku-z-menu: 420;
	--ku-z-modal: 500;
}

/*
   Брейкпоинт desktop = 1000px. Дублируется в PHP как KU_BP_DESKTOP —
   custom properties в медиазапросах не работают, поэтому число в @media
   всегда написано руками. Меняете здесь — меняйте в functions.php.
*/

@media (min-width: 1000px) {
	:root {
		/* clamp, а не 80px: между 1000 и 1280 макета не существует —
		   там он уезжал в горизонтальный скролл. Растим поля плавно,
		   к 1280px выходим на макетные 80px. */
		--ku-gutter: clamp(32px, 6.25vw, 80px);
		--ku-section-y: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ku-dur-fast: 0.01ms;
		--ku-dur: 0.01ms;
		--ku-dur-slow: 0.01ms;
	}
}