/* ========================================================================== 

   01. Дизайн-токены и темы
   02. Сброс и базовые правила
   03. Общие контейнеры и утилиты
   04. Шапка сайта
   05. Подвал
   06. Анимация появления
   ========================================================================== */

/* ========================================================================== 
   01. ДИЗАЙН-ТОКЕНЫ И ТЕМЫ
   Все повторяющиеся размеры, цвета, скругления и эффекты задаются здесь.
   Изменение переменной автоматически применяется ко всем связанным блокам.
   ========================================================================== */

/* Светлая тема по умолчанию: типографика, интервалы, палитра и общие эффекты. */
:root, [data-theme="light"] { color-scheme: light; --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --color-bg: #f7f3ee; --color-surface: #fcfaf7; --color-surface-2: #f3eee7; --color-surface-offset: #ece4db; --color-border: #dbd0c5; --color-text: #2f261f; --color-text-muted: #74685d; --color-text-faint: #a79a8f; --color-text-inverse: #fcfaf7; --color-primary: #1d6b72; --color-primary-hover: #16555b; --color-primary-highlight: #d6e7e6; --color-rating: #d4a437; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(28, 22, 17, 0.06); --shadow-md: 0 10px 30px rgba(28, 22, 17, 0.10); --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --content-wide: 1160px; --border-soft: color-mix(in srgb, var(--color-text) 8%, transparent); --border-default: color-mix(in srgb, var(--color-text) 9%, transparent); --border-strong: color-mix(in srgb, var(--color-text) 12%, transparent); --surface-glass: color-mix(in srgb, var(--color-surface) 92%, transparent); }

/* Тёмная тема: переопределяются только те значения, которые действительно меняются. */
[data-theme="dark"] { color-scheme: dark; --color-bg: #171411; --color-surface: #1e1a17; --color-surface-2: #28231f; --color-surface-offset: #312a25; --color-border: #433a33; --color-text: #ede6de; --color-text-muted: #b8aa9d; --color-text-faint: #8a7b6e; --color-text-inverse: #171411; --color-primary: #74b6bc; --color-primary-hover: #5da2a9; --color-primary-highlight: #223436; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* ========================================================================== 
   02. СБРОС И БАЗОВЫЕ ПРАВИЛА
   Нормализуют поведение браузера и задают основу всей страницы.
   ========================================================================== */

/* Единая модель размеров; удаление стандартных внешних и внутренних отступов. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Плавная прокрутка по якорям и защита от горизонтального переполнения. */
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }

/* Фон, основной шрифт, цвет текста и минимальная высота страницы. */
body { min-height: 100dvh; max-width: 100%; overflow-x: hidden; background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 10%, transparent) 0, transparent 35%), linear-gradient(180deg, var(--color-bg), var(--color-surface)); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; }

/* Изображения и SVG не выходят за ширину родительского блока. */
img, svg { display: block; max-width: 100%; height: auto; }

/* Элементы управления наследуют шрифт сайта. */
a, button, input, textarea { font: inherit; }

/* Базовое поведение кнопок; конкретный внешний вид задают классы компонентов. */
button { cursor: pointer; border: none; background: none; transition: transform var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive); }

/* Ссылки наследуют цвет текста и плавно реагируют на изменение состояния. */
a { color: inherit; text-decoration: none; transition: color var(--transition-interactive), opacity var(--transition-interactive); }

/* Видимый контур для клавиатурной навигации. */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ========================================================================== 
   03. ОБЩИЕ КОНТЕЙНЕРЫ И УТИЛИТЫ
   Переиспользуемые правила, не привязанные к одному компоненту.
   ========================================================================== */

/* Скрытая ссылка «Перейти к содержимому» появляется при фокусе с клавиатуры. */
.skip-link { position: absolute; top: -3rem; left: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-inverse); }
.skip-link:focus { top: var(--space-4); }

/* Ограничивает ширину содержимого и центрирует его на странице. */
.container { width: min(calc(100% - 2rem), var(--content-wide)); margin: 0 auto; }

/* Вторичный, менее контрастный текст. */
.muted { color: var(--color-text-muted); }

/* Двухколоночная универсальная сетка. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Декоративная надпись-метка над заголовком; оставлена для повторного использования. */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); padding: 0.5rem 0.9rem; border-radius: var(--radius-full); background: var(--color-primary-highlight); color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Вводный абзац ограниченной ширины; оставлен как общий типографический класс. */
.lead { max-width: 60ch; margin-bottom: var(--space-6); color: var(--color-text-muted); }

/* ========================================================================== 
   04. ШАПКА САЙТА
   Логотип, название преподавателя и переключатель темы.
   ========================================================================== */

/* Липкая полупрозрачная шапка остаётся сверху при прокрутке. */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(18px); }

/* Раскладывает бренд и элементы управления по краям шапки. */
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-4); }

/* Ссылка-бренд, содержащая знак и текст. */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 700; }

/* Круглая подложка фирменного знака. */
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-highlight); color: var(--color-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.brand-mark svg { width: 24px; height: 24px; }

/* Две строки текста в блоке бренда. */
.brand-text { display: grid; gap: 2px; }
.brand-text strong { font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.brand-text span { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Контейнер кнопок в правой части шапки. */
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Общая форма переключателя темы и зарезервированной кнопки редактирования. */
.theme-toggle, .edit-toggle { min-width: 44px; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-sm); }

/* Дополнительный контраст переключателя в тёмной теме. */
[data-theme="dark"] .theme-toggle { border-color: rgba(255, 255, 255, 0.42); background: color-mix(in srgb, var(--color-surface) 88%, white 12%); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.22); }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.62); background: color-mix(in srgb, var(--color-surface) 80%, white 20%); color: #ffffff; }
[data-theme="dark"] .theme-toggle span, [data-theme="dark"] .theme-toggle svg { color: #ffffff; fill: none; stroke: currentColor; }

/* ========================================================================== 
   05. ПОДВАЛ
   Нижняя граница страницы и служебная подпись.
   ========================================================================== */

/* Внешний отступ подвала от нижнего края окна. */
.site-footer { padding: 0 0 var(--space-10); }

/* Внутренняя строка подвала с разделительной линией. */
.footer-box { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ========================================================================== 
   06. АНИМАЦИЯ ПОЯВЛЕНИЯ
   JavaScript добавляет класс .visible, когда блок попадает в область экрана.
   ========================================================================== */

/* Начальное состояние: блок немного ниже и полностью прозрачен. */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }

/* Конечное состояние после появления блока на экране. */
.reveal.visible { opacity: 1; transform: translateY(0); }