/* Паспорт оформления в машинном виде (правка 433). Единственное место, где живут значения оформления:
   цвета, шрифты, кегли, межстрочные, отступы, радиусы, тени, размеры органов управления, точки перелома.
   Словами то же самое — docs/design/style.md; макеты — docs/design/.

   Подключается ПЕРВЫМ на каждой странице, до app.css и файлов страниц. Ни один другой файл не заводит
   ни цвета, ни кегля — это закреплено тестом tests/test_web_design.py.

   Цвета и шрифт — по макету главной docs/design/main-page.png (правка 432). */

/* Основной шрифт — Onest (правка 432, решение владельца): локальный woff2, лицензия SIL OFL рядом с файлом.
   Вариативный, начертания 100–900 одним файлом. Знаков π, √, ∠, ∥ в нём нет — их браузер берёт из следующих шрифтов
   списка. Внешних загрузок шрифта со страниц нет. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/Onest.woff2) format('woff2');
}
:root {
  color-scheme: light;

  /* --- Цвета: роли, а не оттенки --- */
  /* Правка 432: значения макета главной — фон голубее, текст темнее, акцент холоднее и ярче. */
  --bg: #e9f2fd; --surface: #ffffff; --surface2: #f6f9fe;
  --ink: #0d1327; --ink2: #5b6491; --ink3: #6f7ea3; --line: #dde3ef; --line-strong: #aab6cd;
  --accent: #6443f9; --accent-ink: #ffffff; --accent-soft: #eceafd; --accent-deep: #4a32c8;
  --active: #c7f582; --active-ink: #172238;
  --ok: #285719; --ok-soft: #eef7e8;
  --warn: #944115; --warn-soft: #fff0e6; --warn-line: #c9502b;
  --header: #142037; --header-ink: #ffffff; --header-muted: #b8c5df; --header-line: #3d4a66; --header-tab: #e3e9f7;
  --stage: #172239; --stage-ink: #e6efff; --stage-muted: #b6c7e4; --stage-grid: #33415a;
  --focus: #7a5cff; --focus-soft: #dcd4fe;
  --shadow: 0 12px 34px #182f5010; --shadow-bar: 0 6px 18px #14264210;
  /* Пастельные плитки иконок (правка 432): у каждого предмета и каждой выгоды на главной — своя пара «фон / знак». */
  --tile-geometry: #ebe8fe; --tile-geometry-ink: #3f2bb8;
  --tile-algebra: #e6f8e1; --tile-algebra-ink: #1d5a2c;
  --tile-physics: #fee4cf; --tile-physics-ink: #8a3d10;
  --tile-chemistry: #eae6fd; --tile-chemistry-ink: #5530b0;
  --tile-explain: #e5f0fd; --tile-explain-ink: #24508f;
  --tile-practice: #e4f7dc; --tile-practice-ink: #2f6a1f;
  --tile-progress: #ebe7fe; --tile-progress-ink: #4a32c8;
  --tile-visual: #e8f5fe; --tile-visual-ink: #1f5f86;
  /* Рукописные надписи и рисунки по краям листа, облачко персонажа */
  --doodle: #8d9bc8; --bubble: #ffffff; --bubble-ink: #22307a; --bubble-line: #3b4a8c;
  /* Урок по макету (правка 293): клетка листа, жёлтый стикер, красноватая плашка, рукописные пометки */
  --paper-grid: #e4e9f4; --sticker: #fff3c4; --sticker-ink: #4a3b12; --sticker-line: #f1dc8c;
  --trap: #b3261e; --trap-soft: #fdeceb; --trap-line: #f5c6c2; --hand: #4b379e; --stage-hand: #c3b8ff; --stage-card: #eeeafa;
  /* Страницы алгебры (правки 413–415) звали те же цвета своими именами — теперь это псевдонимы, не вторая палитра. */
  --paper: var(--bg); --muted: var(--ink2); --card: var(--surface);
  --right: #1f7a3a; --right-soft: #eaf6ee; --wrong: #b3261e; --wrong-soft: #fdecea;
  --draft: #fff4d6; --draft-ink: #6b4e00;

  /* --- Шрифты --- */
  --font-ui: "Onest", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-text: var(--font-ui);
  --font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;

  /* --- Кегли: ступени шкалы. Ими набран весь сайт, менять размер надо здесь, а не в файлах страниц. --- */
  --fs-12: 12px; --fs-12-5: 12.5px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-21: 21px; --fs-22: 22px;
  --fs-23: 23px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-32: 32px;

  /* Роли из макета главной (docs/design/style.md). Экраны переходят на них по мере правки; ступени выше — то,
     чем набрано сейчас. Значения ролей — макетные, поэтому крупнее нынешних. */
  --fs-display: 52px;   /* «Что изучаем?» — заголовок экрана */
  --fs-h1: 32px; --fs-h2: 22px; --fs-h3: 20px;
  --fs-lead: 20px;      /* абзац под заголовком */
  --fs-body: 16px; --fs-small: 15px; --fs-caption: 13px; --fs-micro: 11px;
  --lh-tight: 1.15; --lh-heading: 1.25; --lh-text: 1.5; --lh-loose: 1.6;

  /* --- Отступы: шаг 4 px. Новые экраны берут ступени, а не произвольные числа. --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --gutter: 16px;         /* поле страницы на телефоне */
  --gutter-wide: 24px;    /* поле страницы от 768 px */
  --content-max: 1000px;  /* максимальная ширина содержимого (макет) */

  /* --- Радиусы --- */
  --r-screen: 28px;  /* большая карта экрана в макете */
  --r-card: 20px; --r-panel: 16px; --r-tile: 14px; --r-block: 12px; --r-btn: 10px; --r-input: 9px; --r-pill: 999px;

  /* --- Органы управления: палец не меньше 44 px --- */
  --control-h: 44px; --control-h-sm: 36px; --control-h-xs: 32px;

  /* --- Точки перелома. В @media подставить переменную нельзя, поэтому это справка: числа те же, что в правилах. --- */
  --bp-xs: 320px; --bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; --bp-xxl: 1920px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1426; --surface: #162139; --surface2: #1d2a46;
    --ink: #eaf1ff; --ink2: #b9c6e6; --ink3: #8e9fbd; --line: #2c3a58; --line-strong: #46567a;
    --accent: #a08cff; --accent-ink: #0d1327; --accent-soft: #2a2658; --accent-deep: #d5ccff;
    --active: #c7f582; --active-ink: #172238;
    --ok: #c7f582; --ok-soft: #1f3315;
    --warn: #ffbd8a; --warn-soft: #3a2618; --warn-line: #c9502b;
    --header: #0a0f1c; --header-ink: #ffffff; --header-muted: #b8c5df; --header-line: #39445c; --header-tab: #d9e2f6;
    --stage: #0b1220; --stage-ink: #e6efff; --stage-muted: #b6c7e4; --stage-grid: #33415a;
    --focus: #a08cff; --focus-soft: #3b3470;
    --tile-geometry: #2c2860; --tile-geometry-ink: #d5ccff;
    --tile-algebra: #1d3320; --tile-algebra-ink: #c7f0b8;
    --tile-physics: #3d2718; --tile-physics-ink: #ffcfa6;
    --tile-chemistry: #2f2658; --tile-chemistry-ink: #dccdff;
    --tile-explain: #1b2e4d; --tile-explain-ink: #b9d4ff;
    --tile-practice: #1f3319; --tile-practice-ink: #c7f0b8;
    --tile-progress: #2a2658; --tile-progress-ink: #d5ccff;
    --tile-visual: #183247; --tile-visual-ink: #b4e0ff;
    --doodle: #5d6f9e; --bubble: #1d2a46; --bubble-ink: #eaf1ff; --bubble-line: #8e9fbd;
    --shadow: 0 12px 34px #00000055; --shadow-bar: 0 6px 18px #00000055;
    --paper-grid: #182238; --sticker: #3a3115; --sticker-ink: #ffe9a3; --sticker-line: #5a4a1a;
    --trap: #ffb4ad; --trap-soft: #3a1f1d; --trap-line: #6a2f2a; --hand: #d9d1fb; --stage-hand: #c9bfff; --stage-card: #2a2856;
    --right: #c7f582; --right-soft: #1f3315; --wrong: #ffb4ad; --wrong-soft: #3a1f1d;
    --draft: #3a3115; --draft-ink: #ffe9a3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1426; --surface: #162139; --surface2: #1d2a46;
  --ink: #eaf1ff; --ink2: #b9c6e6; --ink3: #8e9fbd; --line: #2c3a58; --line-strong: #46567a;
  --accent: #a08cff; --accent-ink: #0d1327; --accent-soft: #2a2658; --accent-deep: #d5ccff;
  --active: #c7f582; --active-ink: #172238;
  --ok: #c7f582; --ok-soft: #1f3315;
  --warn: #ffbd8a; --warn-soft: #3a2618; --warn-line: #c9502b;
  --header: #0a0f1c; --header-ink: #ffffff; --header-muted: #b8c5df; --header-line: #39445c; --header-tab: #d9e2f6;
  --stage: #0b1220; --stage-ink: #e6efff; --stage-muted: #b6c7e4; --stage-grid: #33415a;
  --focus: #a08cff; --focus-soft: #3b3470;
  --tile-geometry: #2c2860; --tile-geometry-ink: #d5ccff;
  --tile-algebra: #1d3320; --tile-algebra-ink: #c7f0b8;
  --tile-physics: #3d2718; --tile-physics-ink: #ffcfa6;
  --tile-chemistry: #2f2658; --tile-chemistry-ink: #dccdff;
  --tile-explain: #1b2e4d; --tile-explain-ink: #b9d4ff;
  --tile-practice: #1f3319; --tile-practice-ink: #c7f0b8;
  --tile-progress: #2a2658; --tile-progress-ink: #d5ccff;
  --tile-visual: #183247; --tile-visual-ink: #b4e0ff;
  --doodle: #5d6f9e; --bubble: #1d2a46; --bubble-ink: #eaf1ff; --bubble-line: #8e9fbd;
  --shadow: 0 12px 34px #00000055; --shadow-bar: 0 6px 18px #00000055;
  --paper-grid: #182238; --sticker: #3a3115; --sticker-ink: #ffe9a3; --sticker-line: #5a4a1a;
  --trap: #ffb4ad; --trap-soft: #3a1f1d; --trap-line: #6a2f2a; --hand: #d9d1fb; --stage-hand: #c9bfff; --stage-card: #2a2856;
  --right: #c7f582; --right-soft: #1f3315; --wrong: #ffb4ad; --wrong-soft: #3a1f1d;
  --draft: #3a3115; --draft-ink: #ffe9a3;
}