/*
 * Дизайн-токены Easy Peasy School v1.0 (Фаза 1).
 *
 * Настоящая дизайн-система (не заглушки). Зеркалит settings из theme.json:
 * WordPress сам генерирует --wp--preset--* из theme.json; этот файл — справочный
 * источник для разработки вне block-контекста и для синхронизации.
 * При расхождении правим ОБА файла одновременно.
 *
 * Шрифты: Unbounded (заголовки) + Manrope (текст) — самохостинг в assets/fonts/,
 * @font-face в assets/css/fonts.css.
 */

:root {
	/* --- Цвета: light (зеркало settings.color.palette) --- */
	--eps-color-primary: #ff5a5f;
	--eps-color-primary-hover: #e8484d;
	--eps-color-primary-active: #ce3a3f;
	--eps-color-ink: #1e1b3a; /* текст / заголовки */
	--eps-color-muted: #5b5870;
	--eps-color-blue: #2563eb; /* акцент доверия / ссылки */
	--eps-color-violet: #7c5cfc;
	--eps-color-amber: #f5a623;
	--eps-color-green: #16a34a;
	--eps-color-red: #dc2626;
	--eps-color-line: #e7e3f0;
	--eps-color-paper: #ffffff;
	--eps-color-surface-soft: #fff6f2;
	--eps-color-surface-blue: #eef2ff;
	--eps-color-surface-violet: #f3f0ff;
	--eps-color-surface-amber: #fff7e6;
	--eps-color-background: #fbfafe;
	--eps-on-primary: #ffffff;

	/* Заливка primary-кнопки (CTA): тёмный коралл ради WCAG AA с белым текстом.
	   Бренд-коралл --eps-color-primary остаётся ярким для акцентов/бейджей/иконок.
	   Контраст белого текста: rest 4.67:1, hover 5.55:1, active 6.80:1. */
	--eps-btn-primary-bg: #d6383e;
	--eps-btn-primary-bg-hover: #c42e34;
	--eps-btn-primary-bg-active: #ad262c;
	/* Усиленный коралл-акцент для текста активных состояний на светлых поверхностях
	   (нав. активный пункт, активный переключатель). На surface-soft 4.89:1, на белом 5.20:1. */
	--eps-accent-strong: #c9343a;

	/* Бирюзовый — пятая ступень цветовой шкалы CEFR (тинт-подложка метки A2).
	   Намеренно НЕ в settings.color.palette: это служебный цвет шкалы уровней,
	   в редакторе контента он не нужен, поэтому лежит вне зеркала палитры. */
	--eps-color-teal: #0ea5a5;

	/* Доступный текст цветных бейджей и чипов на светлых подложках (WCAG AA ≥4.5:1
	   для normal text). Бренд-цвета --eps-color-green/teal/blue/violet/amber/primary
	   остаются яркими для иконок и тинт-подложек; здесь затемнён только ТЕКСТ.
	   Пять первых токенов держат смысловую шкалу CEFR: A1 зелёный, A2 бирюзовый,
	   B1 синий, B2 фиолетовый, C1 янтарный — цвет продолжает кодировать уровень.
	   Замеры на самой тёмной из трёх штатных подложек (тинт поверх white / background /
	   surface-soft), т.е. худший случай: green 5.24:1, teal 5.10:1, blue 5.99:1,
	   violet 5.08:1, amber 5.23:1, coral 4.89:1.
	   В тёмной теме подложки инвертированы, поэтому там возвращаем яркие бренд-цвета
	   (замеры в тёмном блоке ниже). */
	--eps-badge-green-text: #116b33;
	--eps-badge-teal-text: #0a6a6a;
	--eps-badge-blue-text: #1d4ed8;
	--eps-badge-violet-text: #7c3aed;
	--eps-badge-amber-text: #805800;
	--eps-badge-coral-text: var(--eps-accent-strong);

	/* --- Шрифты (самохостинг; см. fonts.css) ---
	   Вторым в стеке идёт «* Fallback» — тот же системный шрифт, но с метриками,
	   подогнанными под настоящий (size-adjust и пр.). Он нужен ровно на время
	   загрузки woff2: без него подмена шрифта переверстывала абзацы и давала
	   CLS до 0.30. Разбор и происхождение чисел — в шапке fonts.css.
	   ПОРЯДОК ВАЖЕН: убрать фолбэк из стека = вернуть сдвиг. */
	--eps-font-heading: "Unbounded", "Unbounded Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--eps-font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* --- Размеры шрифта (fluid clamp; зеркало settings.typography.fontSizes) --- */
	--eps-fs-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--eps-fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	--eps-fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--eps-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
	--eps-fs-h2: clamp(1.625rem, 1.15rem + 2vw, 2.25rem);
	--eps-fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
	--eps-fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);

	/* --- Отступы (4pt; зеркало settings.spacing.spacingSizes) --- */
	--eps-space-20: 0.25rem;
	--eps-space-30: 0.5rem;
	--eps-space-35: 0.75rem;
	--eps-space-40: 1rem;
	--eps-space-50: 1.5rem;
	--eps-space-60: 2.5rem;
	--eps-space-70: 4rem;
	--eps-space-80: 6rem;

	/* --- Радиусы (зеркало settings.custom.radius) --- */
	--eps-radius-sm: 10px;
	--eps-radius-md: 16px;
	--eps-radius-lg: 24px;
	--eps-radius-xl: 32px;
	--eps-radius-pill: 999px;

	/* --- Тени (зеркало settings.shadow.presets) --- */
	--eps-shadow-sm: 0 2px 8px rgba(30, 27, 58, 0.06);
	--eps-shadow-md: 0 8px 24px rgba(30, 27, 58, 0.1);
	--eps-shadow-lg: 0 20px 48px rgba(30, 27, 58, 0.14);
	--eps-shadow-brand: 0 12px 28px rgba(255, 90, 95, 0.32);
	--eps-shadow-brand-strong: 0 16px 32px rgba(255, 90, 95, 0.4); /* hover primary-кнопки */

	/* --- Фокус-кольцо (доступность; :focus-visible) --- */
	--eps-ring: 0 0 0 4px rgba(37, 99, 235, 0.3);

	/* --- Бренд-градиент / свечение (завязаны на ведущий цвет — коралл) --- */
	--eps-grad-brand: linear-gradient(120deg, #ff5a5f, #ff8a5b); /* hero, CTA-баннер */
	--eps-brand-soft-glow: rgba(255, 90, 95, 0.18); /* радиальные блики на карточках */

	/* --- Layout --- */
	--eps-content: 760px;
	--eps-wide: 1320px;
	--eps-bleed: 1536px;
}

/* --- Тёмная тема (первоклассный режим) --- */
[data-theme="dark"] {
	--eps-color-primary: #ff6b70;
	--eps-color-primary-hover: #ff8489;
	--eps-color-primary-active: #e85257;
	--eps-color-ink: #f4f2fa;
	--eps-color-muted: #a9a4c4;
	--eps-color-blue: #6e97ff;
	--eps-color-violet: #a593ff;
	--eps-color-amber: #ffc24d;
	--eps-color-green: #4ade80;
	--eps-color-red: #f87171;
	--eps-color-line: #322c57;
	--eps-color-paper: #1e1b3a;
	--eps-color-surface-soft: #262248;
	--eps-color-surface-blue: #222a4d;
	--eps-color-surface-violet: #28244a;
	--eps-color-surface-amber: #332a1c;
	--eps-color-background: #14122b;
	--eps-on-primary: #1a0f10;

	/* Тёмная тема в норме (контраст ОК) — токены привязаны к существующему primary,
	   поэтому рендер тёмной темы не меняется. */
	--eps-btn-primary-bg: var(--eps-color-primary);
	--eps-btn-primary-bg-hover: var(--eps-color-primary-hover);
	--eps-btn-primary-bg-active: var(--eps-color-primary-active);
	--eps-accent-strong: var(--eps-color-primary);
	--eps-color-teal: #2dd4bf;

	/* Текст бейджей и чипов: в тёмной теме подложка тёмная — возвращаем яркие
	   бренд-цвета. Замеры на худшей (самой светлой) из штатных тёмных подложек:
	   green 5.95:1, teal 5.38:1, blue 6.36:1, violet 5.70:1, amber 5.52:1.
	   blue вынесен отдельным значением: бренд-синий --eps-color-blue на surface-blue
	   даёт ровно 5.00:1 — запаса нет, поэтому текст чипа берём светлее. */
	--eps-badge-green-text: var(--eps-color-green);
	--eps-badge-teal-text: var(--eps-color-teal);
	--eps-badge-blue-text: #8aaeff;
	--eps-badge-violet-text: var(--eps-color-violet);
	--eps-badge-amber-text: var(--eps-color-amber);
	--eps-badge-coral-text: var(--eps-color-primary);

	--eps-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--eps-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
	--eps-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
	--eps-shadow-brand: 0 12px 28px rgba(255, 107, 112, 0.3);
	--eps-shadow-brand-strong: 0 16px 32px rgba(255, 107, 112, 0.4);
	--eps-grad-brand: linear-gradient(120deg, #ff6b70, #ff9a6b);
	--eps-brand-soft-glow: rgba(255, 107, 112, 0.2);

	/* Фокус-кольцо в тёмной теме — ярче для контраста */
	--eps-ring: 0 0 0 4px rgba(110, 151, 255, 0.45);
}