/* ============================================================ NELVO DESIGN SYSTEM — global entry point (СГЕНЕРИРОВАН). НЕ редактируй руками — правь tokens/*.css или base/recipes.css, затем: python3 webui/ds/build_styles.py #perf: один файл вместо @import-водопада из 9 файлов. Шрифты — прямым в (не @import), см. fonts.css. ============================================================ */ /* ── tokens/colors.css ── */ /* ============================================================ NELVO — COLOR TOKENS (authoritative; from nelvo-tokens.css) Warm-neutral ink chrome + ONE emerald accent. No blue/indigo. Emerald is reserved: approve / «станет» / healthy / positive. Red only for urgent alerts. Amber only for «требует решения». ============================================================ */ :root { /* ---- Neutral ink-chrome (slate, warm-neutral, NOT blue) ---- */ --ink-900: #14171A; /* primary text, dark hero sections */ --ink-800: #1E2227; --ink-700: #2C313A; /* secondary text on light */ --ink-600: #3D434D; --ink-500: #5A616B; /* lead / descriptions */ --ink-400: #767D87; /* captions, meta */ --ink-300: #9AA1AB; /* placeholders, meta on dark */ --ink-200: #C7CCD2; --ink-150: #E2E5E9; /* hairline borders (primary stroke) */ --ink-100: #EEF0F2; /* dividers, panel fill */ --ink-50: #F6F7F8; /* off-white section bg */ --paper: #FFFFFF; /* cards, fields */ --canvas: #FBFBFC; /* page background (warm off-white) */ /* ---- Single accent — emerald. Approve / «станет» / positive / CTA. Never flood large areas — it is a point signal. ---- */ --accent-700: #0B6E47; /* hover / press / text on soft bg */ --accent-600: #0E8A57; --accent-500: #12A56B; /* main accent */ --accent-300: #6BD3A6; /* thin diff lines, icons */ --accent-100: #DDF3E8; /* soft «станет» bg, badges */ --accent-50: #EFF9F3; /* ---- Status semantics ---- */ --good-500: #12A56B; /* good == accent, intentional */ --warn-600: #B4730F; /* «Требует решения», warnings */ --warn-100: #F6ECD8; --danger-600: #C8453C; /* «Срочно» / budget drain — text & badge */ --danger-100: #F7E0DE; /* ---- Focus / selection ---- */ --focus-ring: var(--ink-900); --selection-bg: var(--accent-100); /* ============================================================ SEMANTIC ALIASES — prefer these in components / screens. ============================================================ */ --surface-page: var(--canvas); --surface-section: var(--ink-50); --surface-card: var(--paper); --surface-panel: var(--ink-100); --surface-inverse: var(--ink-900); --surface-hover: var(--ink-50); --surface-after: var(--accent-50); /* «станет» block */ --surface-before: var(--ink-50); /* «было» block */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-secondary: var(--ink-700); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-on-ink: var(--paper); --text-on-ink-muted: var(--ink-300); --text-accent: var(--accent-700); --text-warn: var(--warn-600); --text-danger: var(--danger-600); --border-hairline: var(--ink-150); --border-strong-c: var(--ink-200); --border-accent: var(--accent-300); --border-on-dark: rgba(255, 255, 255, 0.10); --action-ink: var(--ink-900); --action-ink-hover: var(--ink-800); --action-accent: var(--accent-500); --action-accent-hover: var(--accent-600); --action-accent-press: var(--accent-700); } /* ── tokens/typography.css ── */ /* ============================================================ NELVO — TYPOGRAPHY TOKENS (authoritative; from nelvo-tokens.css) Manrope: UI / body / display (full Cyrillic). JetBrains Mono: numbers / meta / tables (tabular figures). Editorial-large like Stripe, composed like Linear. ============================================================ */ :root { /* ---- Families ---- */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* ---- Weights ---- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ /* ---- Type scale (size / line-height / letter-spacing) ---- */ --t-hero-size: 72px; /* landing H1 */ --t-hero-lh: 1.04; /* @kind font */ --t-hero-ls: -0.03em; /* @kind font */ --t-h1-size: 48px; --t-h1-lh: 1.08; /* @kind font */ --t-h1-ls: -0.025em; /* @kind font */ --t-h2-size: 34px; --t-h2-lh: 1.15; /* @kind font */ --t-h2-ls: -0.02em; /* @kind font */ --t-h3-size: 24px; --t-h3-lh: 1.25; /* @kind font */ --t-h3-ls: -0.015em; /* @kind font */ --t-lead-size: 19px; /* subheading */ --t-lead-lh: 1.5; /* @kind font */ --t-lead-ls: -0.01em; /* @kind font */ --t-body-size: 16px; --t-body-lh: 1.55; /* @kind font */ --t-body-ls: 0; /* @kind font */ --t-small-size: 14px; --t-small-lh: 1.45; /* @kind font */ --t-small-ls: 0; /* @kind font */ --t-label-size: 12px; /* mono UPPERCASE meta: БЫЛО / СТАНЕТ */ --t-label-lh: 1.3; /* @kind font */ --t-label-ls: 0.06em; /* @kind font */ --t-num-size: 28px; /* large metric figures, mono, tnum */ --t-num-lh: 1.0; /* @kind font */ --t-num-ls: -0.02em; /* @kind font */ } /* ── tokens/spacing.css ── */ /* ============================================================ NELVO — SPACING TOKENS (authoritative; from nelvo-tokens.css) 4px grid. Generous air like Stripe — sections breathe. ============================================================ */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- Layout ---- */ --container: 1200px; --gutter: 24px; --section-y: 96px; /* vertical rhythm between landing sections */ /* ---- App layout ---- */ --app-sidebar-w: 248px; --app-rail-w: 60px; } /* ── tokens/radius.css ── */ /* ============================================================ NELVO — RADIUS TOKENS (authoritative; from nelvo-tokens.css) Base 8 — precise/professional, a touch softer than zero. ============================================================ */ :root { --r-xs: 6px; /* small chips, small inputs */ --r-sm: 8px; /* buttons, inputs — BASE */ --r-md: 12px; /* cards */ --r-lg: 16px; /* large cards, diff blocks */ --r-xl: 20px; /* hero panels, modals */ --r-pill: 999px; } /* ── tokens/borders.css ── */ /* ============================================================ NELVO — BORDER TOKENS (authoritative; from nelvo-tokens.css) Hairline borders are the primary structural device. ============================================================ */ :root { --bw: 1px; --border: 1px solid var(--ink-150); /* standard hairline */ --border-strong: 1px solid var(--ink-200); --border-dark: 1px solid rgba(255, 255, 255, 0.10); /* @kind other */ } /* ── tokens/shadows.css ── */ /* ============================================================ NELVO — SHADOW TOKENS (authoritative; from nelvo-tokens.css) Ink-tinted (never pure black), multi-layer, restrained. Premium craft like Ramp — no heavy drop shadows. ============================================================ */ :root { --sh-xs: 0 1px 2px rgba(20, 23, 26, 0.05); --sh-sm: 0 1px 2px rgba(20, 23, 26, 0.05), 0 2px 8px rgba(20, 23, 26, 0.04); --sh-md: 0 4px 12px rgba(20, 23, 26, 0.06), 0 2px 4px rgba(20, 23, 26, 0.04); --sh-lg: 0 12px 32px rgba(20, 23, 26, 0.10), 0 4px 8px rgba(20, 23, 26, 0.05); --sh-card: var(--sh-sm); /* approval-queue cards */ } /* ── tokens/motion.css ── */ /* ============================================================ NELVO — MOTION TOKENS (authoritative; from nelvo-tokens.css) Calm, controlled. One gentle ease, short durations. ============================================================ */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --dur-1: 140ms; /* @kind other */ --dur-2: 220ms; /* @kind other */ --dur-3: 360ms; /* @kind other */ } /* ── base/recipes.css ── */ /* ============================================================ NELVO — BASE & COMPONENT RECIPES Ported from nelvo-tokens.css. These are shipped to consumers: the mono micro-label, the metric, ink/accent buttons, the card, the БЫЛО→СТАНЕТ diff blocks, status badges, dark section. React components reference these tokens; plain HTML can use the utility classes directly. ============================================================ */ ::selection { background: var(--selection-bg); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); } .nlv-body { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--ink-900); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Mono UPPERCASE micro-label — signature meta (БЫЛО / СТАНЕТ / К СОГЛАСОВАНИЮ). */ .nlv-label { font-family: var(--font-mono); font-size: var(--t-label-size); letter-spacing: var(--t-label-ls); line-height: var(--t-label-lh); text-transform: uppercase; color: var(--ink-400); } /* Large metric — mono, tabular figures, column-aligned. */ .nlv-metric { font-family: var(--font-mono); font-size: var(--t-num-size); letter-spacing: var(--t-num-ls); font-feature-settings: "tnum" 1, "lnum" 1; color: var(--ink-900); } /* Primary action. ink (default) OR accent — NEVER blue. */ .nlv-btn-primary { font: var(--fw-semibold) var(--t-small-size)/1 var(--font-sans); color: var(--paper); background: var(--ink-900); padding: 12px 18px; border-radius: var(--r-sm); border: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out); } .nlv-btn-primary:hover { background: var(--ink-800); } .nlv-btn-approve { background: var(--accent-500); color: var(--paper); } .nlv-btn-approve:hover { background: var(--accent-600); } .nlv-btn-ghost { font: var(--fw-semibold) var(--t-small-size)/1 var(--font-sans); color: var(--ink-900); background: transparent; padding: 12px 18px; border-radius: var(--r-sm); border: var(--border-strong); cursor: pointer; transition: background var(--dur-1) var(--ease-out); } .nlv-btn-ghost:hover { background: var(--ink-50); } /* Approval-queue card. */ .nlv-card { background: var(--paper); border: var(--border); border-radius: var(--r-md); box-shadow: var(--sh-card); padding: var(--sp-5); } /* Heart of the product — БЫЛО → СТАНЕТ diff. */ .nlv-diff-before { background: var(--ink-50); border: var(--border); border-radius: var(--r-sm); padding: var(--sp-4); color: var(--ink-500); } .nlv-diff-after { background: var(--accent-50); border: 1px solid var(--accent-300); border-radius: var(--r-sm); padding: var(--sp-4); color: var(--accent-700); } /* Queue status badges. */ .nlv-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--fw-medium) var(--t-small-size)/1 var(--font-sans); padding: 4px 10px; border-radius: var(--r-pill); } .nlv-badge-pending { color: var(--warn-600); background: var(--warn-100); } .nlv-badge-urgent { color: var(--danger-600); background: var(--danger-100); } .nlv-badge-ok { color: var(--accent-700); background: var(--accent-100); } /* Dark section (hero / footer). */ .nlv-section-dark { background: var(--ink-900); color: var(--paper); border-color: rgba(255, 255, 255, 0.10); }