/* ─────────────────────────────────────────────────────────────────────
   «Работа Мечты» — дизайн-система «Маршрут», токены.

   Одна тема, светлая. Имена переменных совпадают с прежним app.css
   там, где роль та же, чтобы разметку не приходилось переучивать.
   Контраст в комментариях посчитан по WCAG 2.1 на том фоне, где цвет
   реально стоит.
   ───────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Поверхности */
    --page:            #ffffff;  /* фон страницы; разделы разделяются воздухом */
    --surface:         #ffffff;
    --surface-sunken:  #f3f5f8;  /* «туман»: меню, группы, поиск */
    --surface-hover:   #eef0f4;  /* наведение на строку */

    /* Текст */
    --text:            #10233f;  /* 15,7:1 на белом */
    --text-secondary:  #3b4a63;  /* 9:1 на белом */
    --text-muted:      #55627a;  /* 6,2:1 на белом, 5,6:1 на тумане */
    --on-accent:       #ffffff;  /* 7:1 на акценте */

    /* Линии */
    --line:            #e3e7ee;  /* разделители, пустая дорожка */
    --route-idle:      #c5cbd6;  /* непройденный путь, ветка отказа; не для текста */
    --border-strong:   #7a869b;  /* рамка поля: 3,7:1 на белом, 3,4:1 на тумане */

    /* Акцент: линия маршрута, главное действие, ссылки */
    --accent:          #3341e0;  /* 7:1 на белом */
    --accent-hover:    #2430b0;
    --accent-wash:     #eef0fd;  /* выбранный фильтр-чип, фокусное кольцо поля */

    /* «Вы здесь»: только отметка «сейчас» на линии времени */
    --now:             #c8127a;  /* 5,5:1 на белом */

    /* Статусы. -mark для точек и колец, -text для текста на -wash */
    --status-good:          #13804b;
    --status-good-text:     #0f6b3e;  /* 5,8:1 на wash */
    --status-good-wash:     #e7f4ed;

    --status-warning:       #a35f00;
    --status-warning-text:  #8a5000;  /* 5,8:1 на wash */
    --status-warning-wash:  #fbf1e1;

    --status-serious:       #b8430f;
    --status-serious-text:  #b8430f;  /* 4,8:1 на wash */
    --status-serious-wash:  #fcede5;

    --status-critical:      #c9252c;
    --status-critical-text: #b01f26;  /* 5,8:1 на wash */
    --status-critical-wash: #fbe8e9;

    /* Типографика: одна гарнитура, характер задают вес и размер */
    --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-hero:  64px;  /* 800, −2px: одно главное число на экран */
    --fs-h1:    44px;  /* 800, −1.2px; на телефоне 36px */
    --fs-num:   32px;  /* 800, −0.5px: вторичные показатели */
    --fs-h2:    24px;  /* 700; на телефоне 22px */
    --fs-h3:    18px;  /* 700 */
    --fs-body:  16px;  /* 400, line-height 1.55 */
    --fs-small: 14px;  /* 500 */
    --fs-micro: 13px;  /* 500, минимум для любого текста */

    --lh-body:  1.55;
    --lh-tight: 1.1;

    /* Отступы, шаг 4 */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;  /* между разделами */
    --space-16: 64px;

    --page-pad-desktop: 56px;
    --page-pad-tablet:  32px;
    --page-pad-phone:   16px;

    /* Радиусы: по иерархии, а не один на всё */
    --radius-pill: 999px;  /* кнопки, чипы, метки, станции */
    --radius-field: 12px;  /* поля ввода */
    --radius-area:  20px;  /* сгруппированные области */
    --radius-sheet: 24px;  /* нижняя панель на телефоне, верхние углы */

    /* Тень только у того, что лежит поверх страницы */
    --shadow-float: 0 16px 40px rgba(16, 35, 63, 0.16), 0 2px 6px rgba(16, 35, 63, 0.08);
    --shadow-bar:   0 10px 30px rgba(16, 35, 63, 0.25);  /* нижнее меню, плеер */

    /* Размеры управления */
    --control-h:        48px;  /* кнопки и поля */
    --control-h-sm:     40px;  /* период, чипы */
    --control-h-phone:  52px;  /* главные кнопки и поля на телефоне */
    --touch-min:        44px;

    /* Линии маршрута */
    --route-w:         10px;   /* главная схема; 8px в карточках, 4px на линии времени */
    --station:         32px;   /* 38px на главной схеме, 16px на линии времени */

    /* Фокус */
    --focus-ring: 3px solid var(--accent);
    --focus-offset: 3px;

    /* Движение */
    --dur-state: 150ms;  /* смена состояния кнопки и поля */
    --dur-panel: 240ms;  /* выезд панели и уведомления */
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* Раскладка */
    --sidebar-w:   240px;
    --content-max: 1440px;
    --bp-tablet:   760px;   /* ниже — нижнее меню и списки вместо таблиц */
    --bp-desktop:  1280px;  /* ниже — меню сворачивается в значки */
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}