/* KollabiuM design tokens · v1.1 · 08.10.2026 · Fable 5.1
   Источник истины для кода, Pencil и Figma. Собрано из platform-vision.md §34–39.
   Светлая тема по умолчанию; тёмная через [data-theme="dark"] или системную настройку.
   Имена: --kl-<группа>-<роль>[-<вариант>]. Числа без единиц только у весов и z. */

:root{
  /* ---- цвет: бренд (одинаков в обеих темах) ---- */
  --kl-brand-blue:#255EE8;        --kl-brand-blue-deep:#1E4FD8;
  --kl-brand-orange:#FF7A1A;      --kl-brand-orange-light:#FFBB33;
  --kl-gradient-cold:linear-gradient(135deg,var(--kl-brand-blue),var(--kl-brand-blue-deep));
  --kl-gradient-warm:linear-gradient(135deg,var(--kl-brand-orange),var(--kl-brand-orange-light));

  /* ---- цвет: светлая тема ---- */
  --kl-bg:#F7F7F9;                --kl-surface:#FFFFFF;        --kl-surface-2:#F0F1F4;
  --kl-text:#111318;              --kl-text-muted:#5F6472;     --kl-text-inverse:#F7F7F9;
  --kl-line:#E4E6EC;              --kl-line-strong:#858B99;
  --kl-link:#224DB1;              --kl-focus:#224DB1;          --kl-selection:#E9EFFF;
  --kl-tint-cold:#E9EFFF;         --kl-tint-warm:#FFF3E0;
  --kl-on-cold:#255EE8;           --kl-on-warm:#A63B08;        /* текст и знак на подложках */
  --kl-btn-bg:#111318;            --kl-btn-text:#F7F7F9;       /* главная кнопка: нейтральная */
  --kl-state-done:#187246;        --kl-state-wait:#A63B08;     --kl-state-busy:#224DB1;   --kl-state-fail:#B83245;
  --kl-state-done-bg:#E6F4EC;     --kl-state-wait-bg:#FFF3E0;  --kl-state-busy-bg:#E9EFFF; --kl-state-fail-bg:#FDE8EB;
  --kl-overlay:rgba(11,11,13,.48);
  --kl-shadow-0:none;
  --kl-shadow-1:0 8px 24px rgba(20,22,40,.10);
  --kl-shadow-2:0 24px 60px rgba(20,22,40,.16);

  /* ---- шрифт ---- */
  --kl-font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --kl-font-arabic:"Onest","Noto Sans Arabic",system-ui,sans-serif;
  --kl-font-hebrew:"Onest","Noto Sans Hebrew",system-ui,sans-serif;
  --kl-font-devanagari:"Onest","Noto Sans Devanagari",system-ui,sans-serif;
  --kl-weight-regular:400;  --kl-weight-medium:500;  --kl-weight-semibold:600;
  --kl-h1-size:clamp(40px,6vw,76px); --kl-h1-weight:600; --kl-h1-leading:.98; --kl-h1-tracking:-.045em;
  --kl-h2-size:clamp(28px,3.6vw,44px); --kl-h2-weight:600; --kl-h2-leading:1.05; --kl-h2-tracking:-.035em;
  --kl-h3-size:22px;  --kl-h3-weight:500; --kl-h3-leading:1.2;  --kl-h3-tracking:-.02em;
  --kl-body-size:16px; --kl-body-weight:400; --kl-body-leading:1.5; --kl-body-tracking:0;
  --kl-ui-size:14px;   --kl-ui-weight:500;   --kl-ui-leading:1.25; --kl-ui-tracking:0;
  --kl-caption-size:12px; --kl-caption-weight:400; --kl-caption-leading:1.35; --kl-caption-tracking:0;
  --kl-measure:65ch;

  /* ---- отступы: шаг 4 ---- */
  --kl-space-1:4px; --kl-space-2:8px; --kl-space-3:12px; --kl-space-4:16px;
  --kl-space-6:24px; --kl-space-8:32px; --kl-space-12:48px; --kl-space-16:64px;
  --kl-section:clamp(96px,10vw,120px);

  /* ---- скругления ---- */
  --kl-radius-xs:6px;   /* мелкие картинки в карточке */
  --kl-radius-ctl:12px; /* кнопки, поля, картинки, аватар помощника */
  --kl-radius-menu:12px; /* контекстное меню, §41.1 */
  --kl-radius-msg:16px; /* сообщения, события */
  --kl-radius-card:20px;
  --kl-radius-modal:28px;
  --kl-radius-status:6px;
  --kl-radius-pill:999px; /* фильтры, малые точки и торцы прогресса */
  --kl-radius-avatar:30%;  /* люди: скруглённый квадрат, 30% стороны (40→12, 28→8), решение 09.10 */
  --kl-radius-agent:30%;   /* аватар ИИ и роли: квадрат 30% */

  /* ---- размеры ---- */
  --kl-h-touch:44px; --kl-h-compact:40px; --kl-h-chip:32px; --kl-h-tag:24px;
  --kl-icon:20px; --kl-icon-nav:24px; --kl-icon-sm:16px; --kl-icon-stroke:1.5px;
  --kl-avatar:40px; --kl-avatar-sm:32px; --kl-ai-mark:12px;
  --kl-gap-touch:8px; --kl-border:1px;

  /* ---- сетка ---- */
  --kl-container:1320px; --kl-gutter:24px; --kl-margin:32px; --kl-margin-mobile:16px;
  --kl-cols:12; --kl-cols-tablet:8; --kl-cols-mobile:4;
  --kl-bp-sm:640px; --kl-bp-md:768px; --kl-bp-lg:1024px; --kl-bp-xl:1280px;

  /* ---- движение ---- */
  --kl-d1:120ms; --kl-d2:200ms; --kl-d3:320ms; --kl-d4:480ms;
  --kl-e-out:cubic-bezier(.16,1,.3,1);
  --kl-e-in:cubic-bezier(.4,0,1,1);
  --kl-e-std:cubic-bezier(.2,0,0,1);

  /* ---- слои ---- */
  --kl-z-sticky:10; --kl-z-menu:20; --kl-z-modal:30; --kl-z-toast:40;

  color-scheme:light;
}

[data-theme="dark"]{
  --kl-bg:#0B0B0D;                --kl-surface:#161822;        --kl-surface-2:#1C1F2B;
  --kl-text:#F3F3F6;              --kl-text-muted:#9A9FAE;     --kl-text-inverse:#0B0B0D;
  --kl-line:#262A38;              --kl-line-strong:#737C91;
  --kl-link:#ACC8FF;              --kl-focus:#ACC8FF;          --kl-selection:#182E52;
  --kl-tint-cold:#182E52;         --kl-tint-warm:#402B1D;
  --kl-on-cold:#ACC8FF;           --kl-on-warm:#FFC397;
  --kl-btn-bg:#F3F3F6;            --kl-btn-text:#0B0B0D;
  --kl-state-done:#78D6A0;        --kl-state-wait:#FFC397;     --kl-state-busy:#ACC8FF;   --kl-state-fail:#FF9DA9;
  --kl-state-done-bg:#14301F;     --kl-state-wait-bg:#402B1D;  --kl-state-busy-bg:#182E52; --kl-state-fail-bg:#3C1A20;
  --kl-overlay:rgba(0,0,0,.64);
  --kl-shadow-0:none;
  --kl-shadow-1:0 8px 24px rgba(0,0,0,.45);
  --kl-shadow-2:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --kl-bg:#0B0B0D; --kl-surface:#161822; --kl-surface-2:#1C1F2B; --kl-text:#F3F3F6; --kl-text-muted:#9A9FAE; --kl-text-inverse:#0B0B0D;
  --kl-line:#262A38; --kl-line-strong:#737C91; --kl-link:#ACC8FF; --kl-focus:#ACC8FF; --kl-selection:#182E52;
  --kl-tint-cold:#182E52; --kl-tint-warm:#402B1D; --kl-on-cold:#ACC8FF; --kl-on-warm:#FFC397; --kl-btn-bg:#F3F3F6; --kl-btn-text:#0B0B0D;
  --kl-state-done:#78D6A0; --kl-state-wait:#FFC397; --kl-state-busy:#ACC8FF; --kl-state-fail:#FF9DA9;
  --kl-state-done-bg:#14301F; --kl-state-wait-bg:#402B1D; --kl-state-busy-bg:#182E52; --kl-state-fail-bg:#3C1A20;
  --kl-overlay:rgba(0,0,0,.64); --kl-shadow-0:none; --kl-shadow-1:0 8px 24px rgba(0,0,0,.45); --kl-shadow-2:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}}
@media (prefers-reduced-motion:reduce){ :root{ --kl-d1:0ms; --kl-d2:0ms; --kl-d3:0ms; --kl-d4:0ms; } }

/* Витрина может дополнительно уменьшить движение; системная настройка имеет приоритет. */
:root[data-motion="reduce"]{--kl-d1:0ms;--kl-d2:0ms;--kl-d3:0ms;--kl-d4:0ms}