/* ============================================================
   tokens.css — Design Tokens, Reset, Base, Globals
   (Scrollbar, Focus-visible, Animations, .hidden)
   ============================================================ */

/* ─── Design Tokens ───────────────────────────────────────── */
:root {
    /* Primary — Refined Slate-Green (вместо синего) */
    --md-primary:            #4a7c6f;
    --md-primary-dark:       #3a6358;
    --md-primary-hover:      #558c7e;
    --md-primary-light:      #eef4f2;
    --md-on-primary:         #ffffff;

    /* Surface */
    --md-surface:            #fafaf9;
    --md-surface-variant:    #f5f4f2;
    --md-surface-container:  #eeece9;
    --md-background:         #f0ede8;

    /* Text */
    --md-on-surface:         #1c1a18;
    --md-on-surface-variant: #4d4a46;
    --md-on-surface-hint:    #9e9a94;

    /* Semantic */
    --md-success:            #4a7c6f;
    --md-success-hover:      #558c7e;
    --md-success-light:      #eef4f2;
    --md-error:              #b85450;
    --md-error-hover:        #c96360;
    --md-error-light:        #fdf0f0;
    --md-warning:            #b07d3a;
    --md-warning-light:      #fdf6ea;

    /* Outline */
    --md-outline:            #d5d2cc;
    --md-outline-variant:    #e8e5e0;

    /* Shape */
    --md-radius-xs:  4px;
    --md-radius-sm:  6px;
    --md-radius-md:  8px;
    --md-radius-lg:  10px;
    --md-radius-xl:  16px;
    --md-radius-full: 9999px;

    /* Motion */
    --md-motion-standard:    cubic-bezier(0.4, 0, 0.2, 1);
    --md-motion-emphasized:  cubic-bezier(0.4, 0, 0.2, 1);
    --md-duration-short:     140ms;
    --md-duration-medium:    220ms;
    --md-duration-long:      360ms;

    /* Typography scale.
       Системные шрифты — без обращения к Google Fonts: проект работает в
       локальной сети без интернета, и любой запрос на googleapis.com
       замораживал рендер на ~5 сек ошибкой ERR_NAME_NOT_RESOLVED.
       Если на хост-машинах добавят 'IBM Plex Sans' локально — он будет
       подхвачен первым в стеке, иначе рендер идёт на Segoe UI / system. */
    --md-font-display: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --md-font-body:    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --md-font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

    /* Breakpoints — конвенция для @media в проекте.
       Сейчас разные файлы используют 560/640/700/720/760/900/1024/1100/1280px
       (исторически). Новые правила пиши по этой шкале:
         - phone     : @media (max-width: 600px)   — телефон
         - tablet    : @media (max-width: 1024px)  — планшет / узкий ноут
         - desktop   : > 1024px                    — обычный экран
       CSS @media не поддерживает var() в условиях, поэтому это конвенция,
       не CSS-переменные. */

    /* Z-index scale.
       Раньше модальные окна и dropdown'ы хардкодили `z-index: 9999`/`1000`
       в каждом файле, что давало непредсказуемый порядок при наложении.
       Шкала ниже задаёт явные уровни — используй переменные вместо чисел. */
    --z-elevated:  1;     /* приподнятые элементы внутри потока */
    --z-sticky:    5;     /* sticky-колонки/шапки таблиц */
    --z-dropdown:  100;   /* выпадающие меню, autocomplete, datalist */
    --z-overlay:   900;   /* затемняющий фон модалки */
    --z-modal:     1000;  /* содержимое модального диалога */
    --z-toast:     1100;  /* snackbar/toast — поверх всего */
}

/* ─── Тёмная тема ────────────────────────────────────────────────────────────
   Активируется атрибутом data-theme="dark" на <html>. Переключатель в шапке
   приложения (см. js/theme_toggle.js) сохраняет выбор в localStorage.
   Перекрываем только цветовые токены — все компоненты в проекте читают их
   через var(--md-*), поэтому тема меняется одной правкой здесь.
   Спец-цвета подсветок ячеек в графике (отпуск/наряд/выходные) намеренно
   оставлены прежними: их контрастность важнее тематической согласованности.
   ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --md-primary:            #6ba89a;
    --md-primary-dark:       #87bcb0;
    --md-primary-hover:      #87bcb0;
    --md-primary-light:      #1f3530;
    --md-on-primary:         #0f1a17;

    --md-surface:            #1f2124;
    --md-surface-variant:    #26282c;
    --md-surface-container:  #2d3034;
    --md-background:         #15171a;

    --md-on-surface:         #e8e6e2;
    --md-on-surface-variant: #b6b3ad;
    --md-on-surface-hint:    #7c7872;

    --md-success:            #6ba89a;
    --md-success-hover:      #87bcb0;
    --md-success-light:      #1f3530;
    --md-error:              #d97870;
    --md-error-hover:        #e89388;
    --md-error-light:        #3a1f1d;
    --md-warning:            #d4a060;
    --md-warning-light:      #3a2c18;

    --md-outline:            #3f4348;
    --md-outline-variant:    #2d3034;
}

/* Темнее scrollbar в тёмной теме — иначе он почти невидим. */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb        { background: #3f4348; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover  { background: #565a60; }

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--md-font-body);
    background-color: var(--md-background);
    color: var(--md-on-surface);
    line-height: 1.5;
    min-height: 100vh;
}

.hidden { display: none !important; }

/* ─── Animations ──────────────────────────────────────────── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page > * {
    animation: fade-in-up var(--md-duration-long) var(--md-motion-emphasized) both;
}

.page > *:nth-child(1) { animation-delay: 0ms; }
.page > *:nth-child(2) { animation-delay: 40ms; }
.page > *:nth-child(3) { animation-delay: 80ms; }

/* ─── Scrollbar global ────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bab6b0; }


/* ─── Focus visible (a11y) ────────────────────────────────── */
/* Многие компоненты исторически делают `outline: none` для своих :focus
   состояний (выглядит чище при клике мышью). Это ломает клавиатурную
   навигацию: пользователь, идущий по Tab, не видит, на каком элементе
   находится фокус. !important здесь — намеренный override accessibility
   поверх компонентных стилей; для мыши outline не появляется, потому
   что :focus-visible срабатывает только при keyboard-focus. */
:focus-visible {
    outline: 2px solid var(--md-primary) !important;
    outline-offset: 2px;
}