/* ── Дизайн-система кабинетов: токены ───────────────────────────────────────────
   Слой 1 из 4: значения. Здесь нет ни одного правила оформления — только
   переменные, на которые ссылаются остальные слои.

   Почему собственный слой, а не сборщик стилей. Система работает в закрытом
   контуре: внешние источники недоступны, а любой шаг сборки, требующий Node или
   отдельного двоичного файла, ломает `dotnet build` там, где этого файла нет.
   Переменные CSS дают то же, ради чего берут сборщик, — единый источник значений
   и тёмную тему одним переопределением, — и при этом собираются самим браузером.

   Правило пользования: страницы и компоненты обращаются к переменным, а не к
   готовым цветам. Литерал цвета в разметке или в компоненте — дефект: его нельзя
   починить в тёмной теме и нельзя проверить на контраст в одном месте.

   У каждого смыслового цвета три роли:
     --c-<смысл>          цвет текста и границы на обычной поверхности;
     --c-<смысл>-solid    заливка кнопки или метки, поверх неё --c-on-<смысл>;
     --c-<смысл>-soft     мягкая подложка, поверх неё --c-<смысл>-on-soft.
   Разделение нужно, потому что цвет, читаемый как текст, почти никогда не
   читаем как подложка под белыми буквами. */

:root {
    /* Светлая тема — значения по умолчанию. Тёмная переопределяет их ниже,
       поэтому любой новый токен обязан появиться в обоих наборах. */
    color-scheme: light dark;

    /* ── Поверхности и границы ─────────────────────────────────────────────── */
    --c-bg: #f5f7fa;
    --c-surface: #ffffff;
    --c-surface-sunken: #eef1f5;
    --c-surface-raised: #ffffff;
    --c-border: #dde2e9;
    --c-border-strong: #b9c1cc;

    /* ── Текст ─────────────────────────────────────────────────────────────────
       Приглушённый текст проверен на контраст с обеими поверхностями и проходит
       порог 4.5:1: «серенькое пояснение» читают не только те, у кого хорошее
       зрение и хороший монитор. */
    --c-text: #131720;
    --c-text-muted: #55606f;

    /* ── Смысловые цвета ───────────────────────────────────────────────────── */
    --c-accent: #2450c8;
    --c-accent-hover: #1c3fa2;
    --c-accent-solid: #2450c8;
    --c-accent-solid-hover: #1c3fa2;
    --c-on-accent: #ffffff;
    --c-accent-soft: #e8eeff;
    --c-accent-on-soft: #1c3fa2;

    --c-success: #17754a;
    --c-success-solid: #17754a;
    --c-on-success: #ffffff;
    --c-success-soft: #e3f3ea;
    --c-success-on-soft: #115a39;

    --c-warning: #8a5300;
    --c-warning-solid: #8a5300;
    --c-on-warning: #ffffff;
    --c-warning-soft: #fcf0da;
    --c-warning-on-soft: #7a4900;

    --c-danger: #bc2038;
    --c-danger-solid: #bc2038;
    --c-danger-solid-hover: #97182c;
    --c-on-danger: #ffffff;
    --c-danger-soft: #fdeaee;
    --c-danger-on-soft: #a01a2f;

    --c-neutral-soft: #eef1f5;
    --c-neutral-on-soft: #47515f;

    /* ── Боковое меню ──────────────────────────────────────────────────────────
       Меню держит собственный набор: оно тёмное в обеих темах, и подставлять
       туда общие цвета текста нельзя. */
    --c-nav-bg: #141a24;
    --c-nav-text: #cdd5e0;
    --c-nav-text-strong: #ffffff;
    --c-nav-hover: rgba(255, 255, 255, 0.08);
    --c-nav-active: rgba(255, 255, 255, 0.16);
    --c-nav-border: rgba(255, 255, 255, 0.12);

    /* ── Тёмные полосы посадочной страницы ───────────────────────────────────
       Первый экран, призыв ко входу в конце и подвал посадочной страницы тёмные
       в обеих темах — по тому же праву, что и боковое меню: это «рама» страницы,
       а не её текст. Внутри полосы эти значения подставляются вместо общих
       (--c-bg, --c-text и т. д.), и кнопки, ссылки и фокус выглядят верно без
       отдельных правил. Контраст проверен на фоне и на поверхности полосы:
       основной текст — выше 15:1, приглушённый и акцент — выше 7.5:1. */
    --c-ink-bg: #0b0f16;
    --c-ink-surface: #121926;
    --c-ink-surface-sunken: #0e141e;
    --c-ink-border: #243044;
    /* Сильная граница — рамка вторичной кнопки: 3:1 к фону полосы, чтобы
       кнопка читалась кнопкой, а не надписью. */
    --c-ink-border-strong: #5b6d8c;
    --c-ink-text: #e8edf5;
    --c-ink-muted: #a3afc0;
    --c-ink-accent: #8fb0ff;
    --c-ink-accent-hover: #b0c8ff;
    /* Заливка главной кнопки на полосе светлее, чем на странице: белый текст
       на ней — 4.6:1, сама кнопка — выше 4:1 к фону полосы. */
    --c-ink-accent-solid: #3f6fe0;
    --c-ink-accent-solid-hover: #3563d8;
    --c-ink-focus: #8ab4ff;
    /* Точки сетки узлов на фоне первого экрана: рисунок, а не текст, и потому
       нарочно едва заметен. */
    --c-ink-grid: rgba(143, 176, 255, 0.16);
    --c-ink-glow: rgba(63, 111, 224, 0.28);
    /* Строковые значения в схеме выписки: второй цвет подсветки, чтобы ключ
       и значение различались не только положением. */
    --c-ink-string: #8fd9b6;

    /* ── Фокус ─────────────────────────────────────────────────────────────────
       Отдельный токен, а не цвет акцента: обводка фокуса обязана быть видна и на
       кнопке цвета акцента, где акцент слился бы с заливкой. */
    --c-focus: #0b57d0;

    /* ── Типографика ───────────────────────────────────────────────────────────
       Только системные шрифты: закрытый контур не даёт скачать веб-шрифт, а
       локальная копия чужой гарнитуры — лишние сотни килобайт в образе и вопрос
       о лицензии. Порядок перечисления даёт кириллицу на всех целевых системах. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
        "Liberation Sans", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono",
        Consolas, monospace;

    /* Шкала кегля. Крупные размеры заданы через clamp: на телефоне заголовок не
       съедает экран, на широком мониторе не выглядит подписью. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
    --fs-2xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);

    --lh-tight: 1.25;
    --lh-normal: 1.55;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* Предельная длина строки текста: после ~70 знаков глаз теряет начало
       следующей строки. */
    --measure: 68ch;

    /* ── Шкала отступов ────────────────────────────────────────────────────────
       Шаг 4 пикселя. Промежуточных значений нет намеренно: «почти как рядом, но
       на два пикселя иначе» — самый частый источник неряшливой вёрстки. */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /* ── Скругления и тени ─────────────────────────────────────────────────── */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.07);
    --sh-2: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.05);

    /* ── Размеры каркаса ───────────────────────────────────────────────────── */
    --w-sidebar: 16.5rem;
    --w-content: 76rem;
    --h-topbar: 3.5rem;

    /* Наименьшая цель нажатия. На телефоне пальцем в мелкую ссылку не попасть,
       поэтому размер задан токеном и применяется ко всем нажимаемым элементам. */
    --tap: 2.75rem;

    --t-fast: 120ms ease;
    --t-slow: 200ms ease;
}

/* ── Тёмная тема ───────────────────────────────────────────────────────────────
   Тема следует настройке системы и не требует ни переключателя, ни хранения
   выбора: переключатель означал бы сценарий на JavaScript и запись состояния,
   а системная настройка уже выражает выбор человека — в том числе выбор,
   сделанный по медицинским причинам.

   Цвета подобраны заново, а не «затемнены»: на тёмном фоне тот же оттенок
   выглядит и темнее, и грязнее. */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #0e1218;
        --c-surface: #161b23;
        --c-surface-sunken: #10151c;
        --c-surface-raised: #1b212b;
        --c-border: #29313c;
        --c-border-strong: #3c4653;

        --c-text: #e7eaf0;
        --c-text-muted: #a1acbb;

        --c-accent: #86a9ff;
        --c-accent-hover: #a5c0ff;
        --c-accent-solid: #3f6fe0;
        --c-accent-solid-hover: #5583ec;
        --c-accent-soft: #1a2540;
        --c-accent-on-soft: #b3c8ff;

        --c-success: #58cd93;
        --c-success-solid: #1d7a4e;
        --c-success-soft: #10281d;
        --c-success-on-soft: #7fdcae;

        --c-warning: #e3b262;
        --c-warning-solid: #7a4900;
        --c-warning-soft: #2a2013;
        --c-warning-on-soft: #efc684;

        --c-danger: #ff8296;
        --c-danger-solid: #b02135;
        --c-danger-solid-hover: #c62a40;
        --c-danger-soft: #2e1620;
        --c-danger-on-soft: #ff9dad;

        --c-neutral-soft: #1e242d;
        --c-neutral-on-soft: #b3bdca;

        --c-nav-bg: #0a0e14;
        --c-nav-text: #b8c2d0;
        --c-nav-border: rgba(255, 255, 255, 0.09);

        /* Полосы посадочной страницы темнее самой страницы: иначе в тёмной
           теме первый экран сливается с остальным текстом. */
        --c-ink-bg: #07090e;
        --c-ink-surface: #0f141d;
        --c-ink-surface-sunken: #0b1017;

        --c-focus: #8ab4ff;

        --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
        --sh-2: 0 6px 18px rgba(0, 0, 0, 0.55);
    }
}