/* ============================================================
   C-LOG — дизайн-токены
   ============================================================
   Единственное место, где заданы цвета, отступы, типографика
   и тени. Компоненты ссылаются только на переменные отсюда:
   поменять оформление всего сайта можно правкой этого файла.

   Токены названы по РОЛИ, а не по внешнему виду:
   --color-accent-negative, а не --red. Иначе при смене палитры
   получаются переменные вида «--blue: green».
   ============================================================ */

:root {
    /* ── Палитра ─────────────────────────────────────────────
       Базовые оттенки. В компонентах напрямую не используются —
       только через семантические токены ниже.

       14.08.2026: значения сведены к фирменной марке
       «Консалт-Логистик». Синий — кольцо, монограмма и корпус
       паровоза; оранжевый — изгиб рельса и фонарь; кремовый —
       поле логотипа. Те же значения продублированы в Логистике
       (logistics72/static/logistics72/css/tokens.css): проекты
       разные, палитра одна, при правке менять оба файла. */
    --palette-navy-900: #0e2340;
    --palette-navy-800: #14304f;
    --palette-navy-700: #1b3a5c;   /* основной фирменный */
    --palette-navy-600: #2e5480;
    --palette-navy-500: #5c7fa6;

    /* Нейтрали уведены в синий подтон: рядом с фирменным синим
       обычный серый выглядит грязным. */
    --palette-steel-700: #33455a;
    --palette-steel-600: #566d84;
    --palette-steel-500: #6b8299;
    --palette-steel-300: #a9bacb;
    --palette-steel-100: #dce4ec;
    --palette-steel-50:  #e9eef3;

    --palette-amber-600: #b85f14;
    --palette-amber-500: #e07b1e;  /* акцент с логотипа */
    --palette-amber-100: #fdeedd;

    --palette-green-600: #17603c;
    --palette-green-500: #1f7a4c;
    --palette-green-100: #dff1e7;

    --palette-red-600: #8f2c25;
    --palette-red-500: #b3382f;
    --palette-red-100: #fadedc;

    --palette-white: #ffffff;
    --palette-cream: #f7f5f0;      /* фон логотипа — фон страниц */
    --palette-black: #0a0f1a;

    /* ── Семантика: поверхности ────────────────────────────
       Фон страницы — кремовый с логотипа, карточки на нём белые:
       так карточка отделяется от фона без тени и лишней рамки. */
    --color-bg: var(--palette-cream);
    --color-bg-muted: var(--palette-steel-50);
    --color-bg-inverse: var(--palette-navy-900);
    --color-surface: var(--palette-white);
    --color-surface-raised: var(--palette-white);
    --color-border: var(--palette-steel-100);
    --color-border-strong: var(--palette-steel-300);

    /* ── Семантика: текст ────────────────────────────────── */
    --color-text: var(--palette-navy-900);
    /* steel-600, а не steel-500: на #6b8299 контраст был 3.98:1 на белом,
       3.65:1 на кремовом фоне страниц и 3.41:1 на steel-50 (фон карточек
       и алертов) — ниже нормы AA 4.5:1 для обычного текста, а токен
       применён к .card__text, то есть к основному тексту карточек.
       steel-600 даёт 5.36 / 4.92 / 4.59:1 на тех же фонах. На тёмном
       этот токен не используется (там --color-text-subtle/-inverse). */
    --color-text-muted: var(--palette-steel-600);
    --color-text-subtle: var(--palette-steel-300);
    --color-text-inverse: #eef3f8;

    /* ── Семантика: действия ─────────────────────────────── */
    --color-brand: var(--palette-navy-700);
    --color-brand-hover: var(--palette-navy-600);
    --color-brand-active: var(--palette-navy-800);
    --color-brand-subtle: var(--palette-steel-100);

    --color-accent: var(--palette-amber-500);
    --color-accent-hover: var(--palette-amber-600);
    --color-accent-subtle: var(--palette-amber-100);

    /* ── Семантика: статусы ──────────────────────────────── */
    --color-positive: var(--palette-green-600);
    --color-positive-subtle: var(--palette-green-100);
    --color-warning: var(--palette-amber-600);
    --color-warning-subtle: var(--palette-amber-100);
    --color-negative: var(--palette-red-600);
    --color-negative-subtle: var(--palette-red-100);
    --color-info: var(--palette-navy-500);
    --color-info-subtle: var(--palette-steel-100);

    /* ── Текст на тёмных поверхностях ────────────────────────
       Подвал, сайдбар админки и тёмные шапки таблиц стоят на
       --color-bg-inverse. Обычные --color-positive и --color-info
       рассчитаны на белый фон и на тёмном почти не читаются —
       это осветлённые варианты тех же ролей. Те же токены есть
       в Логистике (eriborweb/static/css/main.css: --on-dark-*). */
    --color-on-dark-link: #7dd3fc;
    --color-on-dark-positive: #5fd18a;
    --color-on-dark-warning: #f0a45c;

    /* ── Типографика ─────────────────────────────────────────
       Корпоративный TT Smalls (см. @font-face в fonts.css).
       Системный стек оставлен запасным: пока файл шрифта не
       загрузился — и на случай, если он вообще недоступен, —
       страница читается тем же кеглем, без пустых мест.

       Цифры остаются моноширинными: номера заявок, тарифы и суммы
       должны выстраиваться в колонку. */
    --font-sans: 'TT Smalls', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* Шкала с шагом ~1.25. Заголовки страниц плавно ужимаются
       на узких экранах через clamp() — отдельных медиа-запросов
       для размера текста не требуется. */
    --text-xs:   0.75rem;    /* 12px — подписи, метки */
    --text-sm:   0.875rem;   /* 14px — вспомогательный текст */
    --text-base: 1rem;       /* 16px — основной текст */
    --text-lg:   1.125rem;   /* 18px — лид */
    --text-xl:   1.375rem;   /* 22px — h4 */
    --text-2xl:  1.75rem;    /* 28px — h3 */
    --text-3xl:  clamp(1.75rem, 1.2rem + 2vw, 2.5rem);   /* h2 */
    --text-4xl:  clamp(2rem, 1.2rem + 3.2vw, 3.5rem);    /* h1, герой */

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Отступы: шаг 4px ────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Вертикальный ритм секций — сжимается на мобильном */
    --section-y: clamp(var(--space-12), 6vw, var(--space-24));

    /* ── Скругления ──────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* ── Тени ────────────────────────────────────────────────
       Мягкие и холодные: синеватый оттенок вместо чёрного
       выглядит естественнее на светлом фоне. */
    --shadow-sm: 0 1px 2px rgba(16, 32, 56, .06);
    --shadow-md: 0 2px 8px rgba(16, 32, 56, .08);
    --shadow-lg: 0 8px 24px rgba(16, 32, 56, .10);
    --shadow-xl: 0 16px 48px rgba(16, 32, 56, .14);

    /* ── Сетка ───────────────────────────────────────────── */
    --container-max: 1280px;
    --container-narrow: 880px;
    --container-pad: clamp(var(--space-4), 3vw, var(--space-8));

    /* ── Движение ────────────────────────────────────────────
       Правило простое: движение должно быть заметно только если
       его искать. Интерфейс рабочий — человек проводит в нём день,
       и всё, что «играет», через час раздражает.

       Отсюда короткие длительности и кривая с мягким торможением:
       элемент трогается сразу (нет ощущения залипания) и спокойно
       останавливается. Ускорения на входе нет намеренно — оно
       читается как рывок.

       Никаких `all`: анимируем только те свойства, которые реально
       меняются. `all` цепляет заодно layout-свойства и даёт дёрганье
       на ровном месте — именно из-за него интерфейс «дрожал».

       Как выбирать:
         instant — цвет текста, иконка, мелкая подсветка
         fast    — кнопки, поля, строки таблиц (основная масса)
         base    — карточки, дропдауны, всплывающие панели
         slow    — раскрытие блоков, смена слайда карусели */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.45, .05, .55, .95);
    --duration-instant: .09s;
    --duration-fast: .14s;
    --duration-base: .2s;
    --duration-slow: .28s;

    /* Готовые наборы — чтобы в компонентах не перечислять свойства
       каждый раз и не съезжать по длительностям. */
    --t-color: color var(--duration-instant) var(--ease),
               background-color var(--duration-fast) var(--ease),
               border-color var(--duration-fast) var(--ease);
    --t-lift: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);

    /* ── Слои ────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-header: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* Брейкпоинты (в CSS переменные в @media не работают, поэтому
   значения повторяются в медиа-запросах — здесь для справки):
     480px  — телефон
     768px  — планшет книжный
     1024px — планшет альбомный, малый ноутбук
     1280px — десктоп */

/* Уважаем системную настройку «уменьшить движение»:
   анимации мешают части пользователей, для некоторых —
   вызывают физический дискомфорт. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}