/* ==========================================================================
   МосЭкоСила System v3 — base.css
   Базовый слой. Подключается ПЕРВЫМ на всех страницах.

   Порядок слоёв на странице:
     1. base.css        — этот файл: шрифты, токены, reset, сетка, утилиты
     2. home.css / interior.css — композиции конкретных страниц
     3. components.css  — переиспользуемые компоненты
     4. system-v3.css   — композиционные паттерны ds-*
     5. ui.css          — скомпилированный слой (не редактировать вручную)

   Содержание:
     1. Шрифты
     2. Токены
     3. Reset и базовая типографика
     4. Контейнер
     5. Ритм секций
     6. Текстовые утилиты
     7. Хлебные крошки
     8. Служебное (skip-ссылка, hidden, reduced motion)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Шрифты
   -------------------------------------------------------------------------- */

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF
}

/* --------------------------------------------------------------------------
   2. Токены

   Единственный источник авторских токенов. Канонические значения совпадают
   со шкалой brand из src/css/app.css (@theme) — оттуда же в ui.css приходят
   --color-brand-*, --color-ink, --color-muted, --color-line, --color-surface.
   Новые оттенки сначала добавляются сюда, случайные значения запрещены.
   -------------------------------------------------------------------------- */

:root {
    /* Фирменный зелёный */
    --green: #327b13;
    /* brand-600: кнопки, акценты, маркеры */
    --green-dark: #245b0d;
    /* brand-700: hover */
    --green-deep: #193f09;
    /* brand-800: active, тёмные акценты */
    --green-soft: #73a85c;
    /* brand-400: focus-visible */
    --pale: #eaf5e4;
    /* brand-100: мягкие подложки */

    /* Нейтральные */
    --ink: #20281e;
    --muted: #60685c;
    --line: #dbe2d7;
    --paper: #f3f6f1;
    --surface: #ffffff;

    /* Форма и движение */
    --radius: 1.2rem;
    --radius-control: 0.8rem;
    --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);

    /* Сетка */
    --container: 144rem;

    /* Ошибки форм */
    --error: #b42318
}

/* --------------------------------------------------------------------------
   3. Reset и базовая типографика
   -------------------------------------------------------------------------- */

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

html {
    /* Корневой размер задаёт ui.css (жидкая шкала: 100vw/144 до 1440px,
       фиксированные 10px на десктопе). Здесь его дублировать нельзя —
       иначе правила конфликтуют по каскаду. */
    scroll-behavior: smooth;
    scroll-padding-top: 11rem
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font: 1.6rem/1.65 Manrope, Arial, sans-serif;
    -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
p,
figure {
    margin: 0
}

h1,
h2,
h3 {
    line-height: 1.15;
    text-wrap: balance;
    letter-spacing: -0.025em
}

h1 {
    font-size: 5rem;
    max-width: 92rem;
    font-weight: 600;
    line-height: 1.12
}

h2 {
    font-size: 3.4rem;
    font-weight: 600
}

h3 {
    font-size: 2.2rem;
    font-weight: 600
}

p {
    max-width: 72ch;
    margin-top: 1.6rem;
    line-height: 1.65
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    color: var(--green)
}

button,
input,
select {
    font: inherit
}

button,
a,
input,
select,
summary {
    touch-action: manipulation
}

button {
    cursor: pointer;
    color: inherit
}

button:disabled {
    opacity: 0.6;
    cursor: wait
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

:is(a, button, input, select, summary):focus-visible {
    outline: 0.3rem solid var(--green-soft);
    outline-offset: 0.4rem
}

/* --------------------------------------------------------------------------
   4. Контейнер

   Рабочая ширина макета. ui.css задаёт тот же контейнер через
   --layout-container/--layout-gutter последним слоем; это объявление —
   базовый fallback и опора для авторских слоёв.
   -------------------------------------------------------------------------- */

.container,
.ds-shell {
    width: min(var(--container), calc(100% - 6.4rem));
    margin-inline: auto
}

/* --------------------------------------------------------------------------
   5. Ритм секций

   <section> несёт только ритм и поверхность. Композиционные классы
   (сетки, колонки) ставятся на внутренний .container или глубже,
   но не на саму секцию.

   Правильно:   <section class="section paper">
                  <div class="container ds-choices">…</div>
                </section>

   Исключения — цельные композиции первого экрана и полосы с собственным
   ритмом: .ds-hero, .v-hero, .trust, .start, .v-history, .error-layout.
   Они ставятся на секцию вместе с .container.
   -------------------------------------------------------------------------- */

.section {
    padding: 8rem 0
}

.section-documentList h2 {
    margin-bottom: 2.6rem;
}

.section-news {
    padding-top: 0 !important;
}

.paper {
    background: var(--paper)
}

/* --------------------------------------------------------------------------
   6. Текстовые утилиты
   -------------------------------------------------------------------------- */

.eyebrow {
    display: block;
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
}

.lead {
    font-size: 1.8rem;
    line-height: 1.65;
    color: var(--muted);
    margin-top: 2.4rem;
    max-width: 65rem
}

.caption {
    font-size: 1.3rem;
    color: var(--muted);
    margin-top: 1.2rem
}

.muted {
    color: var(--muted)
}

.intro {
    color: var(--muted);
    max-width: 65rem;
    margin-top: 1.6rem
}

.v-icon {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
    flex-shrink: 0
}

/* --------------------------------------------------------------------------
   7. Хлебные крошки
   -------------------------------------------------------------------------- */

.breadcrumbs {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 1.2rem;
    margin: 2.4rem 0
}

.breadcrumbs a {
    text-decoration: underline;
    text-underline-offset: 0.4rem
}

/* --------------------------------------------------------------------------
   8. Служебное
   -------------------------------------------------------------------------- */

.skip {
    position: fixed;
    top: 0.8rem;
    left: 1.6rem;
    z-index: 100;
    padding: 1.2rem;
    background: var(--surface);
    transform: translateY(-180%)
}

.skip:focus {
    transform: none
}

[hidden] {
    display: none !important
}

body.mobile-nav-open {
    overflow: hidden
}

body:has(dialog[open]) {
    overflow: hidden
}

/* --------------------------------------------------------------------------
   Адаптив базового слоя
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .section {
        padding: 7.2rem 0
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 3.2rem
    }

    .section {
        padding: 4.8rem 0
    }

    .breadcrumbs {
        margin: 2rem 0
    }
}

@media (max-width: 600px) {

    .container,
    .ds-shell {
        width: calc(100% - 4rem)
    }
}

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

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }
}