/* ============================================================= * tokens.css — дизайн-токены редизайна vekexpress.ru. * * Источники: * - Аудит a11y-architect (контрасты WCAG 2.2 AA, focus, motion). * - Дизайн-система Zetta как референс структуры. * - План: ~/.claude/plans/site-bot-starter-kit-quiet-hennessy.md * * Контрастные пары (verified WCAG 2.2 AA): * text on white: #1d1d1d ▸ #fff = 16.1:1 AAA * text on white (sec): #6d6d6d ▸ #fff = 4.83:1 AA normal * text on grey-150: #5e5e5e ▸ #f7f7f7 = 5.45:1 AA normal * primary CTA bg: #fff ▸ #dc341f = 5.16:1 AA normal * primary CTA hover: #fff ▸ #fa523d = 3.55:1 ONLY large/UI * border interactive: #949494 ▸ #fff = 3.04:1 UI 3:1 * ============================================================= */ :root { /* ──────── ПАЛИТРА ──────── */ --color-white: #ffffff; --color-grey-100: #f1f1f1; /* фон секций */ --color-grey-150: #f7f7f7; /* альтернативный фон */ --color-grey-200: #dddddd; /* декоративные разделители (не интерактивы) */ --color-grey-300: #949494; /* бордеры интерактивов, ≥3:1 на #fff */ --color-grey-400: #b1b1b1; --color-grey-600: #6d6d6d; /* вторичный текст НА БЕЛОМ */ --color-grey-650: #5e5e5e; /* вторичный текст на серых фонах */ --color-black: #1d1d1d; /* Акцент — инвертирован после a11y-аудита. #dc341f — baseline (под белый текст), AA pass. #fa523d — hover/highlight (НЕ под белый текст, fail 3.55:1). */ --color-accent: #dc341f; --color-accent-text: #b82d18; /* coral КАК ТЕКСТ на светлых фонах (paper/warm-grey) — AA ≥4.5:1 */ --color-accent-hover: #fa523d; --color-accent-soft: #fde8e4; /* для очень мягких backgrounds */ --color-success: #1f7a3d; /* валидное поле формы (AA ≥4.5:1 на белом) */ --color-accent-tint: #fbeae6; /* фон секции «Контакты» */ /* Warm-нейтралы (UI-аудит P2 — анти-Zetta «не уходить в холодный корпоратив»). Используем вместо чистых grey/black для эмоциональной теплоты. */ --color-paper: #fafaf8; /* off-white, тёплая бумага — для hero и отзывов */ --color-warm-grey: #f4f3ef; /* тёплый фон секции «Манифест» */ --color-warm-black: #1a1715; /* тёплый footer вместо чёрного #000/#1d1d1d */ /* Семантические алиасы */ --color-text: var(--color-black); --color-text-secondary: var(--color-grey-600); --color-text-on-grey: var(--color-grey-650); --color-text-inverse: var(--color-white); --color-bg: var(--color-white); --color-bg-section: var(--color-grey-100); --color-bg-section-alt: var(--color-grey-150); --color-border: var(--color-grey-300); --color-border-soft: var(--color-grey-200); /* ──────── ТИПОГРАФИКА ──────── */ --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 56px; --fs-5xl: clamp(2.5rem, 4vw + 1rem, 4.5rem); /* editorial hero */ --fs-editorial: clamp(3rem, 6vw + 1rem, 4.5rem); /* manifest-quote */ --fw-regular: 400; --fw-medium: 500; /* доминирующий */ --fw-semibold: 600; /* active-state маркер */ --fw-bold: 700; /* редко */ --lh-tight: 1.02; /* editorial-headings (плотно, как Zetta) */ --lh-heading: 1.1; --lh-body: 1.4; --lh-relaxed: 1.55; --ls-tight: -0.045em; /* editorial big text — плотно, как Zetta (−1.5px@30px) */ --ls-snug: -0.03em; --ls-normal: 0; --ls-wide: 0.02em; /* eyebrow / uppercase labels */ /* ──────── СПЕЙСИНГ (8-pt + дополнительные) ──────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 15px; --sp-5: 20px; --sp-6: 30px; --sp-7: 40px; --sp-8: 60px; --sp-9: 80px; --sp-section: clamp(22px, 2.6vw, 40px); /* поджато — меньше воздуха между блоками */ --sp-page: clamp(20px, 4vw, 60px); /* боковой padding контента */ /* ──────── ГЕОМЕТРИЯ ──────── */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-full: 9999px; --radius-circle: 50%; --border-thin: 1px solid var(--color-border-soft); --border-strong: 1px solid var(--color-border); /* ──────── ЛЭЙАУТ ──────── */ --sidebar-w: clamp(220px, 17vw, 256px); /* как Zetta (~255px), не ломается на 1024-1180 */ --sidebar-w-collapsed: 64px; --header-h: 64px; --bottom-nav-h: 56px; --content-max: 1185px; /* ширина контента как у Zetta */ /* ──────── ТЕНИ ──────── */ /* Микро-тень для карточек — не "dashboard shadow", а "editorial paper lift" */ --shadow-sm: 0 1px 0 rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04); --shadow-md: 0 1px 0 rgba(0,0,0,0.04), 0 6px 14px rgba(0,0,0,0.08); --shadow-lg: 0 1px 0 rgba(0,0,0,0.04), 0 30px 60px -20px rgba(0,0,0,0.15); --shadow-xl: 0 1px 0 rgba(0,0,0,0.04), 0 40px 80px -30px rgba(0,0,0,0.20); /* ──────── МОУШН ──────── */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ──────── FOCUS / TAP ──────── */ --tap-target-min: 44px; --focus-outline-color: var(--color-black); --focus-outline-width: 2px; --focus-outline-offset: 2px; /* На корал-фоне focus инвертирован */ --focus-on-accent-shadow: 0 0 0 4px var(--color-black); /* ──────── Z-INDEX ──────── */ --z-sidebar: 40; --z-mobile-bottom-nav: 45; --z-header: 50; --z-modal-backdrop: 90; --z-modal: 100; --z-skip-link: 200; } /* Универсальная блокировка motion для prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-normal: 0.01ms; --duration-slow: 0.01ms; } }