/* Hallmark · genre: editorial (утилитарный регистр) · macrostructure: Index-First
 * theme: Almanac · nav: N3 side-rail (рабочий вариант) · footer: Ft4 dense colophon
 * enrichment: none — типографика и данные
 * anchor hue: 250 (холодный синий) · accent footprint: < 3%
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * Осознанный пивот с изученной DNA (Google Sites) на Almanac: из источника
 * перенесены только институциональный синий и решётка плиток. См. DESIGN.md §3.
 *
 * ЕДИНСТВЕННОЕ место, где объявляются цвета, шрифты и ритм.
 * В app.css не должно быть ни одного сырого oklch/hex и ни одного font-family.
 */

/* ------------------------------------------------------------------ шрифты
 * Локально. Google Fonts CDN в РФ может не открыться, а портал должен
 * работать всегда.
 *
 * Montserrat — фирменный шрифт колледжа, им набран старый сайт.
 *
 * По одному файлу на начертание: кириллица, цифры и латиница в одном
 * подмножестве. Готовые файлы Google разбиты на cyrillic/latin, и латиница
 * подтягивалась бы на каждой странице ради цифр в датах — лишние ~180 КБ.
 *
 * Сборка: scripts/fetch-fonts.py
 */

/* Montserrat 400 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00BB, U+0401, U+0410-044F, U+0451, U+0490-0491, U+2010-201F, U+2026, U+2030, U+20BD, U+2116;
}

/* Montserrat 500 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00BB, U+0401, U+0410-044F, U+0451, U+0490-0491, U+2010-201F, U+2026, U+2030, U+20BD, U+2116;
}

/* Montserrat 600 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00BB, U+0401, U+0410-044F, U+0451, U+0490-0491, U+2010-201F, U+2026, U+2030, U+20BD, U+2116;
}

/* Montserrat 700 */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00BB, U+0401, U+0410-044F, U+0451, U+0490-0491, U+2010-201F, U+2026, U+2030, U+20BD, U+2116;
}

/* Montserrat 400 курсив */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00BB, U+0401, U+0410-044F, U+0451, U+0490-0491, U+2010-201F, U+2026, U+2030, U+20BD, U+2116;
}

:root {
  /* Montserrat — фирменный шрифт колледжа: им набран старый сайт, педагоги
   * узнают ресурс в том числе по нему. Одно семейство на весь портал —
   * устав разрешает до двух, но второе тут нечем оправдать.
   *
   * Роль меток берут прописные с разрядкой, роль цифр — tabular-nums. */
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* ------------------------------------------------------- светлая тема */

  --color-paper: oklch(97% 0.006 250);
  --color-paper-2: oklch(94% 0.008 250);
  --color-paper-3: oklch(91% 0.010 250);
  --color-rule: oklch(84% 0.010 250);
  --color-rule-2: oklch(72% 0.012 250);

  --color-neutral: oklch(58% 0.010 250);
  --color-muted: oklch(44% 0.012 250);
  --color-ink: oklch(20% 0.012 250);

  --color-accent: oklch(52% 0.170 250);
  --color-accent-hover: oklch(44% 0.175 250);
  --color-accent-weak: oklch(92% 0.030 250);
  /* Мелкий текст акцентом: счётчики, пометка «новое». Основной акцент
   * осветлён ради живого вида и на мелком кегле не добирает 4.5:1. */
  --color-accent-text: oklch(45% 0.160 250);
  --color-focus: oklch(52% 0.180 250);
  --color-on-accent: oklch(98% 0.005 250);

  --color-warn: oklch(50% 0.120 70);   /* затемнён до 4.5:1 на бумаге */
  --color-warn-weak: oklch(94% 0.040 85);
  --color-danger: oklch(52% 0.170 28);
  --color-danger-weak: oklch(94% 0.030 28);
  --color-success: oklch(48% 0.110 155);
  --color-success-weak: oklch(94% 0.030 155);

  --color-overlay: oklch(20% 0.012 250 / 0.44);

  /* Тёмная полоса под сеткой плиток и затемнение фото-героев —
   * узнаваемый приём со старого сайта. */
  --color-band: oklch(23% 0.008 250);
  --color-band-2: oklch(28% 0.010 250);
  --color-on-band: oklch(97% 0.004 250);
  --scrim-hero: oklch(18% 0.020 250 / 0.58);
  --scrim-tile: oklch(16% 0.020 250 / 0.42);

  /* ------------------------------------------------------------ ритм */

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --------------------------------------------------------- кегли
   * Малая терция (1.25). Заголовок страницы не крупнее --text-3xl:
   * это рабочий инструмент, а не афиша. */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --measure: 68ch;

  /* -------------------------------------------- линии, радиусы, тени
   * Радиус разный по роли — одинаковое скругление у всего запрещено. */

  --rule-hair: 1px;
  --rule-bold: 2px;

  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-full: 999px;

  --shadow-whisper: 0 1px 2px oklch(20% 0.012 250 / 0.06);
  --shadow-raised: 0 4px 16px oklch(20% 0.012 250 / 0.10);

  /* -------------------------------------------------------- движение */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* ------------------------------------------------------------ слои */

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;

  /* ------------------------------------------------------- измерения */

  --rail-width: 15.5rem;
  /* Свёрнутое меню: узкая полоса под кнопку возврата. */
  --rail-width-collapsed: 2.75rem;
  --content-max: 68rem;
}

/* --------------------------------------------------------------- тёмная
 * Тональность не меняется — движутся только светлота и цветность.
 * Приподнятые плоскости светлее, а не темнее.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="a11y"]) {
    --color-paper: oklch(15% 0.010 250);
    --color-paper-2: oklch(19% 0.012 250);
    --color-paper-3: oklch(23% 0.012 250);
    --color-rule: oklch(30% 0.012 250);
    --color-rule-2: oklch(40% 0.014 250);

    --color-neutral: oklch(62% 0.012 250);
    --color-muted: oklch(74% 0.010 250);
    --color-ink: oklch(93% 0.008 250);

    --color-accent: oklch(70% 0.120 250);
    --color-accent-hover: oklch(78% 0.110 250);
    --color-accent-weak: oklch(28% 0.045 250);
    --color-accent-text: oklch(76% 0.110 250);
    --color-focus: oklch(74% 0.140 250);
    --color-on-accent: oklch(15% 0.012 250);

    --color-warn: oklch(76% 0.120 75);
    --color-warn-weak: oklch(27% 0.045 75);
    --color-danger: oklch(68% 0.140 28);
    --color-danger-weak: oklch(26% 0.050 28);
    --color-success: oklch(70% 0.100 155);
    --color-success-weak: oklch(25% 0.040 155);

    --color-overlay: oklch(8% 0.010 250 / 0.62);

    --color-band: oklch(11% 0.008 250);
    --color-band-2: oklch(16% 0.010 250);
    --color-on-band: oklch(93% 0.008 250);
    --scrim-hero: oklch(10% 0.015 250 / 0.68);
    --scrim-tile: oklch(10% 0.015 250 / 0.52);

    --shadow-whisper: 0 1px 2px oklch(0% 0 0 / 0.30);
    --shadow-raised: 0 4px 16px oklch(0% 0 0 / 0.44);
  }
}

/* Явный выбор педагога перекрывает системный. */
:root[data-theme="dark"] {
  --color-paper: oklch(15% 0.010 250);
  --color-paper-2: oklch(19% 0.012 250);
  --color-paper-3: oklch(23% 0.012 250);
  --color-rule: oklch(30% 0.012 250);
  --color-rule-2: oklch(40% 0.014 250);

  --color-neutral: oklch(62% 0.012 250);
  --color-muted: oklch(74% 0.010 250);
  --color-ink: oklch(93% 0.008 250);

  --color-accent: oklch(70% 0.120 250);
  --color-accent-hover: oklch(78% 0.110 250);
  --color-accent-weak: oklch(28% 0.045 250);
  --color-accent-text: oklch(76% 0.110 250);
  --color-focus: oklch(74% 0.140 250);
  --color-on-accent: oklch(15% 0.012 250);

  --color-warn: oklch(76% 0.120 75);
  --color-warn-weak: oklch(27% 0.045 75);
  --color-danger: oklch(68% 0.140 28);
  --color-danger-weak: oklch(26% 0.050 28);
  --color-success: oklch(70% 0.100 155);
  --color-success-weak: oklch(25% 0.040 155);

  --color-overlay: oklch(8% 0.010 250 / 0.62);

  --color-band: oklch(11% 0.008 250);
  --color-band-2: oklch(16% 0.010 250);
  --color-on-band: oklch(93% 0.008 250);
  --scrim-hero: oklch(10% 0.015 250 / 0.68);
  --scrim-tile: oklch(10% 0.015 250 / 0.52);

  --shadow-whisper: 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow-raised: 0 4px 16px oklch(0% 0 0 / 0.44);
}

/* ------------------------------------------- версия для слабовидящих
 * ГОСТ Р 52872-2019. Не отдельный сайт, а переопределение токенов:
 * контраст ≥ 7:1, крупный кегль, плотные линии, изображения скрыты.
 */

:root[data-theme="a11y"] {
  --color-paper: oklch(99% 0 0);
  --color-paper-2: oklch(99% 0 0);
  --color-paper-3: oklch(92% 0 0);
  --color-rule: oklch(20% 0 0);
  --color-rule-2: oklch(10% 0 0);

  --color-neutral: oklch(28% 0 0);
  --color-muted: oklch(22% 0 0);
  --color-ink: oklch(10% 0 0);

  --color-accent: oklch(32% 0.150 250);
  --color-accent-hover: oklch(22% 0.140 250);
  --color-accent-weak: oklch(93% 0.030 250);
  --color-accent-text: oklch(30% 0.150 250);
  --color-focus: oklch(32% 0.180 250);
  --color-on-accent: oklch(99% 0 0);

  --color-warn: oklch(38% 0.130 60);
  --color-warn-weak: oklch(95% 0.030 75);
  --color-danger: oklch(36% 0.170 28);
  --color-danger-weak: oklch(95% 0.025 28);
  --color-success: oklch(34% 0.110 155);
  --color-success-weak: oklch(95% 0.025 155);

  --text-xs: 1rem;
  --text-sm: 1.125rem;
  --text-base: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.5rem;

  --leading-body: 1.75;
  --measure: 60ch;

  --rule-hair: 2px;
  --rule-bold: 3px;

  --color-band: oklch(99% 0 0);
  --color-band-2: oklch(92% 0 0);
  --color-on-band: oklch(10% 0 0);
  --scrim-hero: oklch(99% 0 0 / 1);
  --scrim-tile: oklch(99% 0 0 / 1);

  --shadow-whisper: none;
  --shadow-raised: none;
}