/*
 * ИИАТОМ-Маркет — base.css
 *
 * Сброс, типографика, контейнер и разметочные примитивы. Компоненты (кнопки, поля,
 * карточки и т.д.) — в components.css. Значения — исключительно var(--am-*) из tokens.css,
 * ни одного literal HEX/px-радиуса/своей длительности анимации здесь нет и не должно быть.
 *
 * Порядок подключения фиксирует inc/class-am-assets.php: tokens.css → base.css → components.css.
 */

/* ---------------------------------------------------------------------------------------
 * 1. Сброс
 * ------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 360px; /* PRODUCT.md: мобильный минимум 360px, кабинет обязан работать */
    background: var(--am-bg);
    color: var(--am-text);
    font-family: var(--am-font);
    font-size: var(--am-fs-body);
    line-height: var(--am-lh-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote {
    margin: 0;
}

ul[class], ol[class] {
    padding: 0;
    list-style: none;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
}

a {
    color: var(--am-link);
    text-decoration: none;
}

a:hover {
    color: var(--am-link-hover);
}

/* Выделение текста — брендовый лайм, как в макете. */
::selection {
    background: var(--am-action);
    color: var(--am-text-on-lime);
}

/* Фокус виден всегда: outline:none без замены — дефект (CONTRACT.md, «Дизайн»). */
:focus-visible {
    outline: 2px solid var(--am-focus);
    outline-offset: 2px;
    border-radius: var(--am-r-sm);
}

/* Мышь/тач не должны видеть системную рамку там, где есть :focus-visible — двух рамок не нужно. */
:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------------------------
 * 2. Типографика
 * ------------------------------------------------------------------------------------- */

.am-h1, .am-hero-title {
    font-size: var(--am-fs-h1);
    font-weight: var(--am-fw-black);
    line-height: var(--am-lh-tight);
    letter-spacing: var(--am-ls-heading);
    color: var(--am-text);
}

.am-hero-title {
    font-size: var(--am-fs-hero);
    letter-spacing: var(--am-ls-hero);
}

/* fw-bold, не fw-black: h2 — рядовой заголовок секции, повторяется много раз на странице.
 * Чёрным начертанием на каждом такое повторение читается как инфостиль ("ЖМИ СЮДА"), не как
 * спокойный дорогой интерфейс (CONTRACT.md, задача редизайна §2). fw-black остаётся только
 * у h1/hero-title — это заголовок уровня страницы, один на экран, там вес уместен. */
.am-h2 {
    font-size: var(--am-fs-h2);
    font-weight: var(--am-fw-bold);
    line-height: var(--am-lh-heading);
    letter-spacing: var(--am-ls-heading);
    color: var(--am-text);
}

.am-h3 {
    font-size: var(--am-fs-h3);
    font-weight: var(--am-fw-bold);
    line-height: var(--am-lh-heading);
    color: var(--am-text);
}

.am-h4 {
    font-size: var(--am-fs-h4);
    font-weight: var(--am-fw-bold);
    line-height: var(--am-lh-heading);
    color: var(--am-text);
}

/* Эйбро — ТОЛЬКО моно, uppercase, разрядка. Используется точечно, не над каждой секцией подряд. */
.am-eyebrow {
    display: inline-block;
    font-family: var(--am-font-mono);
    font-size: var(--am-fs-eyebrow);
    font-weight: var(--am-fw-medium);
    letter-spacing: var(--am-ls-eyebrow);
    text-transform: uppercase;
    /* Семантического токена под "фиолетовый акцентный текст" в tokens.css нет — ближайший по
     * смыслу и по значению --am-link-hover (тот же #7B2FF7). См. отчёт агента, раздел "гочи". */
    color: var(--am-link-hover);
}

.am-eyebrow--on-dark {
    color: var(--am-eyebrow-on-inverse);
}

.am-body {
    font-size: var(--am-fs-body);
    line-height: var(--am-lh-body);
    color: var(--am-text-muted);
}

.am-small {
    font-size: var(--am-fs-sm);
    color: var(--am-text-subtle);
}

.am-mono {
    font-family: var(--am-font-mono);
}

.am-on-dark {
    color: var(--am-text-on-dark);
}

.am-on-dark .am-body,
.am-body--on-dark {
    color: var(--am-text-on-dark-muted);
}

/* ---------------------------------------------------------------------------------------
 * 3. Контейнер, секции, проза
 * ------------------------------------------------------------------------------------- */

.am-container {
    max-width: var(--am-container);
    margin-inline: auto;
    padding-inline: var(--am-s-5);
}

@media (min-width: 700px) {
    .am-container {
        padding-inline: var(--am-s-8);
    }
}

/* Ритм между секциями лендинга намеренно неровный — см. tokens.css --am-gap-section. */
.am-section {
    padding-block: var(--am-gap-section);
}

.am-section + .am-section {
    padding-top: 0;
}

.am-prose {
    max-width: var(--am-measure);
}

.am-prose p + p,
.am-prose ul,
.am-prose ol {
    margin-top: var(--am-s-4);
}

/* Юридические документы и статьи — уже колонка, а не полная ширина контейнера. */
.am-doc {
    max-width: var(--am-container-text);
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------------------
 * 4. Утилиты
 * ------------------------------------------------------------------------------------- */

.am-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Пропустить навигацию — первый интерактивный элемент документа, виден только по фокусу. */
.am-skip-link {
    position: absolute;
    top: -100px;
    left: var(--am-s-4);
    z-index: var(--am-z-toast);
    padding: var(--am-s-2) var(--am-s-4);
    background: var(--am-action);
    color: var(--am-text-on-lime);
    border-radius: var(--am-r-md);
    font-weight: var(--am-fw-bold);
    transition: top var(--am-dur-base) var(--am-ease-out);
}

.am-skip-link:focus-visible {
    top: var(--am-s-4);
}

.am-main {
    display: block;
    min-height: 40vh; /* подвал не должен подпрыгивать к середине экрана на короткой странице */
}

/* Любая широкая таблица/диаграмма скроллится в своей рамке, не по всей странице (правило артефактов
 * применимо и к теме: горизонтальный скролл body на 360px — дефект). */
.am-table-wrap,
.am-scroll-x {
    overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}