/* AUTOGENERATED из tokens.json v5.4.0 – НЕ ПРАВИТЬ РУКАМИ. * Пересборка: python3 scripts/build_tokens.py * Канон: 00_Система/08_Дизайн-система/docs/DESIGN.md */ @layer kt-tokens { /* TIER 1. PRIMITIVES – в продуктовом CSS не использовать */ :root { --kt-blue-300: #84c5f0; --kt-blue-400: #4b9ce2; --kt-blue-500: #0096d7; --kt-blue-600: #0077c8; --kt-blue-700: #075985; --kt-ink-950: #101011; --kt-ink-900: #1a1a1b; --kt-ink-850: #222223; --kt-ink-800: #2b2b2d; --kt-gray-950: #0a0a0b; --kt-gray-900: #161617; --kt-gray-850: #1c1c1e; --kt-gray-800: #232325; --kt-gray-750: #2a2a2c; --kt-gray-700: #343437; --kt-gray-25: #fcfcfb; --kt-gray-50: #f7f7f5; --kt-gray-100: #f0f0ed; --kt-gray-200: #e4e4e0; --kt-gray-300: #d4d4d0; --kt-paper: #fcfcfb; --kt-snow: #ffffff; --kt-near-black: #1a1a1a; --kt-near-white: #fafafa; --kt-ink-700: #3f3f42; --kt-ink-600: #58585c; --kt-ink-400: #707073; --kt-white-a04: #ffffff0a; --kt-white-a06: #ffffff0e; --kt-white-a09: #ffffff18; --kt-white-a11: #ffffff1c; --kt-white-a18: #ffffff2d; --kt-white-a92: #ffffffeb; --kt-black-a04: #0000000a; --kt-black-a06: #0000000f; --kt-black-a08: #00000014; --kt-black-a16: #00000029; --kt-black-a32: #00000052; --kt-black-a55: #0000008c; --kt-green-300: #7fc794; --kt-green-a18: #3f9c5e2e; --kt-orange-300: #f5a35f; --kt-orange-a18: #e87b232e; --kt-red-300: #f0928a; --kt-red-a20: #dc5b5234; --kt-blue-a18: #3f93c52e; --kt-purple-300: #bb9ae0; --kt-purple-a18: #8a5fb02e; --kt-grayc-a18: #8a8a8d2e; --kt-green-700: #166534; --kt-green-a13: #16a34a20; --kt-orange-700: #8a3d06; --kt-orange-a14: #f9731624; --kt-red-700: #991b1b; --kt-red-a13: #dc262620; --kt-blue-a14: #0284c724; --kt-purple-700: #5b21b6; --kt-purple-a13: #7c3aed20; --kt-grayc-a10: #6b72801a; --kt-chart-blue: #1683f3; --kt-chart-green: #34a853; --kt-chart-orange: #ff6a00; --kt-chart-salmon: #d2785f; --kt-chart-pink: #ea2f6b; --kt-chart-red: #ef4444; --kt-ai-space-0: 0; --kt-ai-space-1: 2px; --kt-ai-space-2: 4px; --kt-ai-space-3: 6px; --kt-ai-space-4: 8px; --kt-ai-space-5: 12px; --kt-ai-space-6: 16px; --kt-ai-space-7: 20px; --kt-ai-space-8: 24px; --kt-ai-space-9: 32px; --kt-ai-space-10: 40px; --kt-ai-space-11: 48px; --kt-ai-space-12: 64px; --kt-ai-radius-xs: 2px; --kt-ai-radius-sm: 3px; --kt-ai-radius-md: 4px; --kt-ai-radius-tag: 5px; --kt-ai-radius-lg: 6px; --kt-ai-radius-xl: 8px; --kt-ai-radius-2xl: 10px; --kt-ai-radius-3xl: 12px; --kt-ai-radius-full: 9999px; --kt-ai-text-2xs: 11px; --kt-ai-text-xs: 12px; --kt-ai-text-sm: 13px; --kt-ai-text-md: 14px; --kt-ai-text-lg: 15px; --kt-ai-text-xl: 18px; --kt-ai-text-2xl: 24px; --kt-ai-text-3xl: 30px; --kt-ai-leading-tight: 1.25; --kt-ai-leading-normal: 1.5; --kt-ai-weight-regular: 400; --kt-ai-weight-medium: 500; --kt-ai-weight-semibold: 600; --kt-ai-weight-bold: 700; --kt-ai-dur-fast: 100ms; --kt-ai-dur-base: 160ms; --kt-ai-dur-slow: 240ms; --kt-ai-dur-slower: 400ms; --kt-ai-ease-standard: cubic-bezier(.2, 0, 0, 1); --kt-ai-ease-enter: cubic-bezier(0, 0, .2, 1); --kt-ai-ease-exit: cubic-bezier(.4, 0, 1, 1); --kt-ai-z-sticky: 20; --kt-ai-z-dropdown: 30; --kt-ai-z-drawer: 40; --kt-ai-z-modal: 50; --kt-ai-z-toast: 60; --kt-ai-z-tooltip: 70; --kt-ai-control-h-sm: 28px; --kt-ai-control-h-md: 32px; --kt-ai-control-h-lg: 40px; --kt-ai-control-h-touch: 44px; --kt-ai-bp-sm: 640px; --kt-ai-bp-md: 832px; --kt-ai-bp-lg: 1024px; --kt-ai-bp-xl: 1280px; --kt-ai-sidebar-width: 232px; --kt-ai-sidebar-collapsed-width: 52px; --kt-ai-content-max: 1040px; --kt-ai-content-wide: 1200px; --kt-ai-content-table: 1180px; --kt-ai-nav-row: 30px; --kt-ai-table-row: 48px; --kt-ai-table-row-compact: 38px; --kt-ai-table-row-relaxed: 56px; --kt-ai-chart-height: 200px; --kt-ai-stack-tight: 12px; --kt-ai-stack-block: 16px; --kt-ai-stack-group: 24px; --kt-ai-stack-region: 32px; --kt-ai-pad-card: 20px; --kt-ai-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --kt-ai-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; } /* TIER 2. SEMANTIC. Дефолт – light (v5 «Mono», light-first); dark – полноправный паритет */ :root, [data-theme="kt-ai-terminal-light"], [data-theme="light"] { color-scheme: light; --kt-ai-bg: var(--kt-paper); --kt-ai-bg-soft: var(--kt-gray-50); --kt-ai-bg-elevated: var(--kt-snow); --kt-ai-bg-sunken: var(--kt-gray-100); --kt-ai-bg-hover: var(--kt-black-a04); --kt-ai-bg-active: var(--kt-black-a08); --kt-ai-bg-glass: color-mix(in srgb, #fcfcfb 85%, transparent); --kt-ai-inset-highlight: #ffffff1f; --kt-ai-ai-accent: #7c4fe0; --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #7c4fe0 92%); --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%); --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%); --kt-ai-fg-on-ai: #ffffff; --kt-ai-card-bg: var(--kt-snow); --kt-ai-card-bg-glow: var(--kt-snow); --kt-ai-card-border: var(--kt-black-a08); --kt-ai-card-border-hover: var(--kt-black-a16); --kt-ai-card-shadow: 0 1px 2px #0000000d; --kt-ai-card-shadow-hover: 0 4px 14px #00000014; --kt-ai-selection: #1a1a1a16; --kt-ai-fg: var(--kt-near-black); --kt-ai-fg-muted: var(--kt-ink-600); --kt-ai-fg-faint: var(--kt-ink-400); --kt-ai-fg-on-fill: #ffffff; --kt-ai-border: var(--kt-black-a08); --kt-ai-border-strong: var(--kt-black-a16); --kt-ai-divider: var(--kt-black-a06); --kt-ai-primary: var(--kt-near-black); --kt-ai-primary-hover: #343437; --kt-ai-primary-subtle: var(--kt-black-a04); --kt-ai-brand-blue: var(--kt-blue-500); --kt-ai-link: var(--kt-blue-600); --kt-ai-focus-ring: #1a1a1a99; --kt-ai-focus-shadow: 0 0 0 3px #1a1a1a1f; --kt-ai-danger: #dc2626; --kt-ai-danger-hover: #b91c1c; --kt-ai-overlay: var(--kt-black-a32); --kt-ai-chip-default-bg: var(--kt-black-a06); --kt-ai-chip-default-fg: #2d2d2f; --kt-ai-chip-gray-bg: var(--kt-grayc-a10); --kt-ai-chip-gray-fg: var(--kt-ink-700); --kt-ai-chip-orange-bg: var(--kt-orange-a14); --kt-ai-chip-orange-fg: var(--kt-orange-700); --kt-ai-chip-green-bg: var(--kt-green-a13); --kt-ai-chip-green-fg: var(--kt-green-700); --kt-ai-chip-blue-bg: var(--kt-blue-a14); --kt-ai-chip-blue-fg: var(--kt-blue-700); --kt-ai-chip-purple-bg: var(--kt-purple-a13); --kt-ai-chip-purple-fg: var(--kt-purple-700); --kt-ai-chip-red-bg: var(--kt-red-a13); --kt-ai-chip-red-fg: var(--kt-red-700); --kt-ai-status-ok-bg: var(--kt-green-a13); --kt-ai-status-ok-fg: var(--kt-green-700); --kt-ai-status-warn-bg: var(--kt-orange-a14); --kt-ai-status-warn-fg: var(--kt-orange-700); --kt-ai-status-risk-bg: var(--kt-red-a13); --kt-ai-status-risk-fg: var(--kt-red-700); --kt-ai-status-info-bg: var(--kt-grayc-a10); --kt-ai-status-info-fg: var(--kt-ink-700); --kt-ai-chart-blue: var(--kt-chart-blue); --kt-ai-chart-green: var(--kt-chart-green); --kt-ai-chart-orange: var(--kt-chart-orange); --kt-ai-chart-salmon: var(--kt-chart-salmon); --kt-ai-chart-pink: var(--kt-chart-pink); --kt-ai-chart-red: var(--kt-chart-red); --kt-ai-chart-bar-fill: #e4e4e0; --kt-ai-shadow-sm: 0 1px 2px #0000000d; --kt-ai-shadow-md: 0 4px 14px #00000014; --kt-ai-shadow-lg: 0 2px 6px #00000012, 0 12px 32px #0000001f; --kt-ai-shadow-xl: 0 3px 8px #00000014, 0 24px 64px #00000026; --kt-ai-command-shadow: var(--kt-ai-shadow-xl); } [data-theme="kt-ai-terminal"], [data-theme="dark"] { color-scheme: dark; --kt-ai-bg: var(--kt-gray-950); --kt-ai-bg-soft: var(--kt-gray-900); --kt-ai-bg-elevated: var(--kt-gray-850); --kt-ai-bg-sunken: #060607; --kt-ai-bg-hover: var(--kt-white-a06); --kt-ai-bg-active: var(--kt-white-a09); --kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent); --kt-ai-inset-highlight: #00000014; --kt-ai-ai-accent: #7c4fe0; --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%); --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%); --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%); --kt-ai-fg-on-ai: #ffffff; --kt-ai-card-bg: var(--kt-gray-900); --kt-ai-card-bg-glow: var(--kt-gray-900); --kt-ai-card-border: var(--kt-white-a09); --kt-ai-card-border-hover: var(--kt-white-a18); --kt-ai-card-shadow: none; --kt-ai-card-shadow-hover: none; --kt-ai-selection: #fafafa1f; --kt-ai-fg: var(--kt-white-a92); --kt-ai-fg-muted: #9b9b9e; --kt-ai-fg-faint: #848487; --kt-ai-fg-on-fill: var(--kt-ink-900); --kt-ai-border: var(--kt-white-a09); --kt-ai-border-strong: var(--kt-white-a18); --kt-ai-divider: var(--kt-white-a06); --kt-ai-primary: var(--kt-near-white); --kt-ai-primary-hover: #e4e4e7; --kt-ai-primary-subtle: var(--kt-white-a09); --kt-ai-brand-blue: var(--kt-blue-500); --kt-ai-link: var(--kt-blue-400); --kt-ai-focus-ring: #fafafa80; --kt-ai-focus-shadow: 0 0 0 3px #fafafa24; --kt-ai-danger: #f0726a; --kt-ai-danger-hover: #f48a83; --kt-ai-overlay: var(--kt-black-a55); --kt-ai-chip-default-bg: var(--kt-white-a09); --kt-ai-chip-default-fg: var(--kt-white-a92); --kt-ai-chip-gray-bg: var(--kt-grayc-a18); --kt-ai-chip-gray-fg: var(--kt-gray-300); --kt-ai-chip-orange-bg: var(--kt-orange-a18); --kt-ai-chip-orange-fg: var(--kt-orange-300); --kt-ai-chip-green-bg: var(--kt-green-a18); --kt-ai-chip-green-fg: var(--kt-green-300); --kt-ai-chip-blue-bg: var(--kt-blue-a18); --kt-ai-chip-blue-fg: var(--kt-blue-300); --kt-ai-chip-purple-bg: var(--kt-purple-a18); --kt-ai-chip-purple-fg: var(--kt-purple-300); --kt-ai-chip-red-bg: var(--kt-red-a20); --kt-ai-chip-red-fg: var(--kt-red-300); --kt-ai-status-ok-bg: var(--kt-green-a18); --kt-ai-status-ok-fg: var(--kt-green-300); --kt-ai-status-warn-bg: var(--kt-orange-a18); --kt-ai-status-warn-fg: var(--kt-orange-300); --kt-ai-status-risk-bg: var(--kt-red-a20); --kt-ai-status-risk-fg: var(--kt-red-300); --kt-ai-status-info-bg: var(--kt-grayc-a18); --kt-ai-status-info-fg: var(--kt-gray-300); --kt-ai-chart-blue: var(--kt-chart-blue); --kt-ai-chart-green: var(--kt-chart-green); --kt-ai-chart-orange: var(--kt-chart-orange); --kt-ai-chart-salmon: var(--kt-chart-salmon); --kt-ai-chart-pink: var(--kt-chart-pink); --kt-ai-chart-red: var(--kt-chart-red); --kt-ai-chart-bar-fill: #2e2e31; --kt-ai-shadow-sm: 0 1px 2px #00000052; --kt-ai-shadow-md: 0 4px 16px #00000066; --kt-ai-shadow-lg: 0 12px 40px #00000080; --kt-ai-shadow-xl: 0 24px 80px #00000099; --kt-ai-command-shadow: var(--kt-ai-shadow-xl); } /* data-theme="auto": dark при системной тёмной теме (дефолт light уже задан в :root) */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --kt-ai-bg: var(--kt-gray-950); --kt-ai-bg-soft: var(--kt-gray-900); --kt-ai-bg-elevated: var(--kt-gray-850); --kt-ai-bg-sunken: #060607; --kt-ai-bg-hover: var(--kt-white-a06); --kt-ai-bg-active: var(--kt-white-a09); --kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent); --kt-ai-inset-highlight: #00000014; --kt-ai-ai-accent: #7c4fe0; --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%); --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%); --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%); --kt-ai-fg-on-ai: #ffffff; --kt-ai-card-bg: var(--kt-gray-900); --kt-ai-card-bg-glow: var(--kt-gray-900); --kt-ai-card-border: var(--kt-white-a09); --kt-ai-card-border-hover: var(--kt-white-a18); --kt-ai-card-shadow: none; --kt-ai-card-shadow-hover: none; --kt-ai-selection: #fafafa1f; --kt-ai-fg: var(--kt-white-a92); --kt-ai-fg-muted: #9b9b9e; --kt-ai-fg-faint: #848487; --kt-ai-fg-on-fill: var(--kt-ink-900); --kt-ai-border: var(--kt-white-a09); --kt-ai-border-strong: var(--kt-white-a18); --kt-ai-divider: var(--kt-white-a06); --kt-ai-primary: var(--kt-near-white); --kt-ai-primary-hover: #e4e4e7; --kt-ai-primary-subtle: var(--kt-white-a09); --kt-ai-brand-blue: var(--kt-blue-500); --kt-ai-link: var(--kt-blue-400); --kt-ai-focus-ring: #fafafa80; --kt-ai-focus-shadow: 0 0 0 3px #fafafa24; --kt-ai-danger: #f0726a; --kt-ai-danger-hover: #f48a83; --kt-ai-overlay: var(--kt-black-a55); --kt-ai-chip-default-bg: var(--kt-white-a09); --kt-ai-chip-default-fg: var(--kt-white-a92); --kt-ai-chip-gray-bg: var(--kt-grayc-a18); --kt-ai-chip-gray-fg: var(--kt-gray-300); --kt-ai-chip-orange-bg: var(--kt-orange-a18); --kt-ai-chip-orange-fg: var(--kt-orange-300); --kt-ai-chip-green-bg: var(--kt-green-a18); --kt-ai-chip-green-fg: var(--kt-green-300); --kt-ai-chip-blue-bg: var(--kt-blue-a18); --kt-ai-chip-blue-fg: var(--kt-blue-300); --kt-ai-chip-purple-bg: var(--kt-purple-a18); --kt-ai-chip-purple-fg: var(--kt-purple-300); --kt-ai-chip-red-bg: var(--kt-red-a20); --kt-ai-chip-red-fg: var(--kt-red-300); --kt-ai-status-ok-bg: var(--kt-green-a18); --kt-ai-status-ok-fg: var(--kt-green-300); --kt-ai-status-warn-bg: var(--kt-orange-a18); --kt-ai-status-warn-fg: var(--kt-orange-300); --kt-ai-status-risk-bg: var(--kt-red-a20); --kt-ai-status-risk-fg: var(--kt-red-300); --kt-ai-status-info-bg: var(--kt-grayc-a18); --kt-ai-status-info-fg: var(--kt-gray-300); --kt-ai-chart-blue: var(--kt-chart-blue); --kt-ai-chart-green: var(--kt-chart-green); --kt-ai-chart-orange: var(--kt-chart-orange); --kt-ai-chart-salmon: var(--kt-chart-salmon); --kt-ai-chart-pink: var(--kt-chart-pink); --kt-ai-chart-red: var(--kt-chart-red); --kt-ai-chart-bar-fill: #2e2e31; --kt-ai-shadow-sm: 0 1px 2px #00000052; --kt-ai-shadow-md: 0 4px 16px #00000066; --kt-ai-shadow-lg: 0 12px 40px #00000080; --kt-ai-shadow-xl: 0 24px 80px #00000099; --kt-ai-command-shadow: var(--kt-ai-shadow-xl); } } /* Системные предпочтения */ @media (prefers-reduced-motion: reduce) { :root { --kt-ai-dur-fast: 0ms; --kt-ai-dur-base: 0ms; --kt-ai-dur-slow: 0ms; --kt-ai-dur-slower: 0ms; } } /* Сенсорная ширина: цель нажатия не меньше control-h-touch (Fitts, 44px). sm и md здесь СОВПАДАЮТ: на сенсорной ширине «маленький» контрол не имеет права быть меньше минимальной цели — это не размер, а порог. */ @media (pointer: coarse), (max-width: 767.98px) { :root { --kt-ai-control-h-sm: var(--kt-ai-control-h-touch); --kt-ai-control-h-md: var(--kt-ai-control-h-touch); --kt-ai-control-h-lg: 48px; --kt-ai-nav-row: var(--kt-ai-control-h-touch); --kt-ai-table-row: 52px; --kt-ai-table-row-compact: 48px; } } } /* @layer kt-tokens */