/* ═══════════════════════════════════════════════════════════════
   Monoline UI — слой токенов
   Портирован из CyberAdvice (frontend/src/ui/kit.tokens.css).

   Внутри только: токены (цвет, радиус, тень, отступ, шрифт, движение),
   лёгкий reset и утилиты. Стилей компонентов здесь нет — они в admin.css.

   Жёсткое правило: `#hex` пишется ТОЛЬКО в этом файле и только в объявлении
   токена. Везде остальное — var(--ui-*). Если понадобился новый цвет,
   он заводится здесь, а не по месту.

   Тема: <html data-theme="dark"> или "light". Если атрибут не выставлен
   вовсе — следуем системной настройке (prefers-color-scheme).
   ═══════════════════════════════════════════════════════════════ */

/* ── СВЕТЛАЯ ТЕМА ── */
:root {
  /* Чтобы чекбоксы, скроллбар, автозаполнение и выпадашки <select>
     следовали теме. Без этого в тёмной они остаются белыми. */
  color-scheme: light;

  /* Поверхности */
  --ui-bg:        #fafafa;   /* фон страницы */
  --ui-surface:   #ffffff;   /* карточка, модалка, таблица */
  --ui-surface-2: #f4f4f5;   /* шапка таблицы, hover, фон input */
  --ui-surface-3: #e9e9eb;   /* нажатое состояние, разделитель */
  --ui-border:    #e4e4e7;   /* все границы в 1px */
  --ui-border-2:  #d4d4d8;   /* граница при hover, разделитель посильнее */

  /* Текст */
  --ui-text-1:    #09090b;   /* заголовки, основной текст, фон primary-кнопки */
  --ui-text-2:    #52525b;   /* вторичный текст, подписи */
  --ui-text-3:    #6d6d76;   /* мета, пояснения. Держит WCAG AA на surface-2 */

  /* Кольцо фокуса */
  --ui-ring:      rgba(0,0,0,.06);

  /* Затемнение под модалкой */
  --ui-overlay:   color-mix(in srgb, var(--ui-text-1) 45%, transparent);

  /* Радиус — два значения для прямоугольных элементов, третьего нет */
  --ui-r:    6px;   /* кнопка, input, badge, мелкий элемент */
  --ui-r-lg: 8px;   /* карточка, модалка, панель */
  /* Отдельный случай — «полностью скруглить»: аватар, круглая кнопка,
     полоса прогресса, ползунок скроллбара. Это не третий шаг шкалы,
     а форма, поэтому вынесен в собственный токен: иначе по файлам
     расползаются вперемешку 99px и 50%, как и было до этого. */
  --ui-r-full: 99px;

  /* Тень — только у плавающего слоя: модалка, меню, тултип, тост */
  --ui-shadow-pop:   0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --ui-shadow-modal: 0 16px 48px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.08);

  /* Отступы — шаг 4px, промежуточных значений нет */
  --ui-sp-4:  4px;
  --ui-sp-8:  8px;
  --ui-sp-12: 12px;
  --ui-sp-16: 16px;
  --ui-sp-24: 24px;
  --ui-sp-32: 32px;
  --ui-sp-48: 48px;

  /* Шрифты */
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ui-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Шкала кегля — половинных пикселей нет */
  --ui-fs-2xs: 11px;  /* заголовок столбца, eyebrow — КАПС, +.06em */
  --ui-fs-xs:  12px;  /* мета, время, пояснение, badge */
  --ui-fs-sm:  13px;  /* основной текст интерфейса */
  --ui-fs-md:  14px;  /* заголовок карточки, акцентный текст */
  --ui-fs-lg:  18px;  /* заголовок страницы */
  --ui-fs-xl:  28px;  /* число KPI */

  /* Движение — только фон, граница и прозрачность */
  --ui-dur:  150ms;
  --ui-ease: cubic-bezier(.4, 0, .2, 1);

  /* Статусные цвета — единственный разрешённый цвет в системе */
  --ui-st-critical: #dc2626;  --ui-st-critical-bg: #fef2f2;
  --ui-st-high:     #ea580c;  --ui-st-high-bg:     #fff7ed;
  --ui-st-medium:   #a16207;  --ui-st-medium-bg:   #fefce8;
  --ui-st-low:      #15803d;  --ui-st-low-bg:      #f0fdf4;
  --ui-st-ok:       #15803d;  --ui-st-ok-bg:       #f0fdf4;
  --ui-st-neutral:  var(--ui-text-2);
  --ui-st-neutral-bg: var(--ui-surface-2);

  /* Геометрия оболочки */
  --sb-width:     260px;
  --sb-collapsed: 68px;
  --topbar-h:     56px;
}

/* ── ТЁМНАЯ ТЕМА (выбрана явно) ── */
[data-theme="dark"] {
  color-scheme: dark;

  --ui-bg:        #0a0a0a;
  --ui-surface:   #111111;
  --ui-surface-2: #18181b;
  --ui-surface-3: #232326;
  --ui-border:    #27272a;
  --ui-border-2:  #3f3f46;

  --ui-text-1:    #fafafa;
  --ui-text-2:    #a1a1aa;
  --ui-text-3:    #8b8b93;

  --ui-ring:      rgba(255,255,255,.10);
  --ui-overlay:   color-mix(in srgb, var(--ui-bg) 80%, transparent);

  --ui-shadow-pop:   0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --ui-shadow-modal: 0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);

  --ui-st-critical: #f87171;  --ui-st-critical-bg: rgba(220,38,38,.15);
  --ui-st-high:     #fb923c;  --ui-st-high-bg:     rgba(234,88,12,.15);
  --ui-st-medium:   #facc15;  --ui-st-medium-bg:   rgba(161,98,7,.18);
  --ui-st-low:      #4ade80;  --ui-st-low-bg:      rgba(21,128,61,.15);
  --ui-st-ok:       #4ade80;  --ui-st-ok-bg:       rgba(21,128,61,.15);
}

/* ── ТЁМНАЯ ТЕМА (по системной настройке) ──
   Работает, только если data-theme не выставлен вовсе. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --ui-bg:        #0a0a0a;
    --ui-surface:   #111111;
    --ui-surface-2: #18181b;
    --ui-surface-3: #232326;
    --ui-border:    #27272a;
    --ui-border-2:  #3f3f46;

    --ui-text-1:    #fafafa;
    --ui-text-2:    #a1a1aa;
    --ui-text-3:    #8b8b93;

    --ui-ring:      rgba(255,255,255,.10);
    --ui-overlay:   color-mix(in srgb, var(--ui-bg) 80%, transparent);

    --ui-shadow-pop:   0 4px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --ui-shadow-modal: 0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);

    --ui-st-critical: #f87171;  --ui-st-critical-bg: rgba(220,38,38,.15);
    --ui-st-high:     #fb923c;  --ui-st-high-bg:     rgba(234,88,12,.15);
    --ui-st-medium:   #facc15;  --ui-st-medium-bg:   rgba(161,98,7,.18);
    --ui-st-low:      #4ade80;  --ui-st-low-bg:      rgba(21,128,61,.15);
    --ui-st-ok:       #4ade80;  --ui-st-ok-bg:       rgba(21,128,61,.15);
  }
}

/* ═══ ЛЁГКИЙ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  font-size: 100%;
}

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol, pre { margin: 0; }

ul, ol, fieldset { padding: 0; }
fieldset { border: 0; }

img, svg, video, canvas { display: block; }
img, svg, video { max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Фокус виден всегда. :where — нулевая специфичность, правило компонента
   спокойно перекрывает. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-text-1);
  outline-offset: 2px;
}

/* ═══ УТИЛИТЫ — список закрытый, не расширяется ═══ */
.ui-row     { display: flex; align-items: center; }
.ui-col     { display: flex; flex-direction: column; }
.ui-gap-4   { gap: var(--ui-sp-4); }
.ui-gap-8   { gap: var(--ui-sp-8); }
.ui-gap-12  { gap: var(--ui-sp-12); }
.ui-gap-16  { gap: var(--ui-sp-16); }
.ui-gap-24  { gap: var(--ui-sp-24); }
.ui-center  { display: flex; align-items: center; justify-content: center; }
.ui-between { display: flex; align-items: center; justify-content: space-between; }
.ui-wrap    { flex-wrap: wrap; }
.ui-muted   { color: var(--ui-text-3); }
.ui-nums    { font-variant-numeric: tabular-nums; }
.ui-mono    { font-family: var(--ui-mono); letter-spacing: 0; }

/* min-width:0 обязателен, иначе текст внутри flex не обрезается */
.ui-grow { flex: 1 1 auto; min-width: 0; }

.ui-truncate {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* ═══ СКРОЛЛБАР — тонкий, нейтральный ═══ */
html { scrollbar-width: thin; scrollbar-color: var(--ui-border-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ui-border-2); border-radius: var(--ui-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ui-text-3); }

/* ═══ СНИЖЕНИЕ АНИМАЦИИ ═══
   --ui-dur: 0ms гасит весь кит разом — все переходы завязаны на этот токен. */
@media (prefers-reduced-motion: reduce) {
  :root { --ui-dur: 0ms; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
