/*
* Stockshop UI — Base layer
* ----------------------------------------------------------------------------
* Сброс и базовая типографика поверх tokens.css. Подключается ПОСЛЕ токенов
* и ДО компонентов:
*
*
*
*
*
* Слой намеренно тонкий: он задаёт только то, что иначе каждая страница
* переопределяет у себя (box-sizing, кольцо фокуса, вид скроллбара).
* Никаких классов — только элементы.
*/
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--ui-font-system);
font-size: var(--ui-font-size-md);
line-height: var(--ui-leading-normal);
color: var(--ui-color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Заголовки: плотный интерлиньяж и лёгкий отрицательный трекинг — иначе
крупный системный шрифт выглядит разреженным. Отступы не задаём: их
расставляет раскладка через gap, а не margin заголовка. */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--ui-weight-bold);
line-height: var(--ui-leading-tight);
letter-spacing: -.015em;
text-wrap: balance;
}
h1 { font-size: var(--ui-font-size-xl); }
h2 { font-size: var(--ui-font-size-lg); }
h3 { font-size: var(--ui-font-size-md); }
p { margin: 0; }
a {
color: var(--ui-color-primary);
text-decoration: none;
transition: color var(--ui-duration) var(--ui-ease);
}
a:hover { color: var(--ui-color-primary-hover); }
code, kbd, samp, pre {
font-family: var(--ui-font-mono);
font-size: var(--ui-font-size-sm);
}
img, svg, video, canvas { max-width: 100%; }
hr {
border: 0;
border-top: 1px solid var(--ui-border-color);
margin: 0;
}
/* Формы наследуют шрифт — иначе браузер подставляет свой и контролы
выпадают из типографики страницы. */
button, input, select, textarea {
font: inherit;
color: inherit;
}
/* ── Фокус ────────────────────────────────────────────────────────────────
Видимый фокус обязателен: панелью пользуются с клавиатуры. Кольцо рисуем
тенью, а не outline, чтобы оно повторяло скругление контрола. */
:focus { outline: none; }
:focus-visible {
outline: none;
box-shadow: var(--ui-ring);
border-radius: var(--ui-radius-sm);
}
/* Числа в колонках должны стоять столбиком */
[data-nums], .ui-nums { font-variant-numeric: tabular-nums; }
/* ── Скроллбары ──────────────────────────────────────────────────────────
В панели много областей со своей прокруткой; дефолтные полосы съедают
место и спорят с плотностью интерфейса. */
* { scrollbar-width: thin; scrollbar-color: var(--ui-neutral-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--ui-neutral-300);
border: 3px solid transparent;
background-clip: content-box;
border-radius: var(--ui-radius-full);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ui-neutral-400); background-clip: content-box; }
/* ── Статичная раскладка (opt-in) ────────────────────────────────────────
Класс на : документ не прокручивается никогда, высота передаётся
каркасу. Прокрутка — только в .ui-scroll внутри компонентов. */
html.ui-static-root,
html.ui-static-root body {
height: 100%;
overflow: hidden;
}
html.ui-static-root body { margin: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}