/* Токены темы и базовые стили страниц авторизации.
 *
 * Источник значений — семантические токены проектов-соседей:
 *   - account (личный кабинет): src/theme/tokens.js
 *   - schedulecit (расписание): src/theme/tokens.ts
 * Оба сервиса и авторизация живут на *.vstu.by и делят одну cookie
 * темы vstu-theme, поэтому палитра здесь должна совпадать с ними
 * буквально: пользователь переходит между сервисами и не должен
 * замечать смены оттенков.
 *
 * Правила:
 *   1) Цвет задаётся ТОЛЬКО здесь, в компонентах — var(--app-*, fallback).
 *   2) Базовая схема (:root без атрибута) — ТЁМНАЯ: страницы редизайна
 *      рассчитаны на неё, а скрипт theme.js до первой отрисовки ставит
 *      data-theme="light", если в cookie выбрана светлая тема.
 *      Без JS страница остаётся тёмной (для входа JS всё равно нужен).
 *   3) Значения light/dark не вычисляются в рантайме — только константы.
 */

:root {
    color-scheme: dark;

    /* Фон приложения и поверхности */
    --app-bg: #171a21;
    --app-surface: #1d212a;
    --app-surface-raised: #232936;
    --app-surface-sunken: #12151b;

    /* Шапка / меню / акцентные полосы */
    --app-chrome: #232936;
    --app-chrome-text: #ffffff;
    --app-chrome-border: #3a4256;
    --app-chrome-control: #5f7493;
    --app-chrome-control-hover: #6f85ab;

    /* Текст */
    --app-text: #f3f4f7;
    --app-text-muted: #9ea7bd;
    --app-text-on-chrome: #ffffff;

    /* Акцент (ссылки, активные элементы) */
    --app-accent: #9db0d8;
    --app-accent-hover: #b6c7e4;
    --app-accent-soft: rgba(157, 176, 216, 0.16);

    /* Первичная кнопка (filled). Заливка остаётся брендовой: акцент в
       тёмной схеме — это цвет ТЕКСТА, белым по нему текст не читается. */
    --app-primary-bg: #434c63;
    --app-primary-bg-hover: #5a6480;
    --app-primary-soft: #232936;
    --app-primary-soft-hover: #2e3646;
    --app-primary-soft-text: #b6c7ea;

    /* Границы и заливки */
    --app-border: #2f3646;
    --app-border-strong: #414a60;
    --app-hover: #252b39;
    --app-row-alt: #212734;
    --app-row-even: #1d212a;
    --app-row-hover: #2e3646;

    /* Состояния */
    --app-danger: #ff8787;
    --app-warning: #ffa94d;
    --app-success: #69db7c;
    --app-shadow: rgba(0, 0, 0, 0.45);
    /* Заливка под белый текст у «опасных» кнопок. --app-danger в тёмной
       схеме — светлый оттенок (цвет ТЕКСТА), белым по нему текст не
       читается (2.13:1), поэтому заливка отдельная: #ffffff по ней 5.93:1. */
    --app-danger-solid: #b83232;
    --app-danger-solid-hover: #a02a2a;

    /* Радиусы и тени карточек (как в личном кабинете/расписании) */
    --app-radius: 20px;
    --app-radius-sm: 10px;
}

:root[data-theme="light"] {
    color-scheme: light;

    --app-bg: #f7f9fc;
    --app-surface: #ffffff;
    --app-surface-raised: #ffffff;
    --app-surface-sunken: #f0f3f8;

    --app-chrome: #434c63;
    --app-chrome-text: #ffffff;
    --app-chrome-border: #5f7493;
    --app-chrome-control: #5f7493;
    --app-chrome-control-hover: #4d5f7d;

    --app-text: #252a37;
    --app-text-muted: #5d6989;
    --app-text-on-chrome: #ffffff;

    --app-accent: #434c63;
    --app-accent-hover: #333b4e;
    --app-accent-soft: rgba(67, 76, 99, 0.22);

    --app-primary-bg: #434c63;
    --app-primary-bg-hover: #31394b;
    --app-primary-soft: #eef1f6;
    --app-primary-soft-hover: #e3e6ef;
    --app-primary-soft-text: #434c63;

    --app-border: #dfe4ec;
    --app-border-strong: #c4ccd8;
    --app-hover: #eef1f6;
    --app-row-alt: #f8fafd;
    --app-row-even: #ffffff;
    --app-row-hover: #f1f5fb;

    --app-danger: #c92a2a;
    --app-warning: #b8531a;
    --app-success: #20682e;
    --app-shadow: rgba(26, 33, 52, 0.12);
    /* В светлой схеме --app-danger сам по себе заливка: белым по ней 5.46:1. */
    --app-danger-solid: #c92a2a;
    --app-danger-solid-hover: #a82121;
}

/* ---- База ---- */

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

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-text);
    /* Плавный переход при смене темы — иначе переключение «дёрганое». */
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

a {
    color: var(--app-accent);
    transition: color 0.15s ease;
}

a:hover {
    color: var(--app-accent-hover);
}

/* Доступность: видимый фокус с клавиатуры (в проекте-референсе ему
   тоже уделено внимание). */
:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

/* Полоса прокрутки.
 *
 * 1) Место под вертикальную прокрутку резервируется ВСЕГДА. Иначе, когда
 *    полоса появляется/исчезает (в том числе из-за смены color-scheme на
 *    системах, где светлая и тёмная схемы рисуют разные типы скроллбара),
 *    центрированная карточка входа сдвигается по горизонтали — это и есть
 *    «прыжок» при смене темы. Ровно так же сделано в schedulecit
 *    (App.module.css, .layoutChild).
 * 2) Полоса одинаковая и тонкая в обеих схемах, поэтому смена темы не
 *    меняет ширину контента:
 *      - Firefox и Chromium 121+ — стандартные scrollbar-width/-color;
 *      - более старый Chromium — запасной ::-webkit-scrollbar ниже.
 *    Стандартные свойства заодно заставляют Chromium рисовать классический
 *    (занимающий место) скроллбар, а не overlay, — тогда gutter выше точно
 *    совпадает с реальной полосой. */
html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--app-chrome) var(--app-surface-sunken);
}

/* Запасной вариант для Chromium без scrollbar-color/-width (как в account
   и schedulecit). */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--app-surface-sunken);
}

::-webkit-scrollbar-thumb {
    background: var(--app-chrome);
    border-radius: 8px;
}

/* ---- Общие элементы форм (форма входа, поиск, подтверждение) ---- */

.field-input {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    font-size: 16px;
    color: var(--app-text);
    background-color: var(--app-surface-sunken);
    border: 2px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    transition: border-color 0.15s ease, background-color 0.2s ease, box-shadow 0.15s ease;
}

.field-input::placeholder {
    color: var(--app-text-muted);
}

.field-input:focus {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    font-size: 17px;
    font-family: inherit;
    text-decoration: none;
    border: none;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.btn-primary {
    color: #ffffff;
    background-color: var(--app-primary-bg);
    box-shadow: 2px 3px 5px 1px var(--app-shadow);
}

.btn-primary:hover {
    color: #ffffff;
    background-color: var(--app-primary-bg-hover);
    text-decoration: none;
}

.btn-danger {
    color: #ffffff;
    background-color: var(--app-danger-solid);
}

.btn-danger:hover {
    color: #ffffff;
    background-color: var(--app-danger-solid-hover);
    text-decoration: none;
}