/* base.css — сброс, типографика, ссылки, фокус, выделение, скроллбар, служебные классы.
   Читает только semantic-токены темы. Порядок подключения: tokens → themes/* → base → layout → components/* → pages/* */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: calc(var(--topbar-h) + var(--s4)); }   /* залипающая шапка не закрывает элемент в фокусе (WCAG 2.4.11) */
body {
  background: var(--bg); color: var(--fg);
  font: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
::placeholder { color: var(--fg-muted); opacity: 1; }

/* тонкие полосы прокрутки везде: трек прозрачный, бегунок скруглённый. Chrome/Safari — ::-webkit-scrollbar
   (бегунок 6px, при наведении 8px: рамка-прозрачность съедается), Firefox — стандартные свойства.
   Стандартные свойства Chrome уважает «поверх» webkit-стилей, поэтому они только в @supports not */
*::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 1px solid transparent; border-radius: var(--r-pill);
  background-clip: padding-box; min-height: 32px; min-width: 32px; }
*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-hover);
  background-clip: padding-box; border-width: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* типографика */
a { color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: .88em; }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-family: var(--font-heading); font-weight: var(--heading-weight); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }
details summary { cursor: pointer; color: var(--fg-muted); font-size: var(--fs-sm); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-sm); }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* иконки: цвет — currentColor, размер и штрих — токены темы */
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* фокус с клавиатуры: цвет, толщина и отступ задаёт тема («Контраст» — 4px) */
:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); z-index: var(--z-skip); background: var(--surface-1);
  padding: var(--s2) var(--s3); border-radius: var(--r); }
.mobile-only { display: none; }
@media (max-width: 900px) { .mobile-only { display: inline-flex; } }

/* уважение к prefers-reduced-motion: длительности токенов обнуляются, анимации гасятся.
   html[data-theme] сильнее [data-theme] в файлах тем, поэтому порядок подключения не важен */
@media (prefers-reduced-motion: reduce) {
  html[data-theme], html:root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}