/* ===================================================================== BESSON AGENCY — DESIGN TOKENS Единый источник правды для цвета, типографики, отступов и форм. Эталон снят с главной страницы (index.html). Три слоя: 1) PRIMITIVE — сырые значения (реальные цвета/размеры сайта) 2) SEMANTIC — назначение ("фон", "текст", "линия") 3) COMPONENT — под конкретные элементы (кнопка, карточка, форма) Правило: в новой вёрстке ссылаться на SEMANTIC/COMPONENT, а не на PRIMITIVE и не на голые хексы. Подключать ПЕРВЫМ в , до style.css. Ничего не удаляет: старые --bg/--fg/--muted проброшены в самом низу. ===================================================================== */ :root { /* ================================================================== 1) PRIMITIVE — сырьё. Менять редко. ================================================================== */ /* Тушь (тёмная шкала, от самого глубокого к светлее) */ --ink-000: #000000; --ink-050: #020202; --ink-100: #050505; /* главный фон сайта */ --ink-150: #070707; --ink-200: #080808; /* приподнятые поверхности */ --ink-250: #090909; --ink-300: #0b0b0b; --ink-400: #101010; --ink-500: #171717; --ink-600: #1a1a1a; /* Бумага (светлая шкала) */ --paper-000: #ffffff; --paper-100: #f7f7f7; --paper-200: #f5f5f5; /* основной текст на тёмном */ --paper-warm-100: #f7f7f2; --paper-warm-200: #f6f2ea; --paper-warm-300: #f5f2ea; /* Серый */ --gray-300: #e9e9e9; --gray-500: #bdbdbd; /* приглушённый текст */ /* Акцент — тёплый коралл (единственный цветной акцент бренда) */ --coral-400: #ffb3a8; /* Белый с прозрачностью — линии, ховеры, полупрозрачный текст. Одна лесенка непрозрачности от еле видимой до почти сплошной. */ --w-035: rgba(255,255,255,.035); --w-04: rgba(255,255,255,.04); --w-06: rgba(255,255,255,.06); --w-08: rgba(255,255,255,.08); --w-10: rgba(255,255,255,.10); --w-12: rgba(255,255,255,.12); --w-14: rgba(255,255,255,.14); --w-16: rgba(255,255,255,.16); --w-18: rgba(255,255,255,.18); --w-28: rgba(255,255,255,.28); --w-50: rgba(255,255,255,.50); --w-52: rgba(255,255,255,.52); --w-58: rgba(255,255,255,.58); --w-60: rgba(255,255,255,.60); --w-70: rgba(255,255,255,.70); --w-62: rgba(255,255,255,.62); --w-92: rgba(255,255,255,.92); /* Чёрный с прозрачностью — тени, затемнения поверх картинок */ --b-12: rgba(0,0,0,.12); --b-28: rgba(0,0,0,.28); --b-34: rgba(0,0,0,.34); --b-42: rgba(0,0,0,.42); --b-45: rgba(0,0,0,.45); --b-46: rgba(0,0,0,.46); --b-48: rgba(0,0,0,.48); --b-58: rgba(0,0,0,.58); --b-62: rgba(0,0,0,.62); --b-72: rgba(0,0,0,.72); /* Скрим — тёмный градиент поверх картинок (карточки услуг/проектов). Это #050505 с прозрачностью. */ --scrim-soft: rgba(5,5,5,.05); --scrim-mid: rgba(5,5,5,.45); --scrim-strong: rgba(5,5,5,.82); /* Шрифты */ --font-display: Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Скругления */ --radius-none: 0; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ================================================================== 2) SEMANTIC — назначение. Именно на это ссылаться в вёрстке. ================================================================== */ /* Поверхности */ --color-bg: var(--ink-100); /* фон страницы */ --surface-1: var(--ink-200); /* карточка / панель */ --surface-2: var(--ink-300); /* приподнятая карточка */ --surface-raised: var(--ink-400); /* модалка / всплывашка */ --surface-paper: var(--paper-warm-100);/* светлые "бумажные" секции */ /* Текст */ --text-primary: var(--paper-200); /* основной */ --text-muted: var(--gray-500); /* второстепенный */ --text-faint: var(--w-58); /* подписи, мелочь */ --text-on-paper: var(--ink-100); /* текст на светлом фоне */ --text-accent: var(--coral-400); /* акцентный текст/ссылка */ /* Линии-разделители (хайрлайны) */ --hairline-faint: var(--w-04); --hairline-soft: var(--w-08); --hairline: var(--w-12); /* дефолтная линия */ --hairline-strong: var(--w-16); --hairline-hover: var(--w-28); /* Акцент */ --accent: var(--coral-400); --accent-hover: var(--paper-000); /* Тени */ --shadow-sm: 0 1px 2px var(--b-28); --shadow-md: 0 8px 24px var(--b-46); --shadow-lg: 0 24px 60px var(--b-62); /* Типографика — заголовочная система (как на главной) */ --heading-font: var(--font-display); --heading-weight: 900; --heading-track: .16em; /* трекинг заголовков */ --kicker-track: .34em; /* трекинг надзаголовков-«кикеров» */ /* Отступы (шкала) */ --space-page: clamp(16px, 2.4vw, 32px); /* Типографическая шкала — канон для сведения --ds-* и --project-type-*. Значения совпадают с besson-design-system.css, чтобы стать общим домом. */ --type-eyebrow-size: 12px; --type-eyebrow-track: .24em; --type-eyebrow-weight: 360; --type-title-size: clamp(24px, 2.6vw, 36px); --type-title-line: 1.02; --type-title-track: .12em; --type-title-weight: 900; --type-lead-size: clamp(16px, 1.25vw, 20px); --type-lead-line: 1.5; --type-hero-lead-size: clamp(18px, 1.7vw, 23px); --type-hero-lead-line: 1.34; /* ================================================================== 3) COMPONENT — под конкретные элементы. ================================================================== */ /* Кнопка — первичная (светлая на тёмном) */ --btn-bg: var(--paper-200); --btn-fg: var(--ink-100); --btn-bg-hover: var(--paper-000); --btn-radius: var(--radius-pill); /* Кнопка — вторичная (контур) */ --btn-ghost-fg: var(--text-primary); --btn-ghost-border: var(--hairline-strong); --btn-ghost-border-hover: var(--hairline-hover); /* Карточка */ --card-bg: var(--surface-1); --card-border: var(--hairline); --card-border-hover: var(--hairline-strong); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-md); /* Поле формы */ --input-bg: var(--w-035); --input-border: var(--hairline); --input-border-focus: var(--hairline-hover); --input-fg: var(--text-primary); --input-placeholder: var(--text-faint); --input-radius: var(--radius-md); } /* ===================================================================== МОСТ СОВМЕСТИМОСТИ Старые переменные, на которые уже завязан весь текущий CSS, теперь ведут на новые semantic-токены. Старый код работает как есть. ===================================================================== */ :root { /* Фаза 3 — альфа-токены под инлайн уникальных секций (значения без изменений) */ --b-00: rgba(0,0,0,0); --b-04: rgba(0,0,0,.045); --b-05: rgba(0,0,0,.05); --b-06: rgba(0,0,0,.06); --b-08: rgba(0,0,0,.08); --b-18: rgba(0,0,0,.18); --b-22: rgba(0,0,0,.22); --b-32: rgba(0,0,0,.32); --b-44: rgba(0,0,0,.44); --b-66: rgba(0,0,0,.66); --k-00: rgba(5,5,5,0); --k-15: rgba(5,5,5,.15); --k-62: rgba(5,5,5,.62); --k-64: rgba(5,5,5,.64); --k-82: rgba(5,5,5,.82); --p-74: rgba(245,245,245,.74); --w-03: rgba(255,255,255,.035); --w-36: rgba(255,255,255,.36); --w-40: rgba(255,255,255,.4); --w-42: rgba(255,255,255,.42); --w-46: rgba(255,255,255,.46); --w-48: rgba(255,255,255,.48); --w-56: rgba(255,255,255,.56); --w-66: rgba(255,255,255,.66); --w-68: rgba(255,255,255,.68); --w-72: rgba(255,255,255,.72); --w-78: rgba(255,255,255,.78); --w-82: rgba(255,255,255,.82); --w-85: rgba(255,255,255,.85); --w-90: rgba(255,255,255,.9); } :root { --bg: var(--color-bg); --fg: var(--text-primary); --muted: var(--text-muted); --sp-black: var(--ink-100); --sp-white: var(--paper-000); --sp-hairW: var(--hairline-strong); --sp-hairW2: var(--hairline-hover); --display-font: var(--font-display); }