Цвета
Семантические токены цвета. Значения — светлая · тёмная тема.
Используйте токены через Tailwind-классы: bg-bg-surface, text-fg-secondary, border-border-soft,
bg-intent-success-bg-soft… Тема переключается классом dark на <html> — никаких dark:-модификаторов.
Background
--bg-base#fafafa · #18181b--bg-card#09090b0a · #fafafa0a--bg-inverse#09090b · #fafafa--bg-soft#09090b0a · #fafafa0a--bg-subtle#09090b0a · #fafafa0a--bg-backdrop#00000026 · #00000066--bg-surface#ffffff · #fafafa12--bg-surface-elevated#ffffff · #27272a--bg-floating#ffffff99 · #27272abf--bg-header#ffffff80 · #27272a80Foreground
--fg-primary#09090b · #ffffff--fg-secondary#09090ba6 · #fafafaa6--fg-tertiary#09090b80 · #fafafa80--fg-disabled#09090b33 · #fafafa33--fg-inverse#ffffff · #09090bBorder
--border-heavy#09090b · #ffffff--border-medium#09090b24 · #fafafa24--border-soft#09090b12 · #fafafa12--border-low#09090b0a · #fafafa0a--border-inverse#ffffff · #09090b--border-focus#4f39f6 · #615fffIntent — Brand
--intent-brand-bg-strong#4f39f6 · #615fff--intent-brand-bg-soft#4f39f617 · #615fff17--intent-brand-bg-subtle#4f39f60d · #615fff0d--intent-brand-fg#4f39f6 · #7c86ff--intent-brand-fg-secondary#4f39f6a6 · #615fffa6--intent-brand-border#4f39f6 · #615fff--intent-brand-border-subtle#4f39f60d · #615fff0dIntent — Success
--intent-success-bg-strong#00a63e · #05df72--intent-success-bg-soft#00a63e17 · #05df7217--intent-success-bg-subtle#00a63e29 · #05df720d--intent-success-fg#00a63e · #05df72--intent-success-fg-secondary#00a63ea6 · #05df72a6--intent-success-border#00a63e · #05df72--intent-success-border-subtle#00a63e0d · #05df720dIntent — Warning
--intent-warning-bg-strong#f54900 · #ff8904--intent-warning-bg-soft#f5490017 · #ff890417--intent-warning-bg-subtle#f549000d · #ff89040d--intent-warning-fg#f54900 · #ff8904--intent-warning-fg-secondary#f54900a6 · #ff8904a6--intent-warning-border#f54900 · #ff8904--intent-warning-border-subtle#f549000d · #ff89040dIntent — Critical
--intent-critical-bg-strong#e7000b · #ff6467--intent-critical-bg-soft#e7000b17 · #ff646717--intent-critical-bg-subtle#e7000b0d · #ff64670d--intent-critical-fg#e7000b · #ff6467--intent-critical-fg-secondary#e7000ba6 · #ff6467a6--intent-critical-border#e7000b · #ff6467--intent-critical-border-subtle#e7000b0d · #ff64670dAction — BG
--action-bg-off#09090b80 · #fafafa80--action-bg-disabled#09090b0a · #fafafa0aAction — Solid Neutral
--action-solid-neutral#09090b · #ffffff--action-solid-neutral-hover#09090bcc · #fafafacc--action-solid-neutral-active#09090ba6 · #fafafaa6Action — Solid Brand
--action-solid-brand#4f39f6 · #615fff--action-solid-brand-hover#4f39f6cc · #615fffcc--action-solid-brand-active#4f39f6a6 · #615fffa6Action — Solid Critical
--action-solid-critical#e7000b · #8b1e1e--action-solid-critical-hover#cf000a · #a32323--action-solid-critical-active#b70009 · #bb2929Action — Secondary Neutral
--action-secondary-neutral#09090b0a · #fafafa12--action-secondary-neutral-hover#09090b12 · #fafafa1c--action-secondary-neutral-active#09090b1c · #fafafa24Action — Secondary Critical
--action-secondary-critical#f8dcdd · #3d2427--action-secondary-critical-hover#f0c4c7 · #4d2f32--action-secondary-critical-active#e8acb0 · #5d3a3dAction — Outlined Neutral
--action-outlined-neutral#ffffff · #fafafa0a--action-outlined-neutral-hover#09090b0a · #fafafa12--action-outlined-neutral-active#09090b12 · #fafafa1cAction — Ghost Neutral
--action-ghost-neutral-hover#09090b0a · #fafafa12--action-ghost-neutral-active#09090b12 · #fafafa12Action — Link Brand
--action-link-brand#4f39f6 · #615fff--action-link-brand-hover#432dd7 · #7c86ff--action-link-brand-active#372aac · #a3b3ffAction — Tab Neutral
--action-tab-neutral-hover#09090b0a · #fafafa0a--action-tab-neutral-active#ffffff · #fafafa12Static
--static-bg-light#ffffff--static-bg-dark#09090b--static-fg-light#ffffff--static-fg-dark#09090bDecoration
--decoration-neutral-strong#09090b · #ffffff--decoration-neutral-bg-strong#09090b--decoration-neutral-subtle#09090b12 · #fafafa12--decoration-brand-strong#4f39f6 · #615fff--decoration-brand-subtle#4f39f629 · #615fff33--decoration-success-strong#00a63e · #05df72--decoration-success-subtle#00a63e29 · #05df7229--decoration-warning-strong#f54900 · #ff8904--decoration-warning-subtle#f5490029 · #ff890429--decoration-critical-strong#e7000b · #ff6467--decoration-critical-subtle#e7000b29 · #ff646729Toggle
--toggle-track#09090b33 · #fafafa33--toggle-track-hover#09090b3d · #fafafa3d--toggle-track-active#09090b52 · #fafafa52Skeleton
--skeleton#09090b12 · #fafafa12--skeleton-slide-2#ffffff80 · #ffffff0dAI gradient (sparkling icon)
--ai-gradient-from#8b7cff--ai-gradient-via#c06eff--ai-gradient-to#44cbfdTariff card border (light)
--tariff-card-bordervar(--width-1, 1px) solid var(--border-soft, rgba(9, 9, 11, 0.07)) · var(--width-1, 1px) solid var(--border-soft, rgba(250, 250, 250, 0.07))Niche brand colors (hero section)
--niche-small-business#ed8743--niche-marketing-agencies#4c98ff--niche-private-specialists#f379dd--niche-branch-networks#9479ff--niche-franchises#5abaa1--niche-sales-departments#949494Distribution donut chart palette (used in dashboard cards)
--chart-distribution-1#44ba82--chart-distribution-2#90cd22--chart-distribution-3#2d766f--chart-distribution-4#f27313--chart-distribution-5#437dfc--chart-distribution-6#3eb5d7Chart — AI quality tiers (hot/warm/cold)
--chart-ai-hot#f24d1d · #ff6a3d--chart-ai-warm#f5b400 · #ffc233--chart-ai-cold#2bb7e0 · #4fc3f7--sidebarvar(--bg-surface) · var(--bg-base)--sidebar-foregroundvar(--fg-primary)--sidebar-primaryvar(--fg-primary) · var(--intent-brand-fg)--sidebar-primary-foregroundvar(--fg-inverse)--sidebar-accentvar(--bg-soft)--sidebar-accent-foregroundvar(--fg-primary)--sidebar-bordervar(--border-medium)--sidebar-ringvar(--border-focus) · var(--intent-brand-bg-strong)--quality-lowvar(--intent-critical-bg-strong)--quality-mediumvar(--intent-warning-bg-strong)--quality-highvar(--intent-success-bg-strong)