/* Источник истины — tender-analyzer/frontend/src/design-system/tokens.css; держать в синхроне вручную (как tender↔contract). НЕ редактировать здесь по месту. */ /** * Дизайн-токены v2 (редизайн «язык лендинга»). Брендовые цвета (--color-brand-*) * ниже — дефолт-фоллбэк; реальные значения контура переопределяет applyBrand() * из src/brand.ts. Тема: data-theme="light" | "dark" на . * * ВАЖНО: имена переменных стабильны — компоненты на них завязаны. Меняем ЗНАЧЕНИЯ, * не имена. Любой новый токен объявляем в ОБЕИХ ветках (light и dark), даже если * тёмная сейчас на паузе (light-only) — иначе тёмная позже молча поедет. */ :root { /* Фирменные опорные цвета (не меняются между темами) */ --color-brand-blue: #0066cc; --color-brand-navy: #0a192f; /* Макет: шире центр, меньше «полей» по бокам (Notion, Slack) */ --content-max-width: min(90rem, calc(100% - 2 * var(--space-6))); /* Сетка и плотность */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --control-height-sm: 1.875rem; --control-height-md: 2.5rem; --control-height-lg: 2.875rem; /* Типографика: крупнее и контрастнее (язык лендинга). Onest — основной шрифт бренда (грузится в index.html, как на лендинге); системный стек — фолбэк до загрузки/при оффлайне. */ --font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-xs--line: 1.05rem; --text-sm: 0.8125rem; --text-sm--line: 1.3rem; --text-md: 0.9375rem; --text-md--line: 1.55rem; --text-lg: 1.0625rem; --text-lg--line: 1.65rem; --text-xl: 1.25rem; --text-xl--line: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line: 1.95rem; --text-3xl: 2rem; --text-3xl--line: 2.35rem; --text-4xl: 2.75rem; --text-4xl--line: 3rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Форма: щедрее скругление (язык лендинга, карточки 16–24px) */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Motion */ --duration-fast: 140ms; --duration-normal: 220ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); --focus-ring-width: 2px; --focus-ring-offset: 2px; } :root, [data-theme="light"] { color-scheme: light; /* Мягкий холодный фон (язык лендинга), без штриховки */ --color-bg: #f6f8fb; --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-muted: #eef2f7; --color-border: #e6ebf2; --color-border-strong: #d3dbe6; /* Текст — глубокий navy для заголовков (язык лендинга) */ --color-text: #0a192f; --color-text-muted: #5b6b7f; --color-text-subtle: #9aa6b6; /* Акцент = брендовый синий (переопределяется из brand.ts) */ --color-primary: var(--color-brand-blue); --color-primary-hover: #0052a3; --color-primary-muted: #e8f1fd; --color-on-primary: #ffffff; --color-danger: #dc2626; --color-danger-muted: #fef2f2; --color-on-danger: #ffffff; --color-success: #059669; --color-success-muted: #e7f7f0; --color-warning: #d97706; --color-warning-muted: #fef3c7; /* Тени — мягкие, воздушные, без «дешёвого» свечения */ --shadow-sm: 0 1px 2px rgb(10 25 47 / 0.05); --shadow-md: 0 6px 24px -8px rgb(10 25 47 / 0.12); --shadow-lg: 0 30px 60px -28px rgb(10 25 47 / 0.28); --shadow-card: 0 1px 2px rgb(10 25 47 / 0.04), 0 10px 30px -14px rgb(10 25 47 / 0.14); --shadow-card-hover: 0 2px 4px rgb(10 25 47 / 0.05), 0 18px 44px -16px rgb(10 25 47 / 0.2); --focus-ring-color: rgb(0 102 204 / 0.35); /* Штриховка фона убрана (язык лендинга — чистый фон) */ --page-hatch-color: transparent; } [data-theme="dark"] { color-scheme: dark; /* Тёмная тема на паузе (light-only) — значения сохранены структурно, визуально НЕ доведены. Все токены light-ветки имеют пару здесь. */ --color-bg: #0a1628; --color-bg-elevated: #0f2138; --color-surface: #102a45; --color-surface-muted: #153050; --color-border: #2a4a6e; --color-border-strong: #3d5f8a; --color-text: #e8eaef; --color-text-muted: #9aa3b5; --color-text-subtle: #6b7280; --color-primary: #4dabf7; --color-primary-hover: #74c0fc; --color-primary-muted: #1a3d5c; --color-on-primary: #0a1628; --color-danger: #f87171; --color-danger-muted: #450a0a; --color-on-danger: #0c0e12; --color-success: #34d399; --color-success-muted: #022c22; --color-warning: #fbbf24; --color-warning-muted: #422006; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 6px 24px -8px rgb(0 0 0 / 0.5); --shadow-lg: 0 30px 60px -28px rgb(0 0 0 / 0.6); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.38), 0 10px 30px -14px rgb(0 0 0 / 0.5); --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 0.42), 0 18px 44px -16px rgb(0 0 0 / 0.55); --focus-ring-color: rgb(77 171 247 / 0.45); --page-hatch-color: transparent; }