/* =============================================================
КУЗЯ — Design Tokens v2
«Ночной смотритель» — новая русская волна
Графит + электрик + лайм-акцент. Gotesk с характером.
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* ---------- NEUTRALS ----------
Графитовая шкала — холодная, слегка синеватая.
Никаких тёплых бежей. Основная база продукта. */
--ink-0: #F7F8FA; /* paper — primary bg на светлой теме */
--ink-05: #EEF0F4; /* mist — alt sections */
--ink-10: #D9DCE3; /* hairline light */
--ink-20: #B4B9C5; /* muted border */
--ink-30: #8A90A0; /* secondary text on light */
--ink-40: #60667A; /* tertiary */
--ink-50: #3E4352; /* graphite — secondary surface dark */
--ink-60: #2A2E3A; /* dusk — cards on dark */
--ink-70: #1D2029; /* graphite deep — primary dark bg */
--ink-80: #13151C; /* abyss — headers/footers on dark */
--ink-90: #0A0B10; /* true dark — tooltip/inverse */
--ink-100: #05060A; /* absolute, used on micro accents */
/* ---------- ACCENT — ELECTRIC LIME ----------
Signature. Один-единственный акцент бренда.
Используется точечно: CTA, выделенный текст, пульс online,
узкие вставки в графиках. НЕ заливать большие поверхности. */
--lime-bright: #C6FF3D; /* signal — primary accent */
--lime: #B8F13B; /* default CTA fill */
--lime-deep: #97C427; /* hover/active */
--lime-ink: #1A2000; /* text on lime background */
--lime-ghost: rgba(198, 255, 61, 0.14); /* faint backlight */
/* ---------- ACCENT SUPPORT ----------
Редкие, только для семантики. Не делать из них «палитру». */
--alert: #FF5A4E; /* errors, urgent handoff */
--alert-soft: rgba(255, 90, 78, 0.12);
--amber: #FFC14D; /* warning / "waiting for human" */
--amber-soft: rgba(255, 193, 77, 0.14);
--sky: #6AD0FF; /* info, system tag — очень редко */
--sky-soft: rgba(106, 208, 255, 0.14);
/* ---------- SEMANTIC — LIGHT THEME ---------- */
--bg-page: var(--ink-0);
--bg-surface: #FFFFFF;
--bg-sunken: var(--ink-05);
--bg-inverse: var(--ink-80);
--fg-primary: var(--ink-80);
--fg-secondary: var(--ink-40);
--fg-muted: var(--ink-30);
--fg-disabled: var(--ink-20);
--fg-inverse: var(--ink-0);
--fg-accent: var(--lime-deep);
--border-hair: var(--ink-10);
--border-soft: var(--ink-20);
--border-hard: var(--ink-40);
--border-focus: var(--lime-bright);
/* ---------- SEMANTIC — DARK (night-watchman mode) ----------
Dark — это не toggle, это ХАРАКТЕР бренда.
Marketing hero, product login, footer, «ночные» состояния. */
--night-bg: var(--ink-70);
--night-surface: var(--ink-60);
--night-sunken: var(--ink-80);
--night-fg: #F0F1F5;
--night-fg-dim: var(--ink-20);
--night-hair: rgba(255, 255, 255, 0.06);
--night-border: rgba(255, 255, 255, 0.12);
/* ---------- TYPOGRAPHY ---------- */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-ui: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Type scale — чуть крупнее и «редакционнее», без тимид-SaaS 14px everywhere.
Display — Space Grotesk, tight, tracking -0.03em.
UI — Manrope, normal tracking.
Captions/mono — JetBrains Mono, UPPERCASE, wide tracking. */
--fs-kicker: 11px; /* CAPS MONO tag, tracking 0.14em */
--fs-xs: 12px; /* meta / caption */
--fs-sm: 14px; /* secondary UI */
--fs-base: 16px; /* body */
--fs-md: 18px; /* lead body */
--fs-lg: 22px; /* small title */
--fs-xl: 28px; /* card title */
--fs-2xl: 36px; /* section heading */
--fs-3xl: 52px; /* page heading */
--fs-4xl: 76px; /* hero display */
--fs-5xl: 112px; /* editorial mega */
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-base: 1.45;
--lh-loose: 1.6;
--tracking-display: -0.03em;
--tracking-tight: -0.01em;
--tracking-base: 0;
--tracking-wide: 0.06em;
--tracking-caps: 0.14em;
/* ---------- SPACING (8pt) ---------- */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--s-11: 192px;
/* ---------- RADII ----------
Ограниченно мягкие. Хард-углы разрешены для editorial-блоков. */
--r-none: 0;
--r-sm: 4px;
--r-md: 8px; /* default buttons/inputs */
--r-lg: 14px; /* cards */
--r-xl: 22px; /* hero panels */
--r-pill: 999px;
/* ---------- BORDERS ---------- */
--bw-hair: 1px;
--bw-reg: 1.5px;
--bw-bold: 2px;
/* ---------- SHADOWS ----------
Холодные, никакой тёплой ауры. Минимум по умолчанию. */
--shadow-0: none;
--shadow-1: 0 1px 0 rgba(19, 21, 28, 0.04), 0 1px 2px rgba(19, 21, 28, 0.04);
--shadow-2: 0 2px 0 rgba(19, 21, 28, 0.04), 0 8px 20px -10px rgba(19, 21, 28, 0.18);
--shadow-3: 0 18px 48px -18px rgba(19, 21, 28, 0.28);
--shadow-lime: 0 0 0 4px rgba(198, 255, 61, 0.24);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* ---------- MOTION ----------
Ровное, функциональное. Без сказочной «мягкости». */
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 320ms;
--ease-std: cubic-bezier(0.2, 0, 0, 1); /* material-ish */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* quick out */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
/* ---------- LAYOUT ---------- */
--container: 1200px;
--container-md: 920px;
--container-prose: 680px;
--nav-h: 72px;
}
/* ---------- UTILITY: GLOBAL RESET NORMALIZATION ---------- */
* { box-sizing: border-box; }
/* ---------- UTILITY: TEXT STYLES ----------
Явные классы-утилиты, чтобы можно было применять без препроцессора. */
.u-kicker {
font-family: var(--font-mono);
font-size: var(--fs-kicker);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
font-weight: 500;
color: var(--fg-secondary);
}
.u-display {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: var(--tracking-display);
line-height: var(--lh-tight);
}
.u-title {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: var(--tracking-tight);
line-height: var(--lh-snug);
}
.u-ui {
font-family: var(--font-ui);
font-weight: 400;
letter-spacing: var(--tracking-base);
line-height: var(--lh-base);
}
.u-mono {
font-family: var(--font-mono);
font-feature-settings: 'zero' 1, 'ss01' 1;
}
/* ---------- UTILITY: FOLK PATTERN ----------
Новая русская волна: орнамент-метка, не лубок.
Используется в 2-3 местах максимум: section divider, footer sign-off.
SVG inline as CSS background, легко менять currentColor. */
.u-folk-divider {
height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 40px 12px;
color: currentColor;
opacity: 0.6;
}
/* =============================================================
ОГОНЁК — живой статус-индикатор
Лайм-пиксель в логотипе и аватаре. Дышит, вспыхивает, тревожится.
Применяется на , или любой элемент-точку.
Использует transform-origin: center — у SVG-элементов задавайте
transform-box: fill-box; либо ставьте класс на обёртку.
============================================================= */
.kz-ember {
transform-box: fill-box;
transform-origin: center;
animation: kz-ember-idle 3.6s ease-in-out infinite;
will-change: opacity, transform;
}
/* idle — мягкое дыхание, как уголёк за печкой */
@keyframes kz-ember-idle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.65; transform: scale(0.88); }
}
/* thinking — частый пульс, Кузя думает над ответом */
.kz-ember--thinking {
animation: kz-ember-think 0.9s ease-in-out infinite;
}
@keyframes kz-ember-think {
0%, 100% { opacity: 1; transform: scale(1.1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* sent — короткая вспышка, ответ ушёл */
.kz-ember--sent {
animation: kz-ember-sent 0.65s ease-out 1 forwards;
}
@keyframes kz-ember-sent {
0% { opacity: 1; transform: scale(1.6); filter: brightness(1.4); }
60% { opacity: 1; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
/* alert — Кузя зовёт человека, цвет переключается на тревожный */
.kz-ember--alert {
fill: var(--alert) !important;
animation: kz-ember-alert 1.1s ease-in-out infinite;
}
@keyframes kz-ember-alert {
0%, 100% { opacity: 1; transform: scale(1.15); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* dim — для пресс-материалов, скриншотов: статичный пиксель */
.kz-ember--still {
animation: none;
}
/* respect для пользователей с reduced-motion */
@media (prefers-reduced-motion: reduce) {
.kz-ember,
.kz-ember--thinking,
.kz-ember--sent,
.kz-ember--alert {
animation: none;
}
}