/* Kanvo — base: reset + дизайн-токены.
   ДВА СЛОЯ (стержень «материал vs структура», UI_GUIDE §1):
   1) МАТЕРИАЛ (ниже, :root) — цвет/спейсинг/радиусы/типо/веса. Тюнится Тема-студией (через tokens.php).
   2) СТРУКТУРА (блок в самом низу) — скелет: размеры блоков/иконок, ширины, анимации. НЕ тюнится студией,
      фиксировано сводом; названо переменными `--st-*` для прозрачности (никаких магических чисел в компонентах). */
:root{
  color-scheme:light;

  /* — Spacing (база 4px; sp-0 = микро-паддинг пилюль) — */
  --sp-0:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* — Radii (углы) — */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --r-round:50%;
  --radius:var(--r-md); /* legacy-алиас */

  /* — Type: размеры/веса/интерлиньяж/трекинг. Заголовки — fluid clamp(). — */
  --font:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:18px; --fs-xl:23px;
  --fs-2xl:clamp(26px,3.4vw,31px); --fs-display:clamp(31px,5vw,44px);
  --lh-tight:1.15; --lh-snug:1.3; --lh-base:1.5; --lh-relaxed:1.6;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700;
  --tracking-tight:-.02em; --tracking-snug:-.01em; --tracking-wide:.04em;

  /* — Layout — */
  --content:960px;
  --gutter:var(--sp-5);

  /* — Спейсинг компонентов (семант. ручки: независимы от 4px-шкалы, тюнятся отдельно) — */
  --card-pad:24px; --section-y:48px;

  /* — Color: поверхности/текст — */
  --bg:#F6F5F1; --card-bg:#ffffff;
  --text-strong:#0F172A; --text:#475569; --text-dim:#5b6a80; --text-faint:#94a3b8; /* иерархия текста · text-dim ≥AA 5.0:1 на фоне */

  /* — Color: бренд-акцент (константа между темами) + производные + текст НА акценте — */
  --accent:#5B46E5; --accent-hover:#4d3ad1; --accent-soft:rgba(91,70,229,.10); --on-soft:#5B46E5;
  --on-accent:#ffffff; /* текст/знак на accent-фоне (кнопка, аватар, колонки лого) */

  /* — Color: линии/кнопки/чипы/ссылки — */
  --hairline:#E8E6DF; --btn2-border:#D9D4C8; --btn2-hover:rgba(15,23,42,.04);
  --chip-bg:rgba(15,23,42,.06); --chip-text:#64748b; --link:var(--accent);

  /* — Color: семантика статусов — */
  --warn:#B45309;    --warn-soft:rgba(180,83,9,.10);
  --err:#B91C1C;     --err-soft:rgba(185,28,28,.10);
  --success:#15803D; --success-soft:rgba(21,128,61,.10);
  --info:#0369A1;    --info-soft:rgba(3,105,161,.10);

  /* — Skeleton (плашки-плейсхолдеры загрузки, §10): база + блик shimmer — */
  --skel:#eae8e1; --skel-hi:#f5f4f0;
}

/* Dark — переопределяем ТОЛЬКО цвет (структурные/материал-размеры наследуются). */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F172A; --card-bg:#131f36;
  --text-strong:#ffffff; --text:#e2e8f0; --text-dim:#94a3b8; --text-faint:#64748b;
  --accent-soft:rgba(91,70,229,.16); --on-soft:#b3a9f5;
  --hairline:rgba(255,255,255,.08); --btn2-border:rgba(255,255,255,.2); --btn2-hover:rgba(255,255,255,.07);
  --chip-bg:rgba(255,255,255,.12); --chip-text:#94a3b8; --link:#b3a9f5;
  --warn:#fbbf24;    --warn-soft:rgba(251,191,36,.14);
  --err:#f87171;     --err-soft:rgba(248,113,113,.14);
  --success:#4ade80; --success-soft:rgba(74,222,128,.14);
  --info:#38bdf8;    --info-soft:rgba(56,189,248,.14);
  --skel:rgba(255,255,255,.05); --skel-hi:rgba(255,255,255,.11);
}

/* ==================================================================================
   === СТРУКТУРА (скелет) — НЕ тюнится студией. Фиксировано сводом; здесь названо. ===
   Размеры блоков/иконок, макс/мин ширины, длительности анимаций. Меняются ТОЛЬКО правкой
   этого файла (осознанно), не через /admin/theme. Единственный брейк — 768px (в @media литералом:
   CSS не разрешает var() внутри media-query).
   ================================================================================== */
:root{
  --st-toggle:38px;                          /* тумблер темы */
  --st-avatar-sm:44px; --st-avatar-lg:64px;  /* аватар (мал/большой) */
  --st-ico-circle:52px;                       /* кружок статус-иконки (auth-карточки) */
  --st-ico-sm:16px; --st-ico:20px; --st-ico-lg:26px; /* размер svg-иконок (трест / кнопка / карточка) */
  --st-w-hero:640px; --st-w-lede:540px; --st-w-visual:760px; /* макс-ширина H1 / лида / hero-мокап */
  --st-w-card:440px; --st-w-tile:150px;       /* карточка / мин-ширина тайла */
  --st-table-max:26rem;                        /* макс-высота скролл-таблицы (.table-scroll) */
  --st-nav-w:240px; --st-nav-rail:56px;       /* app-бар: развёрнут / icon-рейка (свёрнут) */
  --st-topbar-h:70px;                          /* высота top-регионов: шапка бара = тулбар (лого выровнено с заголовком; у бара разделителя НЕТ) */
  --st-stack-compact:600px; --st-stack-w:760px; --st-stack-wide:1280px; /* пресеты ширины стека (Компактно/Обычно/Широко; Во-всю = none) */
  --st-blk-btn:26px;                           /* icon-кнопка в шапке блока (ширина/удалить) */
  --st-col-w:264px; --st-col-body-min:56px;    /* доска: ширина колонки / мин-высота тела пустой колонки */
  --st-shadow-pop:0 8px 24px rgba(15,23,42,.12); --st-shadow-drawer:0 8px 30px rgba(15,23,42,.18); /* тени оверлеев */
  --st-z-pop:20; --st-z-backdrop:49; --st-z-drawer:50; /* слои: попап / backdrop / мобильный drawer */
  --st-dur:.15s; --st-dur-theme:.2s;          /* анимации: интеракции / смена темы */
  --st-mock-logo:22px; --st-mock-tool:18px; --st-mock-ava:28px; --st-mock-arr:8px; --st-mock-area:.1; /* hero-мокап (декор-иллюстрация) */
  --st-ios-w:40px; --st-ios-h:24px; --st-ios-knob:20px; --st-ios-travel:16px; /* iOS-тумблер (трек/высота/кружок/ход) */
  --st-tab-line:2px;                          /* толщина активного подчёркивания таба (.k-tabs) */
  --st-skel-line:12px; --st-skel-tile:82px; --st-skel-dur:1.4s; /* skeleton: высота строки / высота тайла / период shimmer */
  --st-break:768px;                            /* структурный брейк — в @media литералом (CSS не даёт var() в media); токен для справки/JS */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--st-dur-theme) ease,color var(--st-dur-theme) ease;
}
a{color:inherit}
.accent{color:var(--accent)}
.wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}

/* Фокус — брендовое кольцо ТОЛЬКО для клавиатуры (:focus-visible); мышью не мозолит. A11y. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Уважать системную «меньше анимаций» — гасим переходы/анимации почти в ноль. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Skeleton shimmer (класс .skel в components.css). reduced-motion гасит через animation-duration выше. */
@keyframes kanvo-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}