/* ============================================================ AURA · ЕДИНЫЙ СЛОЙ ТОКЕНОВ (единственный источник правды) Подключается ПЕРВЫМ, до aura.css и theme-sun.css. Спринт B1 (SPEC §5). Состав слоя: 1) палитра — поверхности, текст, границы, бренд, статусы; 2) типографическая шкала — 7 ступеней, ratio ≈ 1,2; 3) шкала отступов — кратность 4 px; 4) именованные слои z-index — 11 ступеней, без «магических» чисел; 5) движение, радиусы, тени; 6) алиасы прежних имён — чтобы aura.css и theme-sun.css продолжали работать без правок до слияния CSS (Спринт B2). ПРАВИЛА СЛОЯ - Новые имена токенов вводит B1, литералы в старых файлах вычищает B2. - Ни одно правило вида «селектор{...}» здесь не объявляется: слой только определяет переменные и потому не может переопределить вид страницы. - Значение, помеченное ИСПРАВЛЕНО, ранее не было объявлено вовсе (var() не подставлялся, свойство отбрасывалось). Прежнее поведение браузера в комментарии к каждому такому токену. ============================================================ */ :root{ /* ---------- 1. ПОВЕРХНОСТИ ---------- */ --bg: #FFFFFF; /* основной фон страницы */ /* ЕДИНАЯ ПОДЛОЖКА. До 30.09.2026 светлые плашки жили в четырёх разных тонах (#F2F2F2, #FAFAFA, #F7F7F7 и тёплый #EFEDE8 у полос .sec--grey), поэтому на одних страницах подложка выглядела темнее, на других светлее. Теперь это один тёплый тон: он мягче прежнего полосового и роднит плашки с тёплым фоном страницы #F7F5F1. Выбран заказчиком 30.09.2026. */ --tint: #F4F2ED; /* единственная светлая подложка: полосы секций, панели, плитки, чипы, шапки таблиц, карточки на сером, фоны иконок */ --tint-2: #ECE7DF; /* второй шаг того же тона: только состояния (hover, focus, выбранный пункт), чтобы состояние читалось поверх подложки --tint */ --bg-2: var(--tint); /* чередование секций, светлая подложка */ --bg-3: var(--tint); /* мягкая подложка (карточки на сером) */ --surface: #FFFFFF; /* карточка, панель, модальное окно */ --surface-2: var(--tint); /* вложенная поверхность внутри карточки */ --overlay: rgba(0,0,0,.5); /* затемнение под модалкой */ /* ---------- 2. ТЕКСТ ---------- */ --ink: #000000; /* заголовки, цены, основной текст */ --ink-2: #4A4A4A; /* вторичный текст (7,9:1 на #FFFFFF) */ --ink-3: #666666; /* приглушённый текст, подписи (5,7:1 на #FFFFFF, 4,9:1 на подложке --tint) */ --ink-muted: #666666; /* минимальный допустимый серый текста */ --ink-invert: #FFFFFF; /* текст на тёмной подложке */ /* ---------- 3. ГРАНИЦЫ ---------- */ --border: #E6E6E6; /* видимая рамка */ --border-2: #EFEFEF; /* мягкая рамка-разделитель */ --focus-ring: #000000; /* обводка фокуса: 21:1 на #FFFFFF, 15,5:1 на подложке --tint */ /* ---------- 4. БРЕНД И СТАТУСЫ ---------- */ /* Тема заказчика (SPEC §6.3, решение 3): светлая «Sunlight», первичное действие — чёрное, вторичное — белое с чёрной рамкой. Поэтому --brand и --brand-strong равны #000000: это осознанное значение, а не потерянный золотой оттенок прежней тёплой темы. */ --brand: #000000; /* первичное действие, активные элементы */ --brand-strong: #333333; /* первичное действие, hover (как theme-sun.css:64) */ --brand-soft: var(--tint); /* светлая подложка под чёрным акцентом */ --brand-ink: #FFFFFF; /* текст на первичном действии */ --danger: #111111; /* скидка, распродажа, ошибка — без красного (заказчик, 01.10.2026: красный только у сердечка) */ --danger-bg: #111111; /* плотная заливка бейджа с белым текстом */ --heart: #D90000; /* единственный красный на сайте — сердечко «Избранное» */ --success: #14713C; /* «в наличии», успех (5,9:1 на #FFFFFF) */ --success-soft: #E7EFEA; /* светлая изумрудная подложка */ /* ---------- 5. ТИПОГРАФИКА ---------- */ --font-head: "Montserrat","Montserrat Fallback","Manrope",Arial,Helvetica,sans-serif; --font-sans: "Manrope","Manrope Fallback","Inter",Arial,Helvetica,sans-serif; /* Шкала: 7 ступеней, ratio 1,2; каждая ступень целая в px. Уникальных объявленных размеров в проекте — 66 (SPEC §3 «Шкалы»). */ --fs-xs: 12px; /* бейджи, счётчики, подписи (минимум по SPEC) */ --fs-sm: 14px; /* вторичный текст, подписи полей */ --fs-md: 16px; /* основной текст */ --fs-lg: 19px; /* лид-абзац, подзаголовок карточки */ --fs-xl: 23px; /* h3, крупная цена */ --fs-2xl: 28px; /* h2 */ --fs-3xl: 34px; /* h1 секции */ --fs-display: clamp(34px,5.2vw,66px); /* витринный заголовок hero */ --lh-tight: 1.2; /* заголовки */ --lh-snug: 1.35; /* короткий текст до 2 строк */ --lh-body: 1.55; /* основной текст (SPEC: ≥ 1,4) */ --lh-loose: 1.7; /* длинные абзацы */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* плотные подписи и цены */ --tracking-tight: -.01em; --tracking-wide: .06em; /* капс-подписи */ /* ---------- 6. ОТСТУПЫ (кратность 4 px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- 7. СЛОИ z-index ---------- Было 28 разных чисел; 70/90/105/120 занимались по два-три раза (SPEC §3 «CSS»). Порядок наложения сохранён, числа заменены именами. */ --z-under: -1; /* декоративные подложки под контентом */ --z-base: 0; /* обычный поток */ --z-raised: 1; /* приподнятая карточка, бейдж на фото */ --z-sticky: 50; /* липкие внутрисекционные элементы, шапка таблицы */ --z-header: 60; /* шапка сайта */ --z-mobbar: 70; /* нижнее мобильное меню */ --z-buybar: 72; /* панель покупки (выше мобильного меню) */ --z-float: 80; /* плавающие кнопки: «наверх», «позвонить» */ --z-cookie: 90; /* плашка cookie (перекрывает плавающие кнопки) */ --z-drawer: 105; /* выезжающая корзина, панель фильтров */ --z-overlay: 120; /* затемнение под модалкой */ --z-modal: 130; /* модальное окно, поп-ап звонка */ --z-call: 140; /* панель обратного звонка — поверх модалки */ --z-debug: 200; /* служебные слои вне интерфейса */ /* ---------- 8. БРЕЙКПОИНТЫ ---------- CSS не умеет var() в @media. Значения ниже — единственный справочник для B2/B3: было 20 разных порогов, остаётся 4. 480 — крупный телефон 768 — планшет, граница мобильной вёрстки 1080 — небольшой ноутбук 1440 — широкий экран */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1080px; --bp-xl: 1440px; /* ---------- 9. РАДИУСЫ, ТЕНИ, ДВИЖЕНИЕ ---------- */ --radius-0: 0px; /* тема квадратная: скруглений нет */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 999px; /* единственное исключение — круглые счётчики */ --shadow-none: none; --shadow-card: 0 1px 3px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.08); --shadow-pop: 0 12px 32px rgba(0,0,0,.12); --shadow-bar: 0 -6px 24px rgba(0,0,0,.10); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: .15s; --dur: .3s; --dur-slow: .55s; --hairline: linear-gradient(90deg,transparent,rgba(196,160,106,.6),transparent); /* ============================================================ АЛИАСЫ ПРЕЖНИХ ИМЁН — совместимость до Спринта B2. B2 переводит правила на имена выше и удаляет этот блок. ============================================================ */ --card: var(--surface); --grey: var(--ink-muted); --ink-soft: var(--ink-2); --line: var(--border); --line2: var(--border-2); --border-l: var(--border-2); /* мягкая рамка: имя используется 85 раз в aura.css, значение #EFEFEF сохранено */ --white: #FFFFFF; --mint: var(--bg-2); --ivory: var(--bg-2); --bg-grey: var(--bg-2); /* ИСПРАВЛЕНО: не был объявлен; браузер отбрасывал background в .drawer .d-foot и .sec--grey. Прежнее значение токена (#F0EBDF) относилось к тёплой теме и отменено решением SPEC §6.3 №3 */ --bg-soft: var(--bg-3); --card-2: var(--surface-2); --line-soft: var(--border-2); --line-gold: var(--border); /* золотой линии в текущей теме нет */ --gold: var(--brand); /* исторические имена акцента */ --gold-2: var(--brand); --gold-d: var(--ink-2); --gold-soft: var(--brand-soft); --gold-2-soft: var(--brand-soft); --emerald: var(--brand); --emerald-soft: var(--brand-soft); --emerald-soft2: var(--success-soft); --emerald-d: var(--brand-strong); /* ИСПРАВЛЕНО: не был объявлен; браузер отбрасывал background в .btn-p:hover и .callback-btn:hover, ломая градиенты .bonuscard и .grad-e */ --sale: var(--danger); /* ИСПРАВЛЕНО: не был объявлен; браузер отбрасывал background у .tg.sale, .pricebig .save, .fav.on и .ic .cnt */ --terra: var(--danger); --red: var(--danger); --red-bg: var(--danger-bg); --ok: var(--success); --head: var(--font-head); --sans: var(--font-sans); --serif: var(--font-head); --r: var(--radius-0); --r-sm: var(--radius-sm); --r-lg: var(--radius-lg); --r-xl: var(--radius-0); --shadow-sm: var(--shadow-none); --shadow: var(--shadow-none); --shadow-lg: var(--shadow-pop); }