/* ============================================================================
   tokens.css — Дизайн-токены «Кабинет бригадира»
   Только переменные и темы. Компонентных стилей здесь нет.

   Слои:
     1. Палитра-примитивы (--_c-*)  — сырые цвета, НЕ использовать в компонентах.
     2. Семантические токены (--uk-*) — их используют компоненты.
     3. Темы: :root (light по умолчанию) / прочие настройки,
        .dark-переопределение через [data-theme] и prefers-color-scheme.

   Правило: компоненты обращаются ТОЛЬКО к --uk-*.
   ========================================================================== */

:root {
  /* --- 1. Примитивы: холодный бетонный нейтрал -------------------------- */
  --_c-n0:   #ffffff;
  --_c-n50:  #f6f7f8;
  --_c-n100: #eef0f2;
  --_c-n150: #e4e7ea;
  --_c-n200: #d6dadf;
  --_c-n300: #c0c6cd;
  --_c-n400: #99a1aa;
  --_c-n500: #6f7883;
  --_c-n600: #545c66;
  --_c-n700: #3a4149;
  --_c-n800: #262b31;
  --_c-n900: #1a1e24;
  --_c-n950: #12151a;
  --_c-n1000:#0d1014;

  /* Акцент — строительный янтарь */
  --_c-amber-500: #e8720c;   /* light base */
  --_c-amber-600: #cf6309;
  --_c-amber-700: #b85708;   /* заливка под белым текстом: 4.77:1 */
  --_c-amber-800: #a34e07;   /* её ховер: 5.75:1 */
  --_c-amber-900: #8c4306;   /* её нажатие: 7.19:1 */
  --_c-amber-400: #f2861f;   /* dark base  */
  --_c-amber-300: #ff9a34;

  /* Семантика (базовые тона) */
  --_c-blue:  #2f6fb0;   /* процесс     */
  --_c-green: #2e7d53;   /* успех       */
  --_c-amberS:#c9750a;   /* срочная     */
  --_c-red:   #c62f2f;   /* ошибка/супер*/

  /* --- 2. Шкала отступов ---------------------------------------------
     Затухающая, а не «шаг 4px»: 4·7·10·13·16·20·24·28·34·40·52,
     то есть шаг 3 → 4 → 6 → 12. Имя токена — номер ступени, НЕ пиксели:
     --uk-space-4 = 13px, --uk-space-16 = 52px. */
  --uk-space-1:  4px;
  --uk-space-2:  7px;
  --uk-space-3:  10px;
  --uk-space-4:  13px;
  --uk-space-5:  16px;
  --uk-space-6:  20px;
  --uk-space-7:  24px;
  --uk-space-8:  28px;
  --uk-space-10: 34px;
  --uk-space-12: 40px;
  --uk-space-16: 52px;

  /* --- Радиусы --------------------------------------------------------- */
  --uk-radius-xs:   3px;   /* микроэлементы мельче 16px: образец цвета, сегмент полосы занятости */
  --uk-radius-sm:   6px;
  --uk-radius:      9px;
  --uk-radius-lg:   11px;
  --uk-radius-pill: 999px;

  /* --- Типографика ---------------------------------------------------- */
  --uk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --uk-font-mono: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --uk-fs-11: 0.6875rem;  /* 11px — микроподписи         */
  --uk-fs-12: 0.75rem;    /* 12px — бейджи, вспомог.     */
  --uk-fs-13: 0.8125rem;  /* 13px — плотный текст         */
  --uk-fs-14: 0.875rem;   /* 14px — базовый UI           */
  --uk-fs-15: 0.9375rem;  /* 15px — базовый body         */
  --uk-fs-16: 1rem;       /* 16px — поля ввода (без zoom)*/
  --uk-fs-18: 1.125rem;   /* 18px — подзаголовки         */
  --uk-fs-22: 1.375rem;   /* 22px — H2                    */
  --uk-fs-28: 1.75rem;    /* 28px — H1                    */

  --uk-lh-tight: 1.15;
  --uk-lh-snug:  1.3;
  --uk-lh-base:  1.45;

  --uk-fw-regular: 400;
  --uk-fw-medium:  500;
  --uk-fw-semibold:600;
  --uk-fw-bold:    700;

  --uk-track-tight: -0.011em;   /* лёгкий отрицательный трекинг заголовков */

  /* --- z-index -------------------------------------------------------- */
  --uk-z-sticky:    100;   /* topbar, sticky панель, sticky-колонка       */
  --uk-z-overlay:   900;   /* backdrop модалки                            */
  --uk-z-modal:     1000;
  --uk-z-toast:     1200;

  /* --- Анимация ------------------------------------------------------- */
  --uk-ease: cubic-bezier(.2, .7, .2, 1);
  --uk-dur-fast: 120ms;
  --uk-dur:      180ms;
  --uk-dur-slow: 280ms;

  /* --- Прочее --------------------------------------------------------- */
  --uk-tap-min: 44px;      /* минимальный тач-таргет                       */
  --uk-focus-width: 3px;
  --uk-container: 1200px;
}

/* ============================================================================
   ТЕМА: светлая (по умолчанию + явное [data-theme="light"])
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Поверхности */
  --uk-bg:            var(--_c-n100);   /* фон страницы            */
  --uk-surface:       var(--_c-n0);     /* карточки, поля          */
  --uk-surface-2:     var(--_c-n50);    /* вложенные поверхности    */
  --uk-surface-sunken:var(--_c-n150);   /* «утопленный» фон         */
  --uk-surface-hover: var(--_c-n50);
  --uk-overlay:       rgba(18, 21, 26, .48);

  /* Границы */
  --uk-border:        var(--_c-n200);
  --uk-border-strong: #8893a0;   /* контур поля ввода: 3.12:1 к белому (было 1.72:1) */
  --uk-border-dashed: var(--_c-n400);

  /* Текст */
  --uk-text:          var(--_c-n900);
  --uk-text-2:        var(--_c-n600);
  --uk-text-3:        #626a74;   /* приглушённый: 4.8:1 на фоне страницы */
  --uk-text-inverse:  var(--_c-n0);
  --uk-text-on-accent:#ffffff;

  /* Акцент (янтарь).
     --uk-accent — линии, границы, иконки, подчёркивания: там контраст фона не важен.
     --uk-accent-solid* — ЗАЛИВКИ, на которых лежит белый текст (кнопка, плашка логотипа):
     тот же оттенок, но темнее, иначе белый текст даёт 3.07:1 вместо 4.5:1. */
  --uk-accent:        var(--_c-amber-500);
  --uk-accent-hover:  var(--_c-amber-600);
  --uk-accent-active: var(--_c-amber-700);
  --uk-accent-solid:        var(--_c-amber-700);
  --uk-accent-solid-hover:  var(--_c-amber-800);
  --uk-accent-solid-active: var(--_c-amber-900);
  --uk-accent-soft:   #fbe9d6;   /* мягкий фон под акцентом */
  --uk-accent-text:   #9a4a05;   /* акцентный текст на светлом фоне */
  /* Звёздочка стоит и на белом поле, и на бетонном фоне страницы: считать надо по худшему.
     amber-700 давал 4.77:1 на белом, но лишь 4.17:1 на #eef0f2 — мимо порога. */
  --uk-required:      var(--_c-amber-800);   /* минимум по трём фонам: 5.04:1 */

  /* Кольцо фокуса. Цвет отдельный от --uk-accent: базовая амбра #e8720c даёт к светлым
     поверхностям 2.47–3.07:1 при пороге 3:1, то есть на бетонном фоне страницы кольцо
     формально невидимо. Берём ту же амбру, что под белым текстом в заливках, — 3.84:1
     к самой тёмной светлой поверхности. Ореол непрозрачный: заливка 40% давала 1.55:1,
     и фокус в полях, чекбоксах и радио не читался вовсе. */
  --uk-focus:      var(--_c-amber-700);
  --uk-focus-ring: 0 0 0 var(--uk-focus-width) var(--uk-focus);

  /* Затенение прошедшего времени. Класть его цветом текста нельзя: в тёмной теме
     --uk-text светлый, и «затенение» осветляло — прошедший час выходил заметнее
     рабочего. Тёмная вуаль гасит в обеих темах. */
  --uk-veil-past:  rgba(18, 21, 26, .06);

  /* Семантика: процесс (синий) */
  --uk-process:        var(--_c-blue);
  --uk-process-bg:     #e2edf7;
  --uk-process-text:   #1f4f80;
  --uk-process-border: #b9d3ea;

  /* успех (зелёный) */
  --uk-success:        var(--_c-green);
  --uk-success-bg:     #e0f0e7;
  --uk-success-text:   #1e5c3b;
  --uk-success-border: #b3ddc6;

  /* срочная (янтарь-семантический) */
  /* Золото, а не оранжевый: «внимание» и «акцент» стояли на одном тоне (hue 28 против 34,
     контраст 1.04:1 в тёмной теме), и бейдж «Частично готова» был неотличим от «Срочная».
     Развели по тону — hue 42 против 28; читаемость каждого семейства при этом сохранена. */
  --uk-warn:           #8f6a0b;
  --uk-warn-bg:        #fbf1d6;
  --uk-warn-text:      #7a5a06;
  --uk-warn-border:    #ead79f;
  /* Жёлтое семейство светлое в ОБЕИХ темах: белый текст даёт 3.5:1, читается только тёмный */
  --uk-text-on-warn:   #ffffff;

  /* ошибка / супер-срочная (красный) */
  --uk-danger:         var(--_c-red);
  --uk-danger-hover:   #a82727;
  --uk-danger-solid:   var(--_c-red);   /* заливка под белым текстом: 5.46:1 */
  /* Ховер заливки обязан быть НЕ ХУЖЕ покоя: раньше он брал --uk-danger-hover,
     и в тёмной теме наведение роняло контраст с 4.7:1 до 2.89:1 — хуже, чем в покое. */
  --uk-danger-solid-hover: #a82727;   /* белый текст: 7.04:1 */
  --uk-text-on-danger: #ffffff;
  --uk-danger-bg:      #f8e0e0;
  --uk-danger-text:    #922222;
  --uk-danger-border:  #edbcbc;

  /* нейтральная семантика (черновик / аннулирована / обычная срочность) */
  --uk-muted:          var(--_c-n500);
  --uk-muted-bg:       var(--_c-n150);
  --uk-muted-text:     var(--_c-n700);
  --uk-muted-border:   var(--_c-n300);

  /* Тени */
  --uk-shadow-1: 0 1px 2px rgba(18, 21, 26, .08);
  --uk-shadow-2: 0 2px 8px rgba(18, 21, 26, .10);
  --uk-shadow-3: 0 10px 28px rgba(18, 21, 26, .16);

  /* Календарь */
  --uk-cal-grid:   var(--_c-n200);
  --uk-cal-hour:   var(--_c-n150);
  --uk-cal-now:    var(--_c-red);
  --uk-cal-busy:   var(--_c-amberS);

  /* Скелетон */
  --uk-skeleton-base:  var(--_c-n150);
  --uk-skeleton-shine: var(--_c-n50);
}

/* ============================================================================
   ТЕМА: тёмная
   Определяется дважды:
     (a) [data-theme="dark"]         — ручной выбор всегда побеждает;
     (b) @media prefers-color-scheme — системная тёмная, но только когда
         пользователь НЕ выставил тему вручную (:root:not([data-theme])).
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --uk-bg:            var(--_c-n950);
  --uk-surface:       var(--_c-n900);
  --uk-surface-2:     #21262d;
  --uk-surface-sunken:var(--_c-n1000);
  --uk-surface-hover: #21262d;
  --uk-overlay:       rgba(0, 0, 0, .62);

  --uk-border:        #2b3138;
  --uk-border-strong: #657181;   /* контур поля ввода: 3.37:1 к поверхности (было 1.62:1) */
  --uk-border-dashed: var(--_c-n600);

  --uk-text:          var(--_c-n50);
  --uk-text-2:        #aab2bb;
  --uk-text-3:        #8a929b;   /* 4.83:1 на вложенной поверхности */
  --uk-text-inverse:  var(--_c-n950);
  --uk-text-on-accent:#1a1206;

  --uk-accent:        var(--_c-amber-400);
  --uk-accent-hover:  var(--_c-amber-300);
  --uk-accent-active: #ffab4d;
  /* В тёмной теме заливка светлая, а текст на ней тёмный (7.24:1) — затемнять нечего */
  --uk-accent-solid:        var(--_c-amber-400);
  --uk-accent-solid-hover:  var(--_c-amber-300);
  --uk-accent-solid-active: #ffab4d;
  --uk-accent-soft:   #3a2611;
  --uk-accent-text:   #f7a556;
  --uk-required:      var(--_c-amber-400);

  --uk-veil-past:  rgba(0, 0, 0, .42);
  --uk-focus:      var(--_c-amber-400);
  --uk-focus-ring: 0 0 0 var(--uk-focus-width) var(--uk-focus);

  --uk-process:        #4a8fd6;
  --uk-process-bg:     #17293b;
  --uk-process-text:   #8ec0ec;
  --uk-process-border: #2c496a;

  --uk-success:        #4aa878;
  --uk-success-bg:     #142b1f;
  --uk-success-text:   #79cfa1;
  --uk-success-border: #245c40;

  --uk-warn:           #d6a83a;
  --uk-warn-bg:        #332c12;
  --uk-warn-text:      #ecc472;
  --uk-warn-border:    #5f5326;
  --uk-text-on-warn:   #1a1206;

  --uk-danger:         #e05a5a;
  --uk-danger-hover:   #f07070;
  --uk-danger-solid:   #d43a3a;   /* заливка под белым текстом: 4.7:1 (у --uk-danger было 3.63:1) */
  --uk-danger-solid-hover: #c62f2f;   /* белый текст: 5.46:1 — темнее покоя, а не светлее */
  --uk-text-on-danger: #ffffff;
  --uk-danger-bg:      #331818;
  --uk-danger-text:    #f0a0a0;
  --uk-danger-border:  #61302f;

  --uk-muted:          #7e8791;
  --uk-muted-bg:       #21262d;
  --uk-muted-text:     #aab2bb;
  --uk-muted-border:   var(--_c-n700);

  --uk-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --uk-shadow-2: 0 2px 10px rgba(0, 0, 0, .48);
  --uk-shadow-3: 0 12px 32px rgba(0, 0, 0, .60);

  --uk-cal-grid:   #2b3138;
  --uk-cal-hour:   #21262d;
  --uk-cal-now:    #e05a5a;
  --uk-cal-busy:   #e0952f;

  --uk-skeleton-base:  #21262d;
  --uk-skeleton-shine: #2b3138;
}

@media (prefers-color-scheme: dark) {
  /* Системная тёмная тема применяется только при отсутствии ручного выбора */
  :root:not([data-theme]) {
    color-scheme: dark;

    --uk-bg:            var(--_c-n950);
    --uk-surface:       var(--_c-n900);
    --uk-surface-2:     #21262d;
    --uk-surface-sunken:var(--_c-n1000);
    --uk-surface-hover: #21262d;
    --uk-overlay:       rgba(0, 0, 0, .62);

    --uk-border:        #2b3138;
    --uk-border-strong: #657181;   /* контур поля ввода: 3.37:1 к поверхности (было 1.62:1) */
    --uk-border-dashed: var(--_c-n600);

    --uk-text:          var(--_c-n50);
    --uk-text-2:        #aab2bb;
    --uk-text-3:        #8a929b;   /* 4.83:1 на вложенной поверхности */
    --uk-text-inverse:  var(--_c-n950);
    --uk-text-on-accent:#1a1206;

    --uk-accent:        var(--_c-amber-400);
    --uk-accent-hover:  var(--_c-amber-300);
    --uk-accent-active: #ffab4d;
    /* В тёмной теме заливка светлая, а текст на ней тёмный (7.24:1) — затемнять нечего */
    --uk-accent-solid:        var(--_c-amber-400);
    --uk-accent-solid-hover:  var(--_c-amber-300);
    --uk-accent-solid-active: #ffab4d;
    --uk-accent-soft:   #3a2611;
    --uk-accent-text:   #f7a556;
    --uk-required:      var(--_c-amber-400);

    --uk-veil-past:  rgba(0, 0, 0, .42);
    --uk-focus:      var(--_c-amber-400);
    --uk-focus-ring: 0 0 0 var(--uk-focus-width) var(--uk-focus);

    --uk-process:        #4a8fd6;
    --uk-process-bg:     #17293b;
    --uk-process-text:   #8ec0ec;
    --uk-process-border: #2c496a;

    --uk-success:        #4aa878;
    --uk-success-bg:     #142b1f;
    --uk-success-text:   #79cfa1;
    --uk-success-border: #245c40;

    --uk-warn:           #d6a83a;
    --uk-warn-bg:        #332c12;
    --uk-warn-text:      #ecc472;
    --uk-warn-border:    #5f5326;
    --uk-text-on-warn:   #1a1206;

    --uk-danger:         #e05a5a;
    --uk-danger-hover:   #f07070;
    --uk-danger-solid:   #d43a3a;   /* заливка под белым текстом: 4.7:1 (у --uk-danger было 3.63:1) */
    --uk-danger-solid-hover: #c62f2f;   /* белый текст: 5.46:1 — темнее покоя, а не светлее */
    --uk-text-on-danger: #ffffff;
    --uk-danger-bg:      #331818;
    --uk-danger-text:    #f0a0a0;
    --uk-danger-border:  #61302f;

    --uk-muted:          #7e8791;
    --uk-muted-bg:       #21262d;
    --uk-muted-text:     #aab2bb;
    --uk-muted-border:   var(--_c-n700);

    --uk-shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --uk-shadow-2: 0 2px 10px rgba(0, 0, 0, .48);
    --uk-shadow-3: 0 12px 32px rgba(0, 0, 0, .60);

    --uk-cal-grid:   #2b3138;
    --uk-cal-hour:   #21262d;
    --uk-cal-now:    #e05a5a;
    --uk-cal-busy:   #e0952f;

    --uk-skeleton-base:  #21262d;
    --uk-skeleton-shine: #2b3138;
  }
}