/* ────────────────────────────────────────────────────────────────── * v2-tokens.css — Design System V2 foundation * « Bots & Chat V2 » roadmap, Phase 6. * Roadmap: docs/Roadmap-Bots-Chat-V2.md § Phase 6. * * Contents: * 1. Palette — primary / status colors + soft variants. * 2. Typography — font stacks + size scale. * 3. Spacing scale — semantic gap / radius / shadow tokens. * 4. Animations — shared @keyframes used by V2 components. * * Adoption strategy: * PROGRESSIVE (decision § 4 of the roadmap). This file is loaded * on every page that hosts V2 components (project, chat). It * defines CSS custom properties under :root + a small set of * `@keyframes` definitions — NEVER overrides existing global * selectors. Pages that use only legacy CSS render unchanged. * * Token names start with the `--v2-` prefix so they never collide * with a future Bootstrap / Tailwind merge or with existing * `--*` vars in style.css. * * Fonts: * The templates use « Geist » (sans) + « JetBrains Mono » (mono). * We declare them at the top of the font stack and fall back to * system fonts so a Russia-hosted server with a flaky CDN still * renders cleanly. The `` to Google Fonts goes in the HTML * that loads this stylesheet — that lets a future migration to * self-hosted .woff2 happen without touching every page. * * Phase 10 — Dark mode: * The V2 components were designed light-first (the SAAS template * ships light-only). The app's existing theme toggle (app-shell.js) * writes `data-theme="dark"` or `data-theme="light"` on ; * it ALWAYS sets one or the other (default = "dark"). To make V2 * follow the app theme: * - `:root` defines the V2 DARK palette (the app's default). * - `[data-theme="light"]` overrides with the V2 LIGHT palette. * Every component reads tokens — never hard-codes colours — so a * single attribute flip re-skins the whole V2 layer. The * `--v2-success`, `--v2-danger`, `--v2-warning` ACCENT colours * keep their light-mode values in both modes ; only their soft * tints shift (translucent in dark, solid in light). * ────────────────────────────────────────────────────────────────── */ :root { /* ── 1. Palette (DARK — app default) ─────────────────────────── * Mirrors the dark surfaces declared in style.css so a V2 * component dropped onto a legacy page stays visually consistent. * The accent values (primary / success / danger / warning) are * SHARED with the light theme — only surfaces, lines, and ink * flip; the brand colour stays #5E6AD2 in both modes (Linear * style guide: « keep the brand stable across modes »). */ /* Surface — near-black canvas with charcoal cards. */ --v2-bg: #0C0D11; /* page background */ --v2-surface: #15161B; /* cards, modals, popovers */ --v2-line: #262932; /* primary border */ --v2-line-2: #1C1E25; /* subtle fill / hover background */ /* Text — high-contrast on dark surfaces. */ --v2-ink: #F4F5F8; /* primary text */ --v2-ink-2: #C4C9D4; /* secondary text */ --v2-muted: #8A93A6; /* tertiary text + icons */ --v2-muted-2: #6B7384; /* lighter muted (timestamps, hints) */ /* Brand — same hue in both modes. */ --v2-primary: #828FF5; /* slightly lifted indigo for dark contrast */ --v2-primary-dark: #6E7BE8; /* hover state for primary */ --v2-primary-soft: rgba(130, 143, 245, 0.16); /* translucent tint over dark surfaces */ /* Success / Danger / Warning — accent unchanged, soft tints * become translucent so they blend over the dark canvas. */ --v2-success: #3FB970; --v2-success-soft: rgba(63, 185, 112, 0.16); --v2-danger: #F26464; --v2-danger-soft: rgba(242, 100, 100, 0.16); --v2-warning: #E0962E; --v2-warning-soft: rgba(224, 150, 46, 0.18); /* Recording / live indicator. Kept the same red across modes — it * needs to read as « live, urgent » regardless of theme. */ --v2-rec: #E5484D; } /* ── Light theme override ──────────────────────────────────────── * Activated by `applyTheme('light')` (app-shell.js) which sets * ``. Matches the SAAS template values * EXACTLY — V2 light is the « canonical » design. */ [data-theme="light"] { --v2-bg: #FAFAFA; --v2-surface: #FFFFFF; --v2-line: #E8EAEE; --v2-line-2: #F4F5F8; --v2-ink: #0F1014; --v2-ink-2: #2E2F36; --v2-muted: #8A93A6; --v2-muted-2: #B5BAC6; --v2-primary: #5E6AD2; --v2-primary-dark: #4F5BC3; --v2-primary-soft: #EEF0FF; --v2-success: #1F9D55; --v2-success-soft: #E0F5EB; --v2-danger: #D9303E; --v2-danger-soft: #FDEEF0; --v2-warning: #C76C00; --v2-warning-soft: #FFF1DF; /* Light-mode shadows — lower alpha to match the SAAS template. */ --v2-shadow-sm: 0 1px 2px rgba(15, 16, 20, 0.05); --v2-shadow-md: 0 4px 12px rgba(15, 16, 20, 0.08); --v2-shadow-lg: 0 12px 32px rgba(15, 16, 20, 0.12); } :root { /* ── 2. Typography ───────────────────────────────────────────── * `Geist` first, then a sans-serif system stack. Same idea for * mono. The system fallback list covers macOS / Windows / Linux * + Cyrillic-compatible fonts (Russian content is a first-class * concern on this platform). */ --v2-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, "Noto Sans", "PT Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --v2-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* Type scale — based on the SAAS template's measurements. The * lower bound is 11 px (timestamps, latency badges); 14 px is * the body baseline; 28 px is the largest title we use. */ --v2-fs-xs: 11px; /* timestamps, latency, sub-labels */ --v2-fs-sm: 12px; /* table headers, tags */ --v2-fs-base: 14px; /* body text, buttons */ --v2-fs-md: 15px; /* section titles */ --v2-fs-lg: 18px; /* card titles */ --v2-fs-xl: 22px; /* KPI values */ --v2-fs-2xl: 28px; /* page title */ --v2-fw-regular: 400; --v2-fw-medium: 500; --v2-fw-semibold: 600; --v2-fw-bold: 700; --v2-lh-tight: 1.2; --v2-lh-base: 1.5; --v2-lh-loose: 1.6; /* ── 3. Spacing / radius / shadow ────────────────────────────── * 4-pt grid. Naming reflects USE rather than absolute size so * a future global re-scaling stays mechanical. */ --v2-gap-1: 4px; --v2-gap-2: 8px; --v2-gap-3: 12px; --v2-gap-4: 16px; --v2-gap-5: 20px; --v2-gap-6: 24px; --v2-gap-8: 32px; /* Corner radii — `sm` for chips and pills, `md` for inputs and * buttons, `lg` for cards, `xl` for modals. */ --v2-radius-sm: 6px; --v2-radius-md: 8px; --v2-radius-lg: 10px; --v2-radius-xl: 12px; /* Shadow scale — `sm` for cards at rest, `md` for hovered cards * + popovers, `lg` for modals. Higher alpha here covers the dark * theme (default); the light theme overrides them below with * the lower-contrast values the SAAS template uses. */ --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --v2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --v2-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65); /* ── Z-index scale ───────────────────────────────────────────── * Reserved tiers for the V2 layer. Picks high numbers (1000+) to * sit above the legacy z-indexes in style.css without rewriting * them. */ --v2-z-popover: 1100; --v2-z-modal: 1200; --v2-z-toast: 1300; /* ── Motion ──────────────────────────────────────────────────── * Short, single-easing animations — feels snappy without * distracting from the data. */ --v2-duration-fast: 0.12s; --v2-duration-base: 0.18s; --v2-duration-slow: 0.32s; --v2-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ── 4. Shared @keyframes ─────────────────────────────────────────── * Hosted here (not duplicated per component) so a future tweak — * say, slowing every pulse a touch — is a one-line change. */ @keyframes v2-pulse { /* Used by the chat composer's voice « rec » dot. Subtle scale + * fade to read as « live indicator » without being noisy. */ 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.55; } } @keyframes v2-wave { /* The wave bars next to the rec dot. Each bar gets a slight * `animation-delay` so the row reads as a wave moving left → right. */ 0%, 100% { height: 18%; } 50% { height: 90%; } } @keyframes v2-pop { /* Modal / popover entrance — small zoom from 96 % to 100 % + a * fade-in. No translation so the element doesn't « slide » into * place; small zoom feels native to date pickers and dropdowns. */ 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes v2-slide-in-toast { /* Toast notifications enter from below. The translate distance is * small (20 px) so the motion doesn't grab attention from the * underlying content. */ 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes v2-fade-in { /* Generic fade-in used by chat token streams + cached KPI hints. */ 0% { opacity: 0; } 100% { opacity: 1; } } /* ── 5. Respect prefers-reduced-motion ───────────────────────────── * Users who've opted into reduced motion at the OS level get every * V2 animation collapsed to a no-op. We don't disable transitions * outright (they're already short) — but the keyframed loops * (pulse / wave) are the ones that matter for vestibular comfort. */ @media (prefers-reduced-motion: reduce) { @keyframes v2-pulse { 0%, 100% { transform: none; opacity: 1; } } @keyframes v2-wave { 0%, 100% { height: 50%; } } }