/* * ИИАТОМ-Маркет — токены дизайн-системы. * * Единственный источник значений цвета, шрифта, радиуса, тени, отступа и движения. * Ни один другой файл не имеет права объявлять свой HEX, свой radius или свою длительность * анимации: макет задавал всё инлайн-литералами, и если это скопировать как есть, шесть экранов * разъедутся в шесть палитр. Нужен новый оттенок — он добавляется здесь, а не по месту. * * Источник значений — docs/spec/DESIGN_SYSTEM.md (разбор design/ATOM Platform.dc.html). * Пять цветов отличаются от макета: они не проходили WCAG 4.5:1 и были затемнены до порога * с сохранением оттенка и насыщенности. Каждый такой случай помечен ниже словом ДОСТУПНОСТЬ * с исходным и новым контрастом — это не вкусовая правка, её нельзя откатить «как в макете». */ :root { /* --------------------------------------------------------------------- * 1. Сырая палитра. Имена по факту цвета, использовать напрямую нельзя — * в разметке применяются только семантические токены из блока 2. * ------------------------------------------------------------------ */ /* Тёмный ряд: hero, сайдбар, модалки, тултипы, футер-CTA */ --am-navy-900: #080B20; --am-navy-800: #0A0E26; --am-navy-700: #0B1030; --am-navy-600: #101A3C; --am-navy-500: #141A44; --am-navy-400: #161C4A; /* Светлый ряд: фон страницы и контентные поверхности */ --am-paper: #EFF1F8; --am-white: #FFFFFF; --am-gray-50: #F8F9FD; --am-gray-100: #F6F7FC; --am-gray-150: #F2F4FA; --am-gray-200: #EEF0F8; --am-gray-300: #EBEDF7; --am-gray-400: #E3E6F2; --am-gray-500: #D5DAEC; --am-gray-600: #C4CDF0; /* Текст */ --am-ink-900: #101A3C; /* основной на светлом, 15.07:1 на --am-paper */ --am-ink-700: #3D4770; /* лейблы полей, 7.97:1 */ --am-ink-500: #5A648C; /* вторичный, 5.12:1 */ --am-ink-400: #616B8F; /* ДОСТУПНОСТЬ: макет #6C769B давал 4.06–4.47:1 на светлых * поверхностях — ниже порога для плейсхолдера. Затемнён до * 4.64:1 на --am-paper и 5.24:1 на белом. */ --am-ink-on-dark-100: #DDE3F5; /* навигация на тёмном, 14.48:1 */ --am-ink-on-dark-200: #C3CAE6; --am-ink-on-dark-300: #B7C0DE; /* параграфы на тёмном, 10.26:1 */ --am-ink-on-dark-400: #98A2C8; /* подписи на тёмном, 6.61:1 на --am-navy-500 */ /* Бренд-акценты */ --am-lime: #C8F53C; /* главный CTA, кредиты, success. 14.66:1 к --am-navy-700 */ --am-blue: #2A56FF; /* ссылки, primary-градиент. 4.80:1 на --am-paper */ --am-violet: #7B2FF7; /* hover ссылок, эйбро-лейблы на светлом */ --am-magenta: #FF4D9D; /* внимание, ошибки, третья точка градиентов */ --am-orange: #FF9F1A; /* предупреждение */ /* --------------------------------------------------------------------- * 2. Семантика. В разметке используется ТОЛЬКО этот блок. * ------------------------------------------------------------------ */ /* Поверхности */ --am-bg: var(--am-paper); --am-surface: var(--am-white); --am-surface-sunken: var(--am-gray-50); --am-surface-muted: var(--am-gray-150); /* Инверсный слой — БРЕНДОВЫЕ тёмные поверхности: hero, модалка/дровер, тост, cookie-баннер, * шапка сайта, активные пилюли/чекбоксы. Это не «противоположность фону», а фирменный тёмный * блок — его роль в дизайне ОДНА И ТА ЖЕ в обеих темах, поэтому значения ниже одинаковые для * light/dark и не переопределяются ни в @media (prefers-color-scheme: dark), ни в * :root[data-theme]. ⛔ ИНЦИДЕНТ 02.08: раньше этот слой переворачивался (тёмный ↔ светлый) * вместе с темой «чтобы контрастировать с ЛЮБЫМ --am-bg» — на практике часть потребителей * (белый текст бейджей/заголовков через СЫРОЙ --am-white, а не --am-text-on-inverse) не * переворачивалась вместе с фоном и в тёмной теме получалось белое по белому (hero, * шапка, карточка «Было»). Урок: у брендовой поверхности не бывает «противоположной» темы. * Раздел 3. * Значения на 1 ступень светлее прежних (navy-700→navy-600, navy-500→navy-400) — иначе в * тёмной теме поверхность почти сливается с новым тёмным --am-bg (замер: 1.03:1 на navy-700 * против нового --am-bg дал бы invisible-layer). Плюс --am-border-inverse усилен до .18 — * hairline-граница держит блок отдельным слоем даже там, где заливка сама по себе близка * к фону (тот же приём, что и у обычных --am-surface-карточек в тёмной теме). */ --am-surface-inverse: var(--am-navy-600); --am-surface-inverse-2: var(--am-navy-400); --am-border-inverse: rgba(255, 255, 255, .18); --am-text-on-inverse: var(--am-ink-on-dark-100); --am-text-on-inverse-muted: var(--am-ink-on-dark-300); --am-text-on-inverse-subtle: var(--am-ink-on-dark-400); /* Акцентный (не нейтральный) цвет текста на инверсной поверхности — эйбро-лейблы поверх * hero/тёмных карточек. Лайм на navy — 14.66:1 на --am-surface-inverse, держит в обеих темах, * т.к. поверхность больше не переворачивается (раньше здесь был спецкейс с --am-violet * ТОЛЬКО для тёмной темы — он ушёл вместе с переворотом). */ --am-eyebrow-on-inverse: var(--am-action); /* Ссылка на инверсной поверхности. --am-link (#2A56FF) рассчитан на светлый фон и на * тёмно-синей шапке даёт 3.14:1 — ниже нормы 4.5. Осветлённый синий держит 8:1 на * --am-surface-inverse и остаётся узнаваемо «ссылочным», а не просто светлым текстом. * Константа, как и весь инверсный слой: поверхность одинакова в обеих темах. */ --am-link-on-inverse: #9DB6FF; /* Старые имена — алиасы инверсного слоя. 8 файлов assets/css/pages/* (Ф2/Ф3, вне владения * Ф1) уже ссылаются на --am-surface-dark/--am-text-on-dark/--am-border-dark напрямую — * переименовывать их не наше право (CONTRACT.md §9), а тёмная тема обязана работать и там. * Алиасы решают это без правки чужих файлов: значение приходит из инверсного слоя выше и * переворачивается вместе с ним. Новый код (components.css, будущие компоненты) обращается * к --am-surface-inverse/--am-text-on-inverse напрямую — это и есть текущее имя роли. */ --am-surface-dark: var(--am-surface-inverse); --am-surface-dark-2: var(--am-surface-inverse-2); --am-border-dark: var(--am-border-inverse); --am-text-on-dark: var(--am-text-on-inverse); --am-text-on-dark-muted: var(--am-text-on-inverse-muted); --am-text-on-dark-subtle: var(--am-text-on-inverse-subtle); /* Границы */ --am-border: var(--am-gray-400); --am-border-soft: var(--am-gray-300); --am-border-dashed: var(--am-gray-600); /* Текст */ --am-text: var(--am-ink-900); --am-text-muted: var(--am-ink-500); --am-text-subtle: var(--am-ink-400); --am-text-label: var(--am-ink-700); --am-text-on-lime: var(--am-navy-600); /* 13.43:1 — тёмный текст на лаймовой кнопке */ /* Действия */ --am-action: var(--am-lime); --am-action-hover: #D4FF52; --am-action-text: var(--am-text-on-lime); /* --am-link/--am-link-hover меняют значение в тёмной теме (см. блок «Тёмная тема»), * потому что как ЦВЕТ ТЕКСТА фикс. #2A56FF/#7B2FF7 не держат 4.5:1 на тёмном фоне. * ⛔ Если где-то нужен ФОН кнопки/чипа (заливка, не текст) — бери СЫРЫЕ --am-blue/--am-violet, * не эти токены: заливка не меняется по теме (белый текст поверх неё держит контраст в обеих * темах ровно потому, что заливка не светлеет вместе с --am-link). components.css, * .am-btn--primary-dark:hover — пример такого разведения. */ --am-link: var(--am-blue); --am-link-hover: var(--am-violet); --am-focus: var(--am-violet); /* Состояния. Каждое состояние обязано различаться ТЕКСТОМ, цвет — только усиление: * шесть статусов проекта, различимые лишь оттенком, недоступны при дальтонизме. */ --am-state-neutral-bg: var(--am-gray-200); --am-state-neutral-fg: var(--am-ink-500); --am-state-progress-bg: rgba(42, 86, 255, .14); --am-state-progress-fg: #1344FF; /* ДОСТУПНОСТЬ: макет #2A56FF давал 3.94:1 на своей же * подложке. Затемнён до 4.63:1. */ --am-state-attention-bg: rgba(255, 77, 157, .14); --am-state-attention-fg: #B71F69; /* ДОСТУПНОСТЬ: макет #D6247A давал 3.64:1 → 4.68:1 */ --am-state-success-bg: rgba(200, 245, 60, .28); --am-state-success-fg: #4C6B00; /* 5.71:1 — проходит, оставлен как в макете */ --am-state-published-bg: rgba(123, 47, 247, .14); --am-state-published-fg: #7220F6; /* ДОСТУПНОСТЬ: макет #7B2FF7 давал 4.21:1 → 4.65:1 */ --am-state-warn-bg: rgba(255, 159, 26, .18); --am-state-warn-fg: #965200; /* ДОСТУПНОСТЬ: макет #A85C00 давал 3.95:1 → 4.73:1 */ --am-state-error-bg: var(--am-state-attention-bg); --am-state-error-fg: var(--am-state-attention-fg); /* Градиенты. Список закрытый: новые не изобретать. * hero/panel/drawer/rail — та же брендовая инверсная поверхность выше, только с градиентом * вместо плоской заливки: ОДНИ значения в обеих темах, не переопределяются по теме. Стопы — * на 1 ступень светлее прежних (тот же замер-повод, что у --am-surface-inverse: старые * navy-700→navy-900 у hero практически совпадали по светлоте с новым тёмным --am-bg). * brand/primary/progress/avatar — акцентные, насыщенные сами по себе, от темы не зависят * (и не зависели раньше). */ --am-grad-hero: linear-gradient(160deg, #101A3C, #0A0E26 62%); --am-grad-panel: linear-gradient(150deg, #161C4A, #0B1030); --am-grad-drawer: linear-gradient(170deg, #161C4A, #0B1030); --am-grad-rail: linear-gradient(180deg, #161C4A, #101A3C); --am-grad-brand: linear-gradient(120deg, #2A56FF 0%, #7B2FF7 52%, #FF4D9D 100%); --am-grad-primary: linear-gradient(135deg, #2A56FF, #7B2FF7); --am-grad-progress: linear-gradient(90deg, #C8F53C, #7B2FF7); --am-grad-avatar: linear-gradient(140deg, #7B2FF7, #FF4D9D); /* Полосатая заглушка вместо фото: серый прямоугольник читается как сломанная картинка. * В тёмной теме — тоже переопределена (та же логика, тон темнее). */ --am-grad-nophoto: repeating-linear-gradient(135deg, #EDEFF8 0 6px, #E3E6F4 6px 12px); /* --------------------------------------------------------------------- * 3. Типографика. Шкала фиксированная в rem, не fluid: кабинет — рабочий * интерфейс, плавающий кегль в узкой колонке делает хуже, не лучше. * Fluid clamp() оставлен только заголовкам публичных страниц. * ------------------------------------------------------------------ */ --am-font: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Моно — только для служебной мелочи: эйбро-лейблы, время, цена в токенах, даты, номера * шагов. Заголовки и крупные цифры-метрики набираются основным шрифтом. */ --am-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --am-fs-hero: clamp(1.875rem, 4vw, 3.25rem); /* 30 → 52px, только публичный hero */ --am-fs-h1: clamp(1.375rem, 2.6vw, 2.125rem);/* 22 → 34px */ --am-fs-h2: clamp(1.375rem, 2.4vw, 1.75rem); /* 22 → 28px */ --am-fs-h3: 1.125rem; /* 18px */ --am-fs-h4: 1rem; /* 16px */ --am-fs-body: 0.9375rem; /* 15px */ --am-fs-sm: 0.875rem; /* 14px */ --am-fs-xs: 0.8125rem; /* 13px */ --am-fs-2xs: 0.75rem; /* 12px — минимум для читаемого текста, ниже не опускаться */ --am-fs-eyebrow: 0.6875rem; /* 11px, только моно + uppercase + трекинг */ --am-fw-regular: 400; --am-fw-medium: 500; --am-fw-semi: 600; --am-fw-bold: 700; --am-fw-black: 800; --am-lh-tight: 1.05; --am-lh-heading: 1.2; --am-lh-body: 1.55; /* Отрицательный трекинг только у крупных кеглей. Пол -0.03em: плотнее — буквы слипаются. */ --am-ls-hero: -0.03em; --am-ls-heading: -0.02em; --am-ls-eyebrow: 0.08em; --am-measure: 68ch; /* предел длины строки прозы */ /* --------------------------------------------------------------------- * 4. Радиусы. Шкала сведена из «на глаз»-значений макета в 6 ступеней. * ------------------------------------------------------------------ */ --am-r-xs: 4px; /* точки-индикаторы, мелкие маркеры */ --am-r-sm: 8px; /* бейджи, иконки-кнопки, чипы клавиш */ --am-r-md: 12px; /* кнопки, поля ввода, строки списков */ --am-r-lg: 18px; /* карточки инструментов, слоты фото */ --am-r-xl: 24px; /* виджеты кабинета, блоки конструктора */ --am-r-2xl: 28px; /* hero-контейнеры, крупные секции */ --am-r-pill: 999px; --am-r-full: 50%; /* --------------------------------------------------------------------- * 5. Тени. Все — от тёмно-синего, не от чёрного: чёрная тень на синеватом * фоне выглядит грязной. * ------------------------------------------------------------------ */ --am-sh-card: 0 2px 8px rgba(16, 26, 60, .06); --am-sh-raised: 0 8px 24px rgba(16, 26, 60, .1); --am-sh-hero: 0 40px 90px rgba(9, 13, 40, .32); --am-sh-rail: 0 24px 50px rgba(8, 11, 32, .4); --am-sh-popover: 0 12px 26px rgba(8, 11, 32, .5); --am-sh-modal: 0 40px 80px rgba(8, 11, 32, .5); --am-sh-dropdown: 0 30px 60px rgba(8, 11, 32, .45); --am-sh-toast: 0 20px 44px rgba(8, 11, 32, .45); --am-sh-action: 0 12px 26px rgba(200, 245, 60, .35); --am-sh-sticky: 0 12px 28px rgba(16, 26, 60, .28); /* --------------------------------------------------------------------- * 6. Отступы. В макете шкалы не было (9/11/13/15/17px) — сведено к 4pt. * ------------------------------------------------------------------ */ --am-s-1: 4px; --am-s-2: 8px; --am-s-3: 12px; --am-s-4: 16px; --am-s-5: 20px; --am-s-6: 24px; --am-s-8: 32px; --am-s-10: 40px; --am-s-12: 48px; --am-s-16: 64px; --am-pad-card: var(--am-s-5); --am-pad-section: clamp(24px, 3vw, 42px); --am-gap-grid: var(--am-s-3); /* Ритм между секциями лендинга намеренно неровный: одинаковый шаг читается как таблица. */ --am-gap-section: clamp(48px, 6vw, 88px); --am-container: 1600px; --am-container-text: 760px; /* для юридических документов и статей */ --am-rail-w: 104px; /* ширина рельса, свёрнутое состояние (только иконки) */ --am-rail-w-expanded: 256px; /* ширина рельса, развёрнутое состояние (иконка + подпись) */ /* --------------------------------------------------------------------- * 7. Слои. Осмысленная шкала: произвольных 999 и 9999 в проекте нет. * ------------------------------------------------------------------ */ --am-z-base: 0; --am-z-raised: 10; --am-z-dropdown: 100; --am-z-rail: 200; --am-z-sticky: 300; --am-z-backdrop: 400; --am-z-modal: 500; --am-z-toast: 600; --am-z-tooltip: 700; /* --------------------------------------------------------------------- * 8. Движение. Кабинет — рабочий инструмент: пользователь в потоке и не * должен ждать хореографию. 150–250 мс, выход по экспоненте, без отскока. * ------------------------------------------------------------------ */ --am-dur-fast: 120ms; --am-dur-base: 180ms; --am-dur-slow: 260ms; --am-dur-hero: 520ms; /* только первая загрузка публичной страницы */ --am-ease-out: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */ --am-ease-out-soft: cubic-bezier(.33, 1, .68, 1); /* ease-out-cubic */ --am-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* --------------------------------------------------------------------- * 9. Кабинет — экран инструмента (редизайн 2026-07-28, REDESIGN_2026_07_28/00-CONTRACT.md §2.6). * Владелец файла — поток «навигация» (D), но три следующих переменных запрошены * потоком «экран инструмента» (C) для карточки выбранной модели и слайдера * количества/длительности — они добавлены сюда одним коммитом с --am-rail-w-expanded, * чтобы поток C не ждал отдельной правки этого файла. * ------------------------------------------------------------------ */ --am-selected-border: var(--am-link); --am-selected-bg: color-mix(in srgb, var(--am-link) 6%, var(--am-surface)); --am-slider-track-h: 6px; --am-slider-track-bg: var(--am-gray-400); --am-slider-track-fill: var(--am-grad-progress); --am-slider-thumb-size: 22px; --am-slider-thumb-bg: var(--am-surface); --am-slider-thumb-border: var(--am-link); } /* --------------------------------------------------------------------------------------- * Тёмная тема — переопределение семантического слоя (блок 2), не правка 30 файлов pages/*.css. * Сырая палитра (блок 1) и акцентные градиенты/лайм/состояния кнопок не трогаются — тема * задаётся ТОЛЬКО через переменные, которые уже и так единственный источник цвета в разметке. * * Работает оба способа, ручной побеждает системный в обе стороны: у :root[data-theme=...] * специфичность (0,1,1,0) выше плоского :root внутри @media (0,1,0,0) — порядок правил * в файле для этого не важен, атрибут-селектор побеждает всегда, когда он есть. * * Контраст проверен формулой WCAG (относительная светлота), не на глаз — все пары ниже * держат ≥ 4.5:1 (полный расчёт — отчёт агента, свободный от 4.5:1 запас на каждую пару). * ------------------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --am-bg: #0A0E1F; --am-surface: #1C2242; --am-surface-sunken: #161C38; --am-surface-muted: #12172E; --am-border: rgba(255, 255, 255, .12); --am-border-soft: rgba(255, 255, 255, .08); --am-border-dashed: rgba(255, 255, 255, .2); --am-text: #EEF0FA; --am-text-muted: #B7BEDA; --am-text-subtle: #8C93B8; --am-text-label: #C9CEE8; --am-link: #7C9BFF; --am-link-hover: #B79CFF; --am-focus: #B79CFF; --am-state-neutral-bg: rgba(255, 255, 255, .1); --am-state-neutral-fg: #C9CEE8; --am-state-progress-bg: rgba(124, 155, 255, .2); --am-state-progress-fg: #9DB6FF; --am-state-attention-bg: rgba(255, 77, 157, .2); --am-state-attention-fg: #FF9BC4; --am-state-success-bg: rgba(200, 245, 60, .22); --am-state-success-fg: #C8F53C; --am-state-published-bg: rgba(183, 138, 255, .2); --am-state-published-fg: #C3A8FF; --am-state-warn-bg: rgba(255, 159, 26, .2); --am-state-warn-fg: #FFB84D; --am-state-error-bg: var(--am-state-attention-bg); --am-state-error-fg: var(--am-state-attention-fg); /* surface-inverse/-2, border-inverse, text-on-inverse*, eyebrow-on-inverse, grad-hero/ * panel/drawer/rail НЕ переопределяются здесь — ИНЦИДЕНТ 02.08 (см. блок 2 выше): * бренд-поверхность (hero/шапка/модалка/дровер) больше не переворачивается по теме, * значение приходит из :root и одинаково в обеих темах. */ --am-grad-nophoto: repeating-linear-gradient(135deg, #161C38 0 6px, #12172E 6px 12px); /* Тени на тёмном фоне почти не читаются, если оставить их той же светлоты, что и фон * (rgba от navy на navy — исчезает). Чистый чёрный + бо́льшая альфа держат карточки * приподнятыми над фоном визуально, а не только по факту box-shadow в DOM. */ --am-sh-card: 0 2px 8px rgba(0, 0, 0, .35); --am-sh-raised: 0 8px 24px rgba(0, 0, 0, .45); --am-sh-hero: 0 40px 90px rgba(0, 0, 0, .55); --am-sh-rail: 0 24px 50px rgba(0, 0, 0, .5); --am-sh-popover: 0 12px 26px rgba(0, 0, 0, .55); --am-sh-modal: 0 40px 80px rgba(0, 0, 0, .6); --am-sh-dropdown: 0 30px 60px rgba(0, 0, 0, .55); --am-sh-toast: 0 20px 44px rgba(0, 0, 0, .5); --am-sh-action: 0 12px 26px rgba(200, 245, 60, .3); --am-sh-sticky: 0 12px 28px rgba(0, 0, 0, .4); --am-slider-track-bg: rgba(255, 255, 255, .16); } } /* Ручной переключатель — идентичные значения, но за атрибут-селектором, чтобы бить системную * тему в обе стороны (см. пояснение о специфичности выше). */ :root[data-theme="dark"] { --am-bg: #0A0E1F; --am-surface: #1C2242; --am-surface-sunken: #161C38; --am-surface-muted: #12172E; --am-border: rgba(255, 255, 255, .12); --am-border-soft: rgba(255, 255, 255, .08); --am-border-dashed: rgba(255, 255, 255, .2); --am-text: #EEF0FA; --am-text-muted: #B7BEDA; --am-text-subtle: #8C93B8; --am-text-label: #C9CEE8; --am-link: #7C9BFF; --am-link-hover: #B79CFF; --am-focus: #B79CFF; --am-state-neutral-bg: rgba(255, 255, 255, .1); --am-state-neutral-fg: #C9CEE8; --am-state-progress-bg: rgba(124, 155, 255, .2); --am-state-progress-fg: #9DB6FF; --am-state-attention-bg: rgba(255, 77, 157, .2); --am-state-attention-fg: #FF9BC4; --am-state-success-bg: rgba(200, 245, 60, .22); --am-state-success-fg: #C8F53C; --am-state-published-bg: rgba(183, 138, 255, .2); --am-state-published-fg: #C3A8FF; --am-state-warn-bg: rgba(255, 159, 26, .2); --am-state-warn-fg: #FFB84D; --am-state-error-bg: var(--am-state-attention-bg); --am-state-error-fg: var(--am-state-attention-fg); /* surface-inverse/-2, border-inverse, text-on-inverse*, eyebrow-on-inverse, grad-hero/panel/ * drawer/rail НЕ переопределяются здесь — та же причина, что у @media выше (блок 2). */ --am-grad-nophoto: repeating-linear-gradient(135deg, #161C38 0 6px, #12172E 6px 12px); --am-sh-card: 0 2px 8px rgba(0, 0, 0, .35); --am-sh-raised: 0 8px 24px rgba(0, 0, 0, .45); --am-sh-hero: 0 40px 90px rgba(0, 0, 0, .55); --am-sh-rail: 0 24px 50px rgba(0, 0, 0, .5); --am-sh-popover: 0 12px 26px rgba(0, 0, 0, .55); --am-sh-modal: 0 40px 80px rgba(0, 0, 0, .6); --am-sh-dropdown: 0 30px 60px rgba(0, 0, 0, .55); --am-sh-toast: 0 20px 44px rgba(0, 0, 0, .5); --am-sh-action: 0 12px 26px rgba(200, 245, 60, .3); --am-sh-sticky: 0 12px 28px rgba(0, 0, 0, .4); --am-slider-track-bg: rgba(255, 255, 255, .16); } /* Явный возврат к светлой — перебивает системную тёмную тему той же специфичностью, * что и [data-theme="dark"] выше: значения совпадают с базовым :root построчно. */ :root[data-theme="light"] { --am-bg: var(--am-paper); --am-surface: var(--am-white); --am-surface-sunken: var(--am-gray-50); --am-surface-muted: var(--am-gray-150); --am-border: var(--am-gray-400); --am-border-soft: var(--am-gray-300); --am-border-dashed: var(--am-gray-600); --am-text: var(--am-ink-900); --am-text-muted: var(--am-ink-500); --am-text-subtle: var(--am-ink-400); --am-text-label: var(--am-ink-700); --am-link: var(--am-blue); --am-link-hover: var(--am-violet); --am-focus: var(--am-violet); --am-state-neutral-bg: var(--am-gray-200); --am-state-neutral-fg: var(--am-ink-500); --am-state-progress-bg: rgba(42, 86, 255, .14); --am-state-progress-fg: #1344FF; --am-state-attention-bg: rgba(255, 77, 157, .14); --am-state-attention-fg: #B71F69; --am-state-success-bg: rgba(200, 245, 60, .28); --am-state-success-fg: #4C6B00; --am-state-published-bg: rgba(123, 47, 247, .14); --am-state-published-fg: #7220F6; --am-state-warn-bg: rgba(255, 159, 26, .18); --am-state-warn-fg: #965200; --am-state-error-bg: var(--am-state-attention-bg); --am-state-error-fg: var(--am-state-attention-fg); /* surface-inverse/-2, border-inverse, text-on-inverse*, eyebrow-on-inverse, grad-hero/panel/ * drawer/rail НЕ переопределяются здесь — та же причина, что у блоков тёмной темы выше: * значение приходит из :root (блок 2) и одинаково во всех трёх режимах. */ --am-grad-nophoto: repeating-linear-gradient(135deg, #EDEFF8 0 6px, #E3E6F4 6px 12px); --am-sh-card: 0 2px 8px rgba(16, 26, 60, .06); --am-sh-raised: 0 8px 24px rgba(16, 26, 60, .1); --am-sh-hero: 0 40px 90px rgba(9, 13, 40, .32); --am-sh-rail: 0 24px 50px rgba(8, 11, 32, .4); --am-sh-popover: 0 12px 26px rgba(8, 11, 32, .5); --am-sh-modal: 0 40px 80px rgba(8, 11, 32, .5); --am-sh-dropdown: 0 30px 60px rgba(8, 11, 32, .45); --am-sh-toast: 0 20px 44px rgba(8, 11, 32, .45); --am-sh-action: 0 12px 26px rgba(200, 245, 60, .35); --am-sh-sticky: 0 12px 28px rgba(16, 26, 60, .28); --am-slider-track-bg: var(--am-gray-400); } /* Брейкпоинты (для справки — CSS-переменные в media-запросах не работают): * 1180px — прячется rail-навигация, контент растягивается * 980px — десктопное меню уходит в бургер * 700px — второстепенное в шапке скрывается, снизу появляется липкий CTA * 360px — минимальная поддерживаемая ширина, кабинет обязан работать */ /* * Уважение к prefers-reduced-motion — не опция. Здесь глобальный предохранитель: * компонент может добавить свою замену (мгновенный переход или кроссфейд), но * оставить крутящийся индикатор без этой ветки нельзя. */ @media (prefers-reduced-motion: reduce) { :root { --am-dur-fast: 1ms; --am-dur-base: 1ms; --am-dur-slow: 1ms; --am-dur-hero: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }