/* TOOLS-GO Design System v3 — tokens
   Единственный источник истины по цвету, типографике, сетке, радиусам, тени и motion.
   Подключать ПЕРЕД components.css и Tailwind-слоем. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  /* ---------- Нейтраль: графит (холодная, chroma <= 0.012) ---------- */
  --n-50:  #f4f8fb;
  --n-100: #e9f0f6;
  --n-150: #dde7f0;
  --n-200: #cedbe6;
  --n-300: #a9bccd;
  --n-400: #8ba0b5;
  --n-500: #5b7185;
  --n-600: #3d566c;
  --n-700: #24405a;
  --n-800: #0f2c48;
  --n-900: #011d38;
  --n-950: #00182f;

  /* ---------- Акцент: индиго. Только интерактив и «выбрано». ---------- */
  --a-100: #e3f4fb;
  --a-200: #b7e3f4;
  --a-300: #7acbe8;
  --a-400: #3fb4de;
  --a-500: #03729a;
  --a-600: #025c7d;
  --a-700: #024a66;
  --a-tint: rgba(5, 170, 224, 0.09);
  --a-tint-strong: rgba(5, 170, 224, 0.16);

  /* ---------- Семантика: только смысл, не украшение ---------- */
  --ok-fg: #1b8a5a;  --ok-bg: #e6f4ed;  --ok-bd: #b9dfcd;  --ok-dot: #1b8a5a;
  --warn-fg: #a76a09; --warn-bg: #fbf1dd; --warn-bd: #ecd3a2; --warn-dot: #c8860f;
  --err-fg: #c62c39; --err-bg: #fdecee; --err-bd: #f7c9cd;  --err-dot: #c62c39;
  --info-fg: #025c7d; --info-bg: #e3f4fb; --info-bd: #b7e3f4; --info-dot: #03729a;
  --idle-fg: #5b7185; --idle-bg: #e8eef4; --idle-bd: #cedbe6; --idle-dot: #8ba0b5;

  /* ---------- Серии: доли одного целого ----------
     Донат, легенда, стек. Здесь цвет не значит «хорошо» или «плохо» — только
     «другое», поэтому шкала намеренно не пересекается с семантикой выше:
     зелёный из --ok-fg и красный из --err-fg сюда не входят, иначе доля
     расходов читалась бы как статус. Восемь ступеней вокруг брендового
     акцента, различимых по светлоте. */
  --series-1: #03729a;
  --series-2: #0f8080;
  --series-3: #4a6fa5;
  --series-4: #6b4fa8;
  --series-5: #a8547d;
  --series-6: #8a6d3b;
  --series-7: #3d7a5c;
  --series-8: #5b7185;

  /* ---------- Веер прогноза: три вложенные полосы ----------
     Ступени, а не градиент. Градиент не даёт границы между полосами, и
     «где кончается 50% и начинается 80%» становится неразличимо — а именно
     это и есть содержание веера. Прозрачность растёт к центру: чем уже
     полоса, тем она вероятнее.

     Полосы 90/80/50, а не 95/80/50: при двух-трёх десятках наблюдений
     97.5-й квантиль оценивается по одному-двум крайним значениям.

     Тон — акцентный, не семантический: широкий интервал не «плохо», а
     «дальше горизонт». Красный здесь читался бы как тревога. */
  --fan-90: rgba(3, 114, 154, 0.08);
  --fan-80: rgba(3, 114, 154, 0.14);
  --fan-50: rgba(3, 114, 154, 0.22);
  --fan-line: #03729a;
  --fan-fact: #1b8a5a;

  /* ---------- Поверхности ---------- */
  --canvas: #f4f8fb;
  --surface: #ffffff;
  --surface-sunken: #e9f0f6;
  --surface-raised: #ffffff;
  --surface-hover: #f4f8fb;
  --surface-selected: var(--a-tint);
  --scrim: rgba(0, 24, 47, 0.5);

  /* ---------- Границы ---------- */
  --hairline: #e1ebf3;
  --border: #cedbe6;
  --border-strong: #a9bccd;
  --border-focus: var(--a-500);

  /* ---------- Текст ---------- */
  --fg: #011d38;
  --fg-secondary: #3d566c;
  --fg-muted: #5b7185;
  --fg-faint: #8ba0b5;
  --fg-on-accent: #ffffff;

  /* ---------- Типографика ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;   /* заголовки, шапки таблиц, микро-лейблы */
  --font-cond: var(--font-display);                             /* устаревшее имя, оставлено для совместимости */
  --font-wordmark: 'Space Grotesk', 'Manrope', sans-serif;      /* только логотип TOOLS-GO, латиница */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-micro: 11px;   --lh-micro: 14px;
  --fs-meta: 12px;    --lh-meta: 16px;
  --fs-body: 13px;    --lh-body: 18px;
  --fs-strong: 14px;  --lh-strong: 20px;
  --fs-card: 16px;    --lh-card: 22px;
  --fs-title: 20px;   --lh-title: 26px;
  --fs-metric: 28px;  --lh-metric: 32px;
  --fs-hero: 36px;    --lh-hero: 40px;

  --tracking-label: 0.06em;  /* micro uppercase */
  --tracking-title: -0.015em;
  --tracking-num: -0.01em;

  /* ---------- Сетка 4px ---------- */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px;
  --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px; --s-11: 48px;

  /* ---------- Размеры контролов ---------- */
  --ctl-sm: 26px;
  --ctl-md: 32px;
  --tap: 44px;   /* минимальная площадь нажатия, WCAG 2.2 Target Size */
  --ctl-lg: 38px;
  --ctl-touch: 44px;
  --row-h: 36px;          /* строка таблицы, средняя плотность */
  --row-h-compact: 30px;
  --row-h-relaxed: 44px;
  --rail-w: 220px;
  --rail-w-collapsed: 52px;
  --topbar-h: 48px;

  /* ---------- Радиусы: жёсткая техника ---------- */
  --r-1: 3px;   /* чекбокс, плашка */
  --r-2: 5px;   /* кнопка, поле, чип */
  --r-3: 7px;   /* карточка, панель */
  --r-4: 10px;  /* модалка, дровер */
  --r-full: 999px; /* только точки-статусы и аватары */

  /* ---------- Тени: только для оторванных слоёв ---------- */
  --sh-none: none;
  --sh-pop: 0 1px 2px rgba(1, 29, 56, 0.06), 0 8px 24px -8px rgba(1, 29, 56, 0.16);
  --sh-modal: 0 2px 4px rgba(1, 29, 56, 0.08), 0 24px 64px -16px rgba(1, 29, 56, 0.28);
  --ring: 0 0 0 2px rgba(4, 144, 192, 0.40);
  --ring-err: 0 0 0 2px rgba(220, 53, 69, 0.32);

  /* ---------- Motion ---------- */
  --dur-1: 120ms;  /* цвет, граница, фон */
  --dur-2: 160ms;  /* поповеры, дропдауны */
  --dur-3: 220ms;  /* дровер, модалка */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- Слои ---------- */
  --z-sticky: 20; --z-rail: 30; --z-pop: 40; --z-modal: 50; --z-toast: 60;
}

.dark {
  color-scheme: dark;

  --canvas: #00182f;
  --surface: #011d38;
  --surface-sunken: #011d38;
  --surface-raised: #12304d;
  --surface-hover: #133455;
  --surface-selected: rgba(63, 192, 239, 0.12);
  --scrim: rgba(0, 0, 0, 0.6);

  --hairline: #0e3050;
  --border: #1b4066;
  --border-strong: #2b5479;
  --border-focus: #3fc0ef;

  --fg: #eaf2f9;
  --fg-secondary: #b3c6d8;
  --fg-muted: #86a1b8;
  --fg-faint: #5b7185;
  --fg-on-accent: #00182f;

  --a-500: #3fc0ef;
  --a-600: #5fcbf2;
  --a-700: #84d8f6;

  /* На тёмном полотне те же восемь серий берутся светлее: исходные тона
     сливаются с --canvas и перестают различаться между собой. */
  --series-1: #4bb8e0;
  --series-2: #45c0be;
  --series-3: #8aa8d8;
  --series-4: #a98fe0;
  --series-5: #e08db4;
  --series-6: #cba76b;
  --series-7: #6fbf95;
  --series-8: #9db3c6;

  /* На тёмном полотне полосы веера берутся заметно светлее: та же альфа на
     тёмном фоне даёт почти невидимую заливку. */
  --fan-90: rgba(75, 184, 224, 0.10);
  --fan-80: rgba(75, 184, 224, 0.17);
  --fan-50: rgba(75, 184, 224, 0.26);
  --fan-line: #4bb8e0;
  --fan-fact: #6fbf95;
  --a-tint: rgba(63, 192, 239, 0.10);
  --a-tint-strong: rgba(63, 192, 239, 0.18);

  --ok-fg: #5cc79b;  --ok-bg: rgba(92, 199, 155, 0.12);  --ok-bd: rgba(92, 199, 155, 0.28);  --ok-dot: #5cc79b;
  --warn-fg: #e0a249; --warn-bg: rgba(224, 162, 73, 0.12); --warn-bd: rgba(224, 162, 73, 0.28); --warn-dot: #e0a249;
  --err-fg: #f2848c; --err-bg: rgba(242, 132, 140, 0.12); --err-bd: rgba(242, 132, 140, 0.28); --err-dot: #f2848c;
  --info-fg: #3fc0ef; --info-bg: rgba(63, 192, 239, 0.12); --info-bd: rgba(63, 192, 239, 0.28); --info-dot: #3fc0ef;
  --idle-fg: #86a1b8; --idle-bg: rgba(141, 150, 164, 0.12); --idle-bd: rgba(141, 150, 164, 0.24); --idle-dot: #5b7185;

  --sh-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --sh-modal: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 2px rgba(63, 192, 239, 0.42);
}

/* Плотность переключается на контейнере: data-density="compact|relaxed" */
[data-density='compact'] { --row-h: var(--row-h-compact); }
[data-density='relaxed'] { --row-h: var(--row-h-relaxed); }

/* Пальцем целятся хуже, чем курсором. Средний и крупный контрол становятся
   44px, строка таблицы — тоже.

   Мелкий размер намеренно НЕ растёт. Его поднимали до 36px, и на плотных
   экранах это дало общее ощущение раздутого интерфейса: чипы, мелкие кнопки и
   всё, что стоит рядами, прибавило по десять пикселей каждое. Зону нажатия
   мелким контролам добирает прозрачный псевдоэлемент в components.css —
   палец попадает в 44px, а видимый размер и плотность остаются прежними
   (правило 5). */
@media (pointer: coarse) {
  :root { --ctl-md: var(--ctl-touch); --ctl-lg: var(--ctl-touch); --row-h: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}