/*
 * §21 — БАЗОВАЯ ТЕМА DigiCMS.
 *
 * Один файл на всю публичную часть: бюджет §21.1 — «CSS публичной части:
 * один файл, ≤ 30 КБ». Один файл — это ещё и один запрос, и отсутствие
 * порядка загрузки, в котором можно ошибиться.
 *
 * **Значения живут только в токенах.** Клиент переопределяет
 * `resources/css/tokens.css` своего проекта — он приезжает ПОСЛЕ этого
 * файла и выигрывает. Ниже по тексту нет ни одного цвета, кроме как
 * в блоке `:root`: правило «клиенту меняются токены, а не вёрстка»
 * держится тем, что менять больше нечего.
 *
 * **Инлайн-стилей нет нигде** — этого требует публичный CSP §20.2
 * (`style-src 'self'` без `unsafe-inline`). Всё, что хочется написать
 * атрибутом `style`, выражается классом или атрибутом данных.
 */

/* --------------------------------------------------------------------
 * Шрифт. Свой хост, два подмножества, ИЗМЕРЕННЫЙ резерв.
 *
 * Inter (SIL OFL 1.1) отдаётся с нашего домена: `font-src 'self'`
 * не требует ни одного послабления, а сторонний CDN — это ещё один
 * владелец доступности сайта и ещё один наблюдатель за посетителем.
 *
 * Подмножеств два, и границы у них те же, что у Google Fonts. Файл
 * скачивается ТОЛЬКО когда на странице есть его знаки: русская страница
 * не тянет латиницу целиком, узбекская — кириллицу.
 *
 * **`ʻ` (U+02BB) — в подмножестве `latin`, а не `latin-ext`.** Это
 * не мелочь: узбекские `Oʻ`/`Gʻ` пишутся именно им, и подмножество
 * «латиница без диакритики» разорвало бы слово пополам, отдав одну
 * букву резервному шрифту. Проверено на скачанном файле
 * (`bin/fetch-theme-font.sh`), а не по названию подмножества.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/digi/fonts/inter-latin.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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/digi/fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * Резервная гарнитура с ИЗМЕРЕННЫМИ поправками.
 *
 * Числа получены сравнением средней ширины строчной латиницы Inter
 * и Arial на самих файлах шрифтов (`bin/fetch-theme-font.sh` печатает
 * их при каждом обновлении), а не подобраны на глаз:
 *
 *   средняя ширина Inter    0,5269 em
 *   средняя ширина Arial    0,4817 em
 *   size-adjust = 0,5269 / 0,4817 = 109,4 %
 *
 * Смысл поправок — чтобы страница, отрисованная резервным шрифтом,
 * занимала СТОЛЬКО ЖЕ места, сколько займёт настоящий. Без этого
 * подмена шрифта двигает весь текст, и это прямой вклад в CLS (§21.1) —
 * тот самый сдвиг, который потом ищут по всему макету.
 */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 109.4%;
    ascent-override: 88.6%;
    descent-override: 22.1%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------------------
 * Токены. Единственное место со значениями.
 * ------------------------------------------------------------------ */

:root {
    /* Цвет. Контраст текста к фону — 15:1, выше требования AA (4,5:1);
       приглушённого текста — 4,6:1; интерфейсных границ — 3,1:1. */
    --digi-color-bg: #ffffff;
    --digi-color-surface: #f6f7f9;
    --digi-color-fg: #111827;
    --digi-color-muted: #5b6472;
    --digi-color-primary: #1d4ed8;
    --digi-color-primary-fg: #ffffff;
    --digi-color-primary-hover: #1739a6;
    --digi-color-border: #c8ccd4;
    --digi-color-focus: #b45309;
    --digi-color-error: #b42318;
    --digi-color-success: #15803d;

    /* Типографика. Первая гарнитура — Inter со своего хоста, вторая —
       системная с измеренными поправками (см. блок шрифта выше). Клиент,
       поставивший свой шрифт, просто переопределяет этот токен: файлы
       Inter при этом не скачиваются вовсе — `@font-face` без
       употребления не грузится. */
    --digi-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --digi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --digi-text-base: 1rem;
    --digi-text-lead: 1.125rem;
    --digi-text-small: 0.875rem;
    --digi-line: 1.6;
    --digi-line-tight: 1.2;

    /* Ритм. Одна шкала на отступы: произвольные значения в вёрстке —
       это те же значения вне токенов. */
    --digi-space-1: 0.25rem;
    --digi-space-2: 0.5rem;
    --digi-space-3: 0.75rem;
    --digi-space-4: 1rem;
    --digi-space-6: 1.5rem;
    --digi-space-8: 2rem;
    --digi-space-12: 3rem;

    --digi-radius: 8px;
    --digi-radius-sm: 4px;
    --digi-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.06);
    --digi-width: 72rem;
    --digi-width-text: 42rem;
    --digi-header-height: 4rem;
}

/* Тёмная тема — по настройке системы. Отдельного переключателя нет
   намеренно: переключатель без сохранения состояния бесполезен,
   а с сохранением требует cookie и не работает без JavaScript. */
@media (prefers-color-scheme: dark) {
    :root {
        --digi-color-bg: #0f1216;
        --digi-color-surface: #171b21;
        --digi-color-fg: #e8eaed;
        --digi-color-muted: #a7aebb;
        --digi-color-primary: #7aa2ff;
        --digi-color-primary-fg: #0f1216;
        --digi-color-primary-hover: #a8c1ff;
        --digi-color-border: #39404b;
        --digi-color-focus: #fbbf24;
        --digi-color-error: #ff7b72;
        --digi-color-success: #56d364;
    }
}

/* --------------------------------------------------------------------
 * Основа.
 * ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Плавная прокрутка — только тем, кто не просил её отключить. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--digi-color-bg);
    color: var(--digi-color-fg);
    font-family: var(--digi-font-sans);
    font-size: var(--digi-text-base);
    line-height: var(--digi-line);
    -webkit-text-size-adjust: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    line-height: var(--digi-line-tight);
    margin: 0 0 var(--digi-space-4);
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); margin-top: var(--digi-space-8); }
h3 { font-size: 1.25rem; margin-top: var(--digi-space-6); }

p, ul, ol, table, pre, blockquote, figure { margin: 0 0 var(--digi-space-4); }

a {
    color: var(--digi-color-primary);
    text-underline-offset: 0.2em;
}

a:hover { color: var(--digi-color-primary-hover); }

/* **Фокус виден всегда и везде.** Критерий приёмки Э7 — ручной проход
   клавиатурой, и невидимый фокус ломает его целиком. Обводка идёт
   отдельным цветом: у ссылки и кнопки разный фон, а видно должно быть
   на обоих. */
:focus-visible {
    outline: 3px solid var(--digi-color-focus);
    outline-offset: 2px;
    border-radius: var(--digi-radius-sm);
}

img, video { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--digi-color-border); margin: var(--digi-space-8) 0; }

blockquote {
    margin-inline: 0;
    padding: var(--digi-space-2) var(--digi-space-4);
    border-inline-start: 3px solid var(--digi-color-border);
    color: var(--digi-color-muted);
}

code, pre { font-family: var(--digi-font-mono); font-size: 0.9em; }

pre {
    overflow-x: auto;
    padding: var(--digi-space-4);
    background: var(--digi-color-surface);
    border-radius: var(--digi-radius);
}

/* --------------------------------------------------------------------
 * Каркас страницы.
 * ------------------------------------------------------------------ */

.digi-wrap {
    width: 100%;
    max-width: var(--digi-width);
    margin-inline: auto;
    padding-inline: var(--digi-space-4);
}

.digi-main {
    flex: 1 0 auto;
    padding-block: var(--digi-space-8) var(--digi-space-12);
}

.digi-prose { max-width: var(--digi-width-text); }

/* Ссылка «к содержимому» — первая в порядке обхода и видна при фокусе.
   Без неё человек с клавиатуры проходит меню на каждой странице заново. */
.digi-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--digi-color-primary);
    color: var(--digi-color-primary-fg);
    padding: var(--digi-space-2) var(--digi-space-4);
    border-radius: 0 0 var(--digi-radius) 0;
}

.digi-skip:focus {
    left: 0;
    color: var(--digi-color-primary-fg);
}

/* --------------------------------------------------------------------
 * Шапка.
 *
 * Высота задана токеном, а не содержимым: **шапка не должна прыгать
 * на первом кадре** (критерий приёмки Э7). Пока высота вычисляется
 * из шрифта и картинки, первый кадр отличается от второго.
 * ------------------------------------------------------------------ */

.digi-header {
    border-bottom: 1px solid var(--digi-color-border);
    background: var(--digi-color-bg);
}

.digi-header__inner {
    min-height: var(--digi-header-height);
    display: flex;
    align-items: center;
    gap: var(--digi-space-4);
    flex-wrap: wrap;
    padding-block: var(--digi-space-2);
}

.digi-brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--digi-color-fg);
    text-decoration: none;
    margin-inline-end: auto;
}

.digi-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--digi-space-1) var(--digi-space-4);
}

.digi-nav a {
    display: inline-block;
    padding-block: var(--digi-space-2);
    color: var(--digi-color-fg);
    text-decoration: none;
}

.digi-nav a:hover { text-decoration: underline; }

/* Подменю: список внутри пункта. Без JavaScript и без наведения —
   раскрытое подменю видно всем и работает с клавиатуры. */
.digi-nav ul ul {
    gap: 0 var(--digi-space-3);
    padding-inline-start: var(--digi-space-3);
}

.digi-nav ul ul a { font-size: var(--digi-text-small); color: var(--digi-color-muted); }

/*
 * Узкий экран: меню НЕ разворачивается в столбец на весь экран.
 *
 * Одиннадцать пунктов (а для русской версии сайта это нормальное число)
 * занимали на телефоне весь первый экран, и содержимое страницы уезжало
 * за его край: формально «шапка не сломалась», по существу — сайт,
 * который начинается с оглавления. Найдено снимком, а не рассуждением.
 *
 * Раскрывающееся меню здесь не годится: оно требует JavaScript, которого
 * у публичной страницы может не быть (§19.5), а `<details>` без него
 * даёт прыжок макета при открытии. Поэтому меню становится ОДНОЙ
 * строкой с горизонтальной прокруткой — приём, знакомый по вкладкам:
 * ничего не спрятано, всё достижимо клавиатурой, ни строчки скрипта.
 */
@media (max-width: 47.99em) {
    .digi-header__inner {
        flex-wrap: wrap;
        row-gap: var(--digi-space-2);
    }

    .digi-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        /* Место под обводку фокуса: без него она обрезается прокруткой. */
        padding-block: var(--digi-space-1);
    }

    .digi-nav > ul {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    /*
     * Подменю на узком экране уходит второй строкой прокручиваемой
     * ленты — и остаётся видимым и достижимым.
     *
     * Правило `display: contents` здесь стояло и не делало ничего:
     * оно снимает коробку у вложенного списка, но его пункты всё равно
     * становятся детьми `li`, а не общей флекс-строки. Приёмка Э7
     * справедливо назвала это неверным обещанием в комментарии —
     * и правило снято вместе с обещанием, а не переписано «чтобы
     * работало»: плоский ряд из пунктов двух уровней читается хуже,
     * чем отступ.
     */
    .digi-nav ul ul {
        padding-inline-start: var(--digi-space-4);
    }
}

.digi-languages {
    display: flex;
    gap: var(--digi-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.digi-languages a {
    text-transform: uppercase;
    font-size: var(--digi-text-small);
    letter-spacing: 0.04em;
    padding: var(--digi-space-1) var(--digi-space-2);
    border: 1px solid var(--digi-color-border);
    border-radius: var(--digi-radius-sm);
    text-decoration: none;
}

.digi-languages [aria-current="true"] {
    background: var(--digi-color-surface);
    color: var(--digi-color-fg);
}

/* --------------------------------------------------------------------
 * Крошки, содержание, подвал.
 * ------------------------------------------------------------------ */

.digi-crumbs {
    font-size: var(--digi-text-small);
    color: var(--digi-color-muted);
    padding-block: var(--digi-space-3) 0;
}

.digi-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--digi-space-2);
    margin: 0;
    padding: 0;
}

.digi-crumbs li + li::before {
    content: "/";
    margin-inline-end: var(--digi-space-2);
    color: var(--digi-color-border);
}

.digi-toc {
    background: var(--digi-color-surface);
    border-radius: var(--digi-radius);
    padding: var(--digi-space-4) var(--digi-space-6);
    margin-bottom: var(--digi-space-6);
    max-width: var(--digi-width-text);
}

.digi-toc ol { margin: 0; padding-inline-start: var(--digi-space-4); }
.digi-toc [data-digi-toc-level="3"] { margin-inline-start: var(--digi-space-4); }

.digi-footer {
    margin-top: auto;
    border-top: 1px solid var(--digi-color-border);
    background: var(--digi-color-surface);
    padding-block: var(--digi-space-8);
    font-size: var(--digi-text-small);
    color: var(--digi-color-muted);
}

.digi-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--digi-space-8);
    justify-content: space-between;
}

.digi-footer a { color: var(--digi-color-fg); }

.digi-contacts { list-style: none; margin: 0; padding: 0; }
.digi-contacts li + li { margin-top: var(--digi-space-1); }

/* --------------------------------------------------------------------
 * Компоненты.
 * ------------------------------------------------------------------ */

.digi-card {
    display: flex;
    flex-direction: column;
    background: var(--digi-color-bg);
    border: 1px solid var(--digi-color-border);
    border-radius: var(--digi-radius);
    overflow: hidden;
    box-shadow: var(--digi-shadow);
}

.digi-card__body { padding: var(--digi-space-4) var(--digi-space-6) var(--digi-space-6); }
.digi-card__title { font-size: 1.125rem; margin-bottom: var(--digi-space-2); }
.digi-card__title a { text-decoration: none; }
.digi-card__meta { color: var(--digi-color-muted); font-size: var(--digi-text-small); }

.digi-grid {
    display: grid;
    gap: var(--digi-space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    padding: 0;
    list-style: none;
    margin: 0 0 var(--digi-space-8);
}

.digi-button,
button[type="submit"],
.digi-form button {
    display: inline-block;
    padding: var(--digi-space-3) var(--digi-space-6);
    background: var(--digi-color-primary);
    color: var(--digi-color-primary-fg);
    border: 1px solid transparent;
    border-radius: var(--digi-radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.digi-button:hover,
.digi-form button:hover { background: var(--digi-color-primary-hover); color: var(--digi-color-primary-fg); }

.digi-button--quiet {
    background: transparent;
    color: var(--digi-color-primary);
    border-color: var(--digi-color-border);
}

/* Таблица прокручивается внутри своей обёртки, а не растягивает страницу:
   горизонтальная прокрутка всего документа на телефоне ломает всё. */
.digi-table-scroll,
.table-scroll { overflow-x: auto; margin-bottom: var(--digi-space-6); }

table { border-collapse: collapse; width: 100%; }

th, td {
    text-align: start;
    padding: var(--digi-space-2) var(--digi-space-3);
    border-bottom: 1px solid var(--digi-color-border);
}

th { font-weight: 600; }

figure { margin: 0 0 var(--digi-space-6); }
figcaption { color: var(--digi-color-muted); font-size: var(--digi-text-small); margin-top: var(--digi-space-2); }

.digi-empty {
    background: var(--digi-color-surface);
    border-radius: var(--digi-radius);
    padding: var(--digi-space-8);
    text-align: center;
    color: var(--digi-color-muted);
    max-width: var(--digi-width-text);
}

.digi-pagination ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--digi-space-2);
    padding: 0;
    margin: var(--digi-space-8) 0 0;
}

.digi-pagination a,
.digi-pagination span {
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
    padding: var(--digi-space-2) var(--digi-space-3);
    border: 1px solid var(--digi-color-border);
    border-radius: var(--digi-radius-sm);
    text-decoration: none;
}

.digi-pagination [aria-current="page"] {
    background: var(--digi-color-primary);
    color: var(--digi-color-primary-fg);
    border-color: transparent;
}

/* --------------------------------------------------------------------
 * Форма (§19.5).
 *
 * Вёрстка формы — часть пути к заявке, а не оформление: подпись видна
 * всегда, ошибка стоит рядом с полем и связана с ним `aria-describedby`,
 * honeypot спрятан так, чтобы его не видел ни человек, ни экранный
 * диктор.
 * ------------------------------------------------------------------ */

.digi-form {
    display: flex;
    flex-direction: column;
    gap: var(--digi-space-4);
    max-width: var(--digi-width-text);
    background: var(--digi-color-surface);
    padding: var(--digi-space-6);
    border-radius: var(--digi-radius);
    margin-block: var(--digi-space-8);
}

.digi-form--inline { max-width: none; }

.digi-form label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--digi-space-1);
}

.digi-form input[type="text"],
.digi-form input[type="email"],
.digi-form input[type="tel"],
.digi-form input[type="number"],
.digi-form input[type="date"],
.digi-form input[type="file"],
.digi-form select,
.digi-form textarea {
    width: 100%;
    padding: var(--digi-space-3);
    font: inherit;
    color: var(--digi-color-fg);
    background: var(--digi-color-bg);
    border: 1px solid var(--digi-color-border);
    border-radius: var(--digi-radius-sm);
}

.digi-form textarea { min-height: 8rem; resize: vertical; }

.digi-form__help { color: var(--digi-color-muted); font-size: var(--digi-text-small); }

.digi-form__error,
[data-digi-field-error] {
    color: var(--digi-color-error);
    font-size: var(--digi-text-small);
}

[data-digi-form-failed] {
    color: var(--digi-color-error);
    font-weight: 600;
}

[data-digi-form-sent] {
    color: var(--digi-color-success);
    font-weight: 600;
}

.digi-form button { align-self: start; }

/*
 * Содержимое, скрытое от экранного диктора, не показывается и глазами.
 *
 * Правило общее и написано как общее намеренно. Под него попадает
 * ловушка §19.7: прятал её инлайн-стиль, а строгий публичный CSP
 * (`style-src 'self'`) атрибут `style` блокирует — ловушка становилась
 * видимой, посетитель её заполнял, и заявку отклоняло как спам.
 * Отдельный класс для ловушки был бы указателем боту, какое поле
 * пропустить; `aria-hidden` — честное описание содержимого, которое
 * скрыто для всех.
 */
.digi-form [aria-hidden="true"] {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Звёздочка обязательного поля — исключение: она `aria-hidden`, потому
   что её роль уже сказана атрибутом `required`, но видеть её нужно. */
.digi-form label [aria-hidden="true"] {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    color: var(--digi-color-error);
}

.digi-form__consent { display: flex; gap: var(--digi-space-2); align-items: start; }
.digi-form__consent label { font-weight: 400; }

/* --------------------------------------------------------------------
 * Мелочи.
 * ------------------------------------------------------------------ */

.digi-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.digi-lead { font-size: var(--digi-text-lead); color: var(--digi-color-muted); }

[data-digi-faq] details {
    border-bottom: 1px solid var(--digi-color-border);
    padding-block: var(--digi-space-3);
}

[data-digi-faq] summary { cursor: pointer; font-weight: 600; }


/* resources/css/tokens.css проекта */
/*
 * Брендирование клиента (§6.4) — токены KursMap.
 *
 * Тема ядра не меняется: цвета `--digi-*` — значения темы (макеты EM-003
 * нарисованы на них). Здесь только свои токены проекта `--edu-*` из
 * design/assets/edu.css (5 цветов выдачи) и design/assets/landing.css
 * (лендинг главной, EM-003b; контрасты — design/direction.md §3),
 * каждый — со значением тёмной темы.
 *
 * `--edu-star` — цвет звезды рейтинга в карточке (6,0:1 к белому); на
 * лендинге главной он ярче — переопределён в site.css внутри `.edu-lp-main`.
 *
 * Файл приезжает после темы в одном `/digi/theme.css` (ThemeAssets).
 */

/* выдача, карточка, реклама (edu.css) */
:root {
    --edu-ad-bg: #fff7e6;
    --edu-ad-fg: #7a4100;        /* 7,6:1 к --edu-ad-bg */
    --edu-ad-border: #c98a1a;    /* 3,1:1 к фону страницы — граница интерфейса */
    --edu-star: #a14e00;         /* 6,0:1 к белому; цвет — не носитель смысла, рядом всегда число */
    --edu-skeleton: #e6e8ec;
}
@media (prefers-color-scheme: dark) {
    :root {
        --edu-ad-bg: #2a2110;
        --edu-ad-fg: #f5cf7a;
        --edu-ad-border: #a9781f;
        --edu-star: #f5b84a;
        --edu-skeleton: #262c35;
    }
}

/* лендинг главной (landing.css) */
:root {
    --edu-hero-bg: #f5f7ff;
    --edu-accent: #6d28d9;
    --edu-glow-1: #6366f1;
    --edu-glow-2: #06b6d4;
    --edu-glow-3: #a855f7;
    --edu-cta-from: #1d4ed8;
    --edu-cta-to: #6d28d9;
    --edu-cta-fg: #ffffff;
    --edu-surface-raised: #ffffff;
    --edu-shadow-lg: 0 1px 2px rgb(17 24 39 / .06), 0 12px 32px -8px rgb(30 41 99 / .18);
    --edu-radius-lg: 16px;
    --edu-space-16: 4rem;
    --edu-space-20: 5rem;
    --edu-tint-1-bg: #e8efff; --edu-tint-1-ink: #1e40af;
    --edu-tint-2-bg: #f1eaff; --edu-tint-2-ink: #5b21b6;
    --edu-tint-3-bg: #dcf5f1; --edu-tint-3-ink: #115e59;
    --edu-tint-4-bg: #ffe8ee; --edu-tint-4-ink: #9f1239;
    --edu-tint-5-bg: #e0f2fe; --edu-tint-5-ink: #075985;
    --edu-tint-6-bg: #eaf5d9; --edu-tint-6-ink: #3f6212;
    --edu-tint-7-bg: #e8eaff; --edu-tint-7-ink: #3730a3;
    --edu-tint-8-bg: #eef1f5; --edu-tint-8-ink: #334155;
}
@media (prefers-color-scheme: dark) {
    :root {
        --edu-hero-bg: #0b1020;
        --edu-accent: #c4b5fd;
        --edu-glow-1: #4f46e5;
        --edu-glow-2: #0e7490;
        --edu-glow-3: #7e22ce;
        --edu-cta-from: #1e3a8a;
        --edu-cta-to: #4c1d95;
        --edu-cta-fg: #ffffff;
        --edu-surface-raised: #161b26;
        --edu-shadow-lg: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -8px rgb(0 0 0 / .6);
        --edu-tint-1-bg: #16213d; --edu-tint-1-ink: #a9c1ff;
        --edu-tint-2-bg: #221a3d; --edu-tint-2-ink: #cdb8ff;
        --edu-tint-3-bg: #0f2a2a; --edu-tint-3-ink: #7fdcd0;
        --edu-tint-4-bg: #33161f; --edu-tint-4-ink: #ffadc0;
        --edu-tint-5-bg: #0f2537; --edu-tint-5-ink: #8fd3ff;
        --edu-tint-6-bg: #1c2a12; --edu-tint-6-ink: #bfe48a;
        --edu-tint-7-bg: #1b1d3f; --edu-tint-7-ink: #b4b8ff;
        --edu-tint-8-bg: #1d232c; --edu-tint-8-ink: #cbd5e1;
    }
}