/* ==========================================================================
   kursy · «Онлайн-курсы и профессии» · токены дизайн-системы
   Концепция: учебная ведомость — бумага, терракотовая «оценка», зелёная школьная доска.
   Описание системы: ../../05-design.md. Префикс переменных и классов — ku.
   Порядок подключения: tokens.css → base.css → components.css → page-*.css.
   Тема одна, светлая. Слои разделяются рамкой и цветом графы: заливки только сплошные,
   объём и размытие в системе не используются.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Golos+Text:wght@400..700&family=Piazzolla:ital,opsz,wght@0,8..30,400..700;1,8..30,400..700&display=swap");

:root {
  color-scheme: light;

  /* --- Цвет: бумага и чернила ------------------------------------------ */
  --ku-bg: #FAF7F0;            /* фон страницы: бумага (зерно) */
  --ku-surface: #FFFDF8;       /* поверхность: лист ведомости, карточки, поля ввода */
  --ku-surface-2: #F1ECDF;     /* графа: шапка таблицы, строка под курсором, плитка логотипа */
  --ku-surface-3: #E6DFCE;     /* тёмная графа: нажатие, отключённые элементы */
  --ku-ink: #1D1D1B;           /* текст и рамки: чернила (зерно) */
  --ku-ink-2: #5C574D;         /* приглушённый текст: подписи, мета, заголовки столбцов */
  --ku-ink-3: #857F72;         /* только нетекстовое: рамки полей, отключённый текст, пустые деления шкалы */
  --ku-line: #DAD3C3;          /* линейка-волосок между строками */
  --ku-line-2: #B9B1A0;        /* усиленная линейка: рамка плитки, разделители в шапке, подписи на тёмной панели */

  /* --- Цвет: терракота, красный карандаш -------------------------------- */
  --ku-accent: #D9480F;        /* акцент (зерно): цифра отметки, росчерк, маркеры, линии. Мелкий текст им не набирать */
  --ku-accent-deep: #B5390A;   /* заливка основной кнопки и мелкий акцентный текст (контраст от 4.5:1) */
  --ku-accent-press: #8F2D07;  /* основная кнопка под курсором и при нажатии */
  --ku-accent-tint: #FBE6DA;   /* подложка: лучшее значение в сравнении, бейдж-номинация */
  --ku-on-accent: #FFFFFF;     /* текст на --ku-accent-deep и --ku-accent-press */

  /* --- Цвет: зелёная доска ---------------------------------------------- */
  --ku-accent2: #1B6B5A;       /* второй акцент (зерно): доска подбора, подвал, выбранные состояния, фокус */
  --ku-accent2-deep: #134E42;  /* тёмная доска: наведение на доске, нижняя полоса подвала, текст на зелёной подложке */
  --ku-accent2-tint: #DDEBE5;  /* подложка выбранного чипа и бейджа «есть» */
  --ku-on-accent2: #FAF7F0;    /* мел: текст на доске */
  --ku-board-muted: #D3E4DD;   /* приглушённый мел: подписи на доске */
  --ku-board-line: #4F8F80;    /* линейка на доске */

  /* --- Цвет: состояния --------------------------------------------------- */
  --ku-success: #2F6B1E;
  --ku-success-tint: #E4EDD9;
  --ku-warning: #8A5300;
  --ku-warning-tint: #FBEFC8;
  --ku-error: #A8182D;
  --ku-error-tint: #F9E1E3;

  /* --- Цвет: служебное ---------------------------------------------------- */
  --ku-focus: var(--ku-accent2);        /* кольцо фокуса на светлом */
  --ku-focus-on-dark: var(--ku-bg);     /* кольцо фокуса на доске и тёмной панели */

  /* --- Шрифты ------------------------------------------------------------- */
  --ku-font-head: "Piazzolla", Georgia, "Times New Roman", serif;
  --ku-font-body: "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
  /* Golos Text стоит вторым не случайно: в Anonymous Pro нет знака ₽, браузер возьмёт его отсюда */
  --ku-font-mono: "Anonymous Pro", "Golos Text", Menlo, Consolas, "Courier New", monospace;

  --ku-fw-regular: 400;
  --ku-fw-medium: 500;
  --ku-fw-semibold: 600;
  --ku-fw-bold: 700;

  /* --- Кегль и интерлиньяж (ширина до 767px) ---------------------------- */
  --ku-fs-h1: 30px;      --ku-lh-h1: 34px;
  --ku-fs-h2: 24px;      --ku-lh-h2: 28px;
  --ku-fs-h3: 20px;      --ku-lh-h3: 26px;
  --ku-fs-h4: 17px;      --ku-lh-h4: 24px;
  --ku-fs-lead: 17px;    --ku-lh-lead: 26px;
  --ku-fs-body: 16px;    --ku-lh-body: 24px;
  --ku-fs-read: 16px;    --ku-lh-read: 26px;   /* длинный текст: статья, SEO-блок */
  --ku-fs-ui: 15px;      --ku-lh-ui: 20px;     /* кнопки, название школы в строке, вкладки, ссылки подвала */
  --ku-fs-small: 14px;   --ku-lh-small: 20px;  /* чипы, поля, мета, пункты панели направлений */
  --ku-fs-note: 13px;    --ku-lh-note: 18px;   /* вторая строка ячейки, крошки, условия в раскрытой строке */
  --ku-fs-micro: 12px;   --ku-lh-micro: 16px;  /* тип школы под названием, подсказки */
  --ku-fs-table: 14px;   --ku-lh-table: 20px;
  --ku-fs-th: 12px;      --ku-lh-th: 16px;     /* на телефоне подписи граф 12px (14.10); от 768px — 11px, см. ниже */     /* подпись графы: моноширинный, прописные; мельче 11px в системе ничего нет */
  --ku-fs-num: 15px;     --ku-lh-num: 20px;    /* цифры в таблице */
  --ku-fs-num-lg: 18px;  --ku-lh-num-lg: 22px; /* цифры на корешке абонемента */
  --ku-fs-num-xl: 20px;  --ku-lh-num-xl: 26px; /* цифры в шапке бланка */
  --ku-fs-mark-sm: 22px; /* цифра отметки в строке таблицы */
  --ku-fs-mark-md: 32px; /* цифра отметки в абонементе и в строке ведомости на телефоне */
  --ku-fs-mark-lg: 56px; /* цифра отметки на обложке зачётки */
  --ku-ls-caps: 0.06em;  /* разрядка прописных подписей */
  --ku-ls-head: -0.01em; /* заголовки h1 и h2 */
  --ku-measure: 72ch;    /* предельная длина строки текста */

  /* --- Сетка -------------------------------------------------------------- */
  --ku-container: 1400px;
  --ku-gutter: 16px;       /* поля контейнера слева и справа */
  --ku-cols: 4;
  --ku-grid-gap: 12px;
  --ku-side-w: 248px;      /* левая панель направлений (работает от 1200px) */
  --ku-section-gap: 40px;  /* расстояние между блоками страницы */
  --ku-block-gap: 20px;    /* расстояние между заголовком блока и его содержимым */

  /* --- Шкала отступов (шаг 4px) ---------------------------------------- */
  --ku-s-1: 4px;
  --ku-s-2: 8px;
  --ku-s-3: 12px;
  --ku-s-4: 16px;
  --ku-s-5: 20px;
  --ku-s-6: 24px;
  --ku-s-8: 32px;
  --ku-s-10: 40px;
  --ku-s-12: 48px;
  --ku-s-16: 64px;
  --ku-s-20: 80px;

  /* --- Формы: радиусы и линии ------------------------------------------- */
  --ku-radius-0: 0;        /* таблицы, карточки, абонементы, панели, бейджи */
  --ku-radius-1: 2px;      /* кнопки, поля, чипы, плитка логотипа */
  --ku-radius-round: 50%;  /* только радиокнопка, выемки абонемента и обводка «красным карандашом» */

  --ku-bw: 1px;
  --ku-bw-2: 2px;
  --ku-bw-mark: 3px;                              /* маркер активного пункта */
  --ku-border: 1px solid var(--ku-ink);           /* рамка листа, карточки, абонемента */
  --ku-border-hair: 1px solid var(--ku-line);     /* линейка между строками */
  --ku-border-control: 1px solid var(--ku-ink-3); /* рамка поля, чипа, флажка: 3:1 к бумаге */
  --ku-rule-double: 3px double var(--ku-ink);     /* двойная линейка под шапкой таблицы и над разделами текста */
  --ku-perf: 1px dashed var(--ku-ink);            /* перфорация абонемента */
  --ku-pencil: 1.5px solid var(--ku-accent);      /* обводка лучшего значения в сравнении, росчерк под отметкой */
  --ku-blank: 1px dashed var(--ku-ink-3);         /* рамка блока «не проверено», отключённый чип, прочерк под «н/а» */
  --ku-leader: 1px dotted var(--ku-ink-3);        /* отточие в оглавлении */
  --ku-outline: 2px solid var(--ku-focus);
  --ku-outline-offset: 2px;

  /* --- Размеры элементов -------------------------------------------------- */
  --ku-h-sm: 32px;        /* кнопка в строке таблицы, чип от 768px, снятый фильтр */
  --ku-h-md: 40px;        /* поле поиска в шапке */
  --ku-h-lg: 48px;        /* кнопка: 48px на телефоне, 44px от 768px */
  --ku-tap: 44px;         /* поле, выпадающий список, чип на телефоне; наименьшая высота зоны нажатия */
  --ku-header-h: 56px;    /* верхняя строка шапки: знак, название, поиск, ссылки */
  --ku-nav-h: 44px;       /* строка разделов под ней (видна от 768px) */
  --ku-bar-h: 56px;       /* высота панели сравнения */
  --ku-row-h: 56px;       /* наименьшая высота строки ведомости */
  --ku-cell-px: 10px;
  --ku-cell-py: 12px;
  --ku-stub-w: 112px;     /* ширина корешка абонемента */
  --ku-notch: 12px;       /* диаметр выемки абонемента */
  --ku-notch-bg: var(--ku-bg); /* цвет выемок = цвет того, на чём лежит абонемент; на графе переопределить */
  --ku-logo-xs: 24px;
  --ku-logo-sm: 32px;
  --ku-logo-md: 40px;
  --ku-logo-lg: 64px;
  --ku-icon-sm: 16px;
  --ku-icon-md: 20px;
  --ku-icon-lg: 24px;
  --ku-icon-stroke: 1.5;  /* толщина линии иконки в сетке 24 */

  /* --- Слои и движение ---------------------------------------------------- */
  --ku-z-sticky: 10;   /* прилипающая шапка таблицы, панель направлений */
  --ku-z-bar: 50;      /* панель сравнения */
  --ku-z-overlay: 100; /* мобильное меню и лист фильтров: открываются на весь экран, затемнения под ними нет */
  --ku-dur: 120ms;     /* только цвет, фон и рамка; сдвигов и появлений нет */
  --ku-ease: ease-out;
}

@media (min-width: 768px) {
  :root {
    --ku-fs-h1: 38px;    --ku-lh-h1: 42px;
    --ku-fs-h2: 28px;    --ku-lh-h2: 32px;
    --ku-fs-h3: 22px;    --ku-lh-h3: 28px;
    --ku-fs-lead: 18px;  --ku-lh-lead: 28px;
    --ku-fs-read: 17px;  --ku-lh-read: 28px;

    --ku-gutter: 24px;
    --ku-cols: 8;
    --ku-grid-gap: 16px;
    --ku-section-gap: 56px;
    --ku-block-gap: 24px;

    --ku-fs-th: 11px;    --ku-lh-th: 14px;
    --ku-h-lg: 44px;
    --ku-stub-w: 148px;
    --ku-bar-h: 64px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ku-fs-h1: 46px;    --ku-lh-h1: 50px;
    --ku-fs-h2: 32px;    --ku-lh-h2: 38px;
    --ku-fs-h3: 24px;    --ku-lh-h3: 30px;
    --ku-fs-h4: 18px;    --ku-lh-h4: 24px;
    --ku-fs-lead: 19px;  --ku-lh-lead: 30px;
    --ku-fs-read: 18px;  --ku-lh-read: 29px;

    --ku-gutter: 32px;
    --ku-cols: 12;
    --ku-grid-gap: 24px;
    --ku-section-gap: 64px;

    --ku-row-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ku-dur: 0ms;
  }
}