/* ЗРДК — базовые правила поверх tokens.css (шаблон хэндофа 19, templates/base.css).
 * Пишутся руками и используют только переменные. Порядок подключения: fonts.css → tokens.css → base.css → components.css → страница.
 * Тема по умолчанию — data-theme="dark" на <html> (грабля 12 хэндофа 19: не на <body> и не на секции). */

html { color-scheme: light; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: var(--type-body); }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-ink); }

/* Без этого классы с display перебивают атрибут hidden (хэндоф заявок, грабля 12). */
[hidden] { display: none !important; }

/* Фокус с клавиатуры — двухслойное кольцо: видно на любом фоне, включая заливку accent.
 * :focus-visible (клавиатура) ≠ :focus поля ввода (рамка при клике мышью) — это разные состояния. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

::selection { background: var(--selection); }

/* Числа в таблицах, KPI, ценах, пульсе — табличными цифрами, выровнены по разрядам. */
.num, td.num, [data-num], .zr-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Скрыто визуально, доступно скринридеру. */
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Плотность: «удобный» (клиент) по умолчанию, «компактный» (персонал) — атрибутом на <html> или контейнере. */
[data-density="compact"] { --control-md: var(--control-sm); --radius-sm: var(--radius-xs); --type-body: var(--type-body-sm); }

/* Медиа-заглушка, пока нет фото (вместо серого прямоугольника — полосатая плашка). */
.media-placeholder { background: repeating-linear-gradient(135deg, var(--surface-2) 0 var(--space-3), var(--surface-3) var(--space-3) var(--space-6)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}