/* ============================================= Бренд-слой. Единственное место, где живут цвета бренда. Смена палитры при ребрендинге = правка этих строк. Файл вынесен отдельно намеренно: его подключают и обычные страницы через includes/header.php, и автономные посадки со своим (рекламные лендинги, КП). Так палитра общая, а вёрстка у лендингов остаётся своей. --------------------------------------------------------------------------- Волна 1а (19.09.2026): система токенов 2.0 от дизайнера становится ЯДРОМ палитры сайта. Источник — дословная копия /Users/koterina/Documents/Визуал/praktika-developer-library/03-tokens/tokens.css (не редактировать секцию ниже руками — только пересборкой из tokens.mjs). Ниже, во втором блоке — слой псевдонимов --pa-* (все 78 существующих имён, ~1700 использований в коде). Каждый --pa-*-токен указывает на роль дизайнера через var(--color-…)/var(--space-…)/var(--radius-…)/… Сам код страниц никто не трогал — только то, на что ссылаются алиасы. Маппинг — по семантическим ролям из 05-pages/specs/layout-and-migration.md («Согласованные изменения»), НЕ blanket replace. Где у дизайнера роли нет (accent-gold, accent-purple) — значение оставлено литералом, как решение дизайнера вне системы 2.0. Где у сайта было больше уровней/оттенков, чем у дизайнера (text-tertiary, ink-2, border-2, success-bright/-2, tint-accent-2, text-inverse-tertiary) — несколько --pa-* сведены на одну ближайшую роль дизайнера, с пометкой в комментарии у каждой строки. ============================================= */ :root { /* ============ Токены 2.0 (дословная копия дизайнерского tokens.css) ============ */ --primitive-white: #FFFFFF; --primitive-ink: #141722; --primitive-gray: #606574; --primitive-navy: #34344E; --primitive-paper: #F8F9FB; --primitive-border: #DFE3EC; --primitive-blue: #1F5BFF; --primitive-blue-hover: #1748D4; --primitive-blue-active: #123CB5; --primitive-blue-soft: #EEF3FF; --primitive-red: #D71920; --primitive-green: #15803D; --primitive-green-soft: #F0FDF4; --primitive-error: #B42318; --primitive-error-soft: #FEF3F2; --primitive-warning: #854D0E; --primitive-warning-soft: #FEFCE8; --primitive-input-border: #7A8291; --primitive-disabled-bg: #E5E7EB; --primitive-disabled-text: #606574; --primitive-inverse-secondary: #D5D8E4; --primitive-support: #46465F; --primitive-support-hover: #53536D; --primitive-support-active: #3D3D55; --primitive-support-border: #85859B; --color-accent: var(--primitive-blue); --color-accent-hover: var(--primitive-blue-hover); --color-accent-active: var(--primitive-blue-active); --color-accent-soft: var(--primitive-blue-soft); --color-brand: var(--primitive-red); --color-text: var(--primitive-ink); --color-heading: var(--primitive-ink); --color-text-secondary: var(--primitive-gray); --color-text-inverse: var(--primitive-white); --color-text-inverse-secondary: var(--primitive-inverse-secondary); --color-bg: var(--primitive-white); --color-bg-section: var(--primitive-paper); --color-bg-dark: var(--primitive-navy); --color-border: var(--primitive-border); --color-input-border: var(--primitive-input-border); --color-success: var(--primitive-green); --color-success-bg: var(--primitive-green-soft); --color-error: var(--primitive-error); --color-error-bg: var(--primitive-error-soft); --color-warning: var(--primitive-warning); --color-warning-bg: var(--primitive-warning-soft); --color-disabled-bg: var(--primitive-disabled-bg); --color-disabled-text: var(--primitive-disabled-text); --color-support: var(--primitive-support); --color-support-hover: var(--primitive-support-hover); --color-support-active: var(--primitive-support-active); --color-support-border: var(--primitive-support-border); --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-control: 10px; --radius-small-panel: 12px; --radius-card: 16px; --radius-dialog: 24px; --container-max: 1140px; --gutter-small: 16px; --gutter-medium: 24px; --gutter-large: 32px; --grid-gap: 24px; --grid-gap-mobile: 16px; --article-max: 720px; --button-sm: 44px; --button-md: 48px; --button-lg: 56px; --input-height: 52px; --touch-min: 44px; --header-desktop-height: 160px; --header-desktop-extent: 172px; --header-compact-height: 168px; --header-compact-extent: 180px; --support-width: 192px; --support-overhang: 12px; --anchor-desktop-offset: 196px; --anchor-compact-offset: 204px; --field-error-gap: 8px; --section-gap: 96px; --section-gap-mobile: 64px; --font-family: Inter, Arial, sans-serif; --font-display-size: 48px; --font-display-line: 56px; --font-display-weight: 700; --font-display-tracking: -0.96px; --font-heading-2-size: 32px; --font-heading-2-line: 40px; --font-heading-2-weight: 600; --font-heading-2-tracking: -0.48px; --font-heading-3-size: 24px; --font-heading-3-line: 32px; --font-heading-3-weight: 600; --font-heading-3-tracking: 0px; --font-lead-size: 20px; --font-lead-line: 30px; --font-lead-weight: 400; --font-lead-tracking: 0px; --font-body-size: 18px; --font-body-line: 28px; --font-body-weight: 400; --font-body-tracking: 0px; --font-body-small-size: 16px; --font-body-small-line: 24px; --font-body-small-weight: 400; --font-body-small-tracking: 0px; --font-caption-size: 14px; --font-caption-line: 20px; --font-caption-weight: 400; --font-caption-tracking: 0px; --font-label-size: 14px; --font-label-line: 20px; --font-label-weight: 600; --font-label-tracking: 0.7px; --font-button-size: 16px; --font-button-line: 24px; --font-button-weight: 600; --font-button-tracking: 0px; /* ============ Слой псевдонимов --pa-* → роли токенов 2.0 ============ Каждый существующий --pa-*-токен сайта (~1700 использований в коде) переведён на var(--color-…)/var(--space-…)/var(--radius-…) дизайнера. Значения сайта до волны 1а см. в git-истории этого файла. */ /* ---- цвет: основные роли ---- */ --pa-color-accent: var(--color-accent); --pa-color-accent-hover: var(--color-accent-hover); --pa-color-brand: var(--color-brand); /* у дизайнера появилась своя роль «бренд» (#D71920); в коде сайчас 0 использований этого токена — переключение безопасно */ --pa-color-text: var(--color-text); --pa-color-text-secondary: var(--color-text-secondary); --pa-color-text-tertiary: var(--color-text-secondary); /* у дизайнера нет третьего уровня серого — сведено на color-text-secondary */ --pa-color-text-inverse: var(--color-text-inverse); --pa-color-text-inverse-secondary:var(--color-text-inverse-secondary); --pa-color-text-inverse-muted: var(--color-text-inverse-secondary); /* у дизайнера нет отдельной приглушённой инверсии (была rgba(255,255,255,.55)) — ближайшая роль */ --pa-color-bg: var(--color-bg); --pa-color-bg-section: var(--color-bg-section); --pa-color-bg-dark: var(--color-bg-dark); --pa-color-border: var(--color-border); --pa-color-border-inverse: var(--color-support-border); /* граница на тёмных секциях — ближайшая инверсная роль дизайнера */ --pa-color-field-border: var(--color-input-border); --pa-color-field-border-focus: var(--color-accent); --pa-color-field-border-error: var(--color-error); --pa-color-field-bg-disabled: var(--color-disabled-bg); --pa-color-success: var(--color-success); --pa-color-heading: var(--color-heading); /* ---- цвет: вспомогательные роли без отдельного места в спеке дизайнера ---- */ --pa-color-accent-ink: var(--color-heading); /* тёмно-синие заголовки на светлом — по роли ближе всего heading */ --pa-color-ink-2: var(--color-text-secondary); /* тёмно-серый в карточках — нет отдельной роли у дизайнера */ --pa-color-border-2: var(--color-border); /* второй оттенок границы слит в единственную роль border */ /* ---- радиусы ---- */ --pa-radius-control: var(--radius-control); --pa-radius-small-panel: var(--radius-small-panel); --pa-radius-card: var(--radius-card); --pa-radius-dialog: var(--radius-dialog); /* ---- контейнер ---- */ --pa-container-max: var(--container-max); /* ---- типографическая шкала ---- */ --pa-text-h1-size: var(--font-display-size); --pa-text-h1-line: var(--font-display-line); --pa-text-h1-size-mobile: 32px; /* у дизайнера нет отдельного CSS-токена под mobile; TOKENS.md фиксирует 32/40 для display на mobile — размер совпадает, оставлен литералом */ --pa-text-h1-line-mobile: 40px; /* см. выше: TOKENS.md — display mobile line-height 40px */ --pa-text-h2-size: var(--font-heading-2-size); --pa-text-h2-line: var(--font-heading-2-line); --pa-text-h3-size: var(--font-heading-3-size); --pa-text-h3-line: var(--font-heading-3-line); --pa-text-body-size: var(--font-body-size); --pa-text-body-line: var(--font-body-line); --pa-text-small-size: var(--font-caption-size); --pa-text-small-line: var(--font-caption-line); /* ---- отступы: сопоставлены по ЗНАЧЕНИЮ, не по номеру (шкалы не совпадают по индексам) ---- */ --pa-space-1: var(--space-2); /* 8px */ --pa-space-2: var(--space-4); /* 16px */ --pa-space-3: var(--space-5); /* 24px */ --pa-space-4: var(--space-6); /* 32px */ --pa-space-5: var(--space-7); /* 48px */ --pa-space-6: var(--space-8); /* 64px */ --pa-space-7: var(--space-9); /* 96px */ /* ---- шрифты: sans/serif/display у сайта фактически один и тот же стек Inter ---- */ --pa-font-sans: var(--font-family); --pa-font-serif: var(--font-family); /* отдельного serif-начертания у дизайнера нет — тот же стек */ --pa-font-display: var(--font-family); /* ===== Семантика, волна 3 (20.09.2026) — сведены на роли токенов 2.0 ===== */ --pa-color-text-strong: var(--color-text); /* нет отдельной роли «сильный текст» у дизайнера — ближайшая: color-text */ --pa-color-text-faint: var(--color-text-secondary); /* нет отдельной роли «слабый текст» — ближайшая: color-text-secondary */ --pa-color-text-slate: var(--color-text-secondary); /* вторичный серый — сведён на color-text-secondary */ --pa-color-danger: var(--color-error); --pa-color-danger-strong: var(--color-error); /* усиленный красный слит с error — отдельной роли «сильная ошибка» у дизайнера нет */ --pa-color-success-strong: var(--color-success); --pa-color-success-bright: var(--color-success); /* слито по решению спеки: статусная точка — не текстовый цвет успеха, но отдельной роли для неё у дизайнера нет */ --pa-color-success-2: var(--color-success); /* кандидат на слияние с success-strong — обе сведены на единственную роль success */ --pa-color-warning: var(--color-warning); --pa-color-accent-gold: #CDA352; /* вне системы 2.0, решение дизайнера — литерал не менять (техподдержка) */ --pa-color-accent-purple: #7C3AED; /* вне системы 2.0, решение дизайнера — литерал не менять (второй цвет градиента) */ --pa-color-tint-accent: var(--color-accent-soft); --pa-color-tint-accent-2: var(--color-accent-soft); /* кандидат на слияние с tint-accent — обе сведены на accent-soft */ --pa-color-tint-success: var(--color-success-bg); --pa-color-border-inverse-2: var(--color-support-border); /* граница таблиц на тёмных заголовочных ячейках — ближайшая инверсная роль */ --pa-color-text-inverse-tertiary: var(--color-text-inverse-secondary); /* третий оттенок текста на тёмном — нет отдельной роли, сведён на inverse-secondary */ /* ===== v1 — псевдонимы (1387 использований в коде, не трогать) ===== Эти токены ссылаются на v2-токены выше, которые уже переведены на роли дизайнера — значит цепочка автоматически подтягивает новую палитру. */ --pa-accent: var(--pa-color-accent); --pa-accent-ink: var(--pa-color-accent-ink); --pa-navy: var(--pa-color-bg-dark); --pa-ink: var(--pa-color-text); --pa-text: var(--pa-color-text-secondary); --pa-ink-2: var(--pa-color-ink-2); --pa-muted: var(--pa-color-text-tertiary); --pa-line: var(--pa-color-border); --pa-line-2: var(--pa-color-border-2); --pa-tint: var(--pa-color-bg-section); --pa-ok: var(--pa-color-success); } /* CSS custom properties cannot be used directly in @media conditions. Breakpoints are build-time constants: 480 / 768 / 1024 / 1280 px. */