/**
 * Слой 2 — тема «ПРИНТ-ФОТО».
 *
 * Палитра и характер сняты с прайсов салона (`docs/materials/`): белая мятая
 * бумага, голубые и бирюзовые всплески по углам, оранжевые диагонали, лента-
 * указатель под названием раздела, крупный чёрный гротеск заглавными.
 *
 * Тема переопределяет ТОЛЬКО значения токенов. Разметку она не трогает и
 * примитивы селекторами не стилизует: нужна другая кнопка — меняется токен.
 */

@font-face {
    font-family: "Oswald";
    src: url("/assets/fonts/oswald-cyrillic.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    /* Кириллица плюс знаки препинания: латиница в заголовках лендинга
       не используется — ФЗ-53 «О государственном языке». */
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    /* ── Поверхности: бумага, а не белизна экрана ────────────────────────── */
    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --surface-tint: #f2f5f8;
    --surface-panel: #eaf1f6;
    --surface-invert: #10171d;
    --surface-line: #dfe5ec;

    /* ── Текст: тот же графит, что на печатных листах ────────────────────── */
    --ink-strong: #14181c;
    --ink-body: #2f363d;
    --ink-muted: #5d6875;
    --ink-invert: #ffffff;
    --ink-invert-muted: #b9c6d2;

    /* ── Акцент: оранжевая лента прайса ──────────────────────────────────── */
    /* На листах лента #F0B040. Как заливка кнопки она даёт контраст 1.9:1 с
       белым текстом, поэтому в интерфейсе работает с ТЁМНЫМ текстом
       (--accent-ink), а для ссылок и мелочи взят затемнённый тон. */
    --accent: #f0b040;
    --accent-strong: #a05c05;
    --accent-soft: #fdf1dc;
    --accent-ink: #1a1205;

    /* Голубой со всплесков — второй акцент, для ссылок и отметок. */
    --accent-second: #0b74a8;
    --accent-second-soft: #e2f3fb;

    /* ── Семантика ───────────────────────────────────────────────────────── */
    --ok: #10653f;
    --ok-soft: #e4f3ea;
    --warn: #7a4f00;
    --warn-soft: #fdf2da;
    --danger: #96190f;
    --danger-soft: #fcebe9;

    /* ── Форма: прямее и жёстче, как печать на плотной бумаге ────────────── */
    --radius-button: 6px;
    --radius-card: 10px;
    --radius-field: 6px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(16, 23, 29, .05), 0 10px 26px rgba(16, 23, 29, .07);
    --shadow-lift: 0 8px 18px rgba(16, 23, 29, .12), 0 22px 46px rgba(16, 23, 29, .12);
    --shadow-inset-line: inset 0 -1px 0 var(--surface-line);

    /* ── Типографика: гротеск заглавными в заголовках, как на прайсах ───── */
    --font-display: "Oswald", "PT Sans Narrow", system-ui, sans-serif;
    --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display-transform: uppercase;
    --display-tracking: .01em;
    --display-weight: 700;

    /* Шкала: у узкого гротеска верх крупнее, а низ намеренно мельче —
       иначе «ФОТОГРАФИИ» одним словом не помещается в колонку на 320 пикселях. */
    --step--1: clamp(.78rem, .75rem + .12vw, .86rem);
    --step-0:  clamp(.95rem, .92rem + .16vw, 1.06rem);
    --step-1:  clamp(1.06rem, 1rem + .32vw, 1.28rem);
    --step-2:  clamp(1.22rem, 1.1rem + .56vw, 1.6rem);
    --step-3:  clamp(1.4rem, 1.18rem + 1vw, 2.1rem);
    --step-4:  clamp(1.62rem, 1.24rem + 1.8vw, 2.9rem);
    --step-5:  clamp(1.9rem, 1.36rem + 2.6vw, 3.6rem);
    --step-6:  clamp(2.1rem, 1.4rem + 3.6vw, 4.4rem);

    /* ── Движение: короткое и функциональное ─────────────────────────────── */
    --motion-fast: 130ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --motion-ease: cubic-bezier(.2, .65, .3, 1);

    /* ── Меры ────────────────────────────────────────────────────────────── */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: 18px;
    --gap-lg: 28px;
    --gap-xl: 46px;
    --measure: 66ch;
    --radius-pill: 999px;
    --shadow-lift: 0 8px 18px rgba(16, 23, 29, .12), 0 22px 46px rgba(16, 23, 29, .12);

    /* ── Ритм ────────────────────────────────────────────────────────────── */
    --container: min(94vw, 1280px);
    --container-narrow: min(94vw, 900px);
    --section-y: clamp(40px, 4vw, 64px);

    /* ── Фон: фирменный меш и мятая бумага ───────────────────────────────── */
    /* Подложками были размытые кадры прайсовых листов. Графические прайсы сняты
       со страницы целиком — вместе с фонами: даже под вуалью кадр читается как
       чужой прайс. Фон держат меш и текстура бумаги ниже; токены остаются в
       контракте, вернуть картинку — одна строка. */
    --bg-hero: none;
    --bg-tint: none;
    --bg-panel: none;
    --bg-invert: none;

    /* Вуаль гасила кадр под секцией. Кадра нет — вуаль обнулена: белым по .88
       она смыла бы тонированные секции до бумажно-белого. */
    --veil-light: 0;
    --veil-panel: 0;
    --veil-invert: 0;

    --mesh-hero: radial-gradient(70% 90% at 12% 0%, rgba(0, 160, 224, .22), transparent 62%),
                 radial-gradient(60% 80% at 92% 12%, rgba(240, 176, 64, .22), transparent 60%),
                 radial-gradient(50% 60% at 50% 100%, rgba(0, 229, 240, .12), transparent 70%);
    --mesh-tint: radial-gradient(60% 100% at 100% 0%, rgba(0, 160, 224, .16), transparent 60%),
                 radial-gradient(40% 80% at 0% 100%, rgba(240, 176, 64, .14), transparent 65%);

    /* Мятая бумага: тонкая штриховка. Именно repeating-градиент — обычный
       linear-gradient без background-size не тайлится, а растягивается. */
    --paper-texture: repeating-linear-gradient(
        118deg,
        rgba(16, 23, 29, .022) 0 2px,
        rgba(255, 255, 255, 0) 2px 7px
    );
}