/** * Mirror Ai — Workspace Design Tokens * =================================== * THE single source of truth for the workspace visual language. * * WHY THIS FILE EXISTS * -------------------- * Chat, Document Writer and Blog Writer each grew their own palette: * - chat.css → a complete `--chat-*` set (the premium overhaul, PR #190/#192) * - document-writer.css → a rival `--doc-*` set * - blog-writer.css → almost no tokens; raw hex on a Tailwind *slate* palette * (#0f1729 / #64748b / rgba(71,85,105,*)) used nowhere else * Nothing was shared, so the three tools drifted apart and the workspace stopped * reading as one product. * * THE CONTRACT * ------------ * `--ws-*` is canonical, and its values are THE WEBSITE'S OWN BRAND NAVY — the * gradient base.html paints with. The workspace is the same product as the * site, so it is painted from the same family. * * Everything else aliases onto it: * design-system.css :root { --color-bg-primary: var(--ws-bg-deep); } * chat.css :root { --chat-accent-primary: var(--ws-accent); } * document-writer.css :root { --doc-accent-cyan: var(--ws-accent); } * * design-system.css used to declare a RIVAL palette while calling itself the * "single source of truth". They disagreed on every surface — and on the pink * (#f72585 vs #f093fb). Both were "official", which is how a pink nobody chose * ended up washing the documents and Knowledge Hub backgrounds. There is now * exactly one. * * ONE OF EACH — enforced by the verification greps: * one cyan (#00f2fe; #00d4ff and #00b4dc retired) * one pink (#f093fb; #f72585 and #b5179e retired) * one green (--ws-success; five existed) * one red, one warning * * RULES * ----- * - New workspace CSS uses `--ws-*` directly. Never re-declare a colour. * - Never add a raw hex to a feature stylesheet. If a value is missing, add it HERE. * (The one exception: @media print, where literal black-on-white is correct.) * - This file must load FIRST (before workspace.css and any feature CSS). * * LOAD ORDER: design-system.css → workspace-tokens.css → visibility-system.css → workspace.css → features */ :root { /* ------------------------------------------------------------------ Surfaces — THE BRAND NAVY. These are derived from the website itself: base.html paints as linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%). The workspace now lives in that same family, so the rail and the views read as the same product as the site. They used to be a separate, cooler, near-black ramp (#05060f / #080a1a / #0a0e1f ...) which matched neither the site nor chat's own canvas — chat.css was already painting #0a0e27. That is why the rail looked like a different application. ------------------------------------------------------------------ */ --ws-bg-deepest: #070a1c; /* app backdrop, behind everything */ --ws-bg-deep: #0a0e27; /* rail / chrome base <- THE BRAND BASE */ --ws-bg-primary: #0d1230; /* primary content surface */ --ws-bg-secondary: #141a35; /* raised surface */ --ws-bg-tertiary: #1a1f3a; /* cards <- THE BRAND END */ --ws-bg-elevated: #232a4a; /* popovers, modals, menus */ /* ------------------------------------------------------------------ Accents — cyan is the brand; purple is the counterweight ------------------------------------------------------------------ */ --ws-accent: #00f2fe; /* primary — CTAs, active state, focus */ --ws-accent-blue: #58b9ff; /* the CTA gradient's far end */ --ws-accent-purple: #764ba2; /* secondary */ --ws-accent-indigo: #667eea; /* tertiary — gradients */ --ws-accent-pink: #f093fb; /* quaternary — sparingly. THE only pink: #f72585 and #b5179e are retired. */ /* ------------------------------------------------------------------ Text hierarchy — four steps, never more ------------------------------------------------------------------ */ --ws-text: #ffffff; --ws-text-secondary: rgba(255, 255, 255, 0.85); --ws-text-muted: rgba(255, 255, 255, 0.6); --ws-text-subtle: rgba(255, 255, 255, 0.4); /* ------------------------------------------------------------------ Gradients ------------------------------------------------------------------ */ --ws-gradient-glow: linear-gradient(135deg, #00f2fe 0%, #764ba2 100%); --ws-gradient-user: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --ws-gradient-surface: linear-gradient(135deg, rgba(26, 31, 58, 0.9) 0%, rgba(20, 26, 53, 0.95) 100%); --ws-gradient-rail: linear-gradient(180deg, #0d1230 0%, #0a0e27 100%); /* Flat CTA fill — the live "restrained premium" chat button (chat.css:5696 layer) */ --ws-gradient-cta: linear-gradient(135deg, #00f2fe 0%, #58b9ff 100%); --ws-cta-ink: #04121a; /* dark text ON the cyan CTA — never white */ /* ------------------------------------------------------------------ Glass ------------------------------------------------------------------ */ --ws-glass-bg: rgba(255, 255, 255, 0.03); --ws-glass-border: rgba(255, 255, 255, 0.08); --ws-glass-border-hover: rgba(0, 242, 254, 0.3); --ws-glass-hover: rgba(255, 255, 255, 0.045); /* row hover in the rail */ /* Controls carry a STRONGER boundary than surfaces do. --ws-glass-border (0.08) is the right weight for separating panels, but too quiet for something the user is supposed to notice and press: a button with a 0.08 outline on a dark navy reads as a text label. Affordance beats minimalism. */ --ws-border-control: rgba(255, 255, 255, 0.16); --ws-border-control-hover: rgba(0, 242, 254, 0.45); /* ------------------------------------------------------------------ Elevation ------------------------------------------------------------------ */ --ws-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --ws-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4); --ws-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); --ws-glow-cyan: 0 0 40px rgba(0, 242, 254, 0.15); --ws-glow-purple: 0 0 40px rgba(118, 75, 162, 0.2); /* ------------------------------------------------------------------ Semantic state — one set, shared by chat, docs and blog (documents previously had its own --doc-save-* / --doc-*-text scale) ------------------------------------------------------------------ */ --ws-success: #10b981; --ws-success-text: #6ee7b7; --ws-warning: #f59e0b; --ws-warning-active: #fbbf24; --ws-danger: #ef4444; --ws-danger-text: #f87171; /* ------------------------------------------------------------------ Layout — the rail is declared ONCE, here. Previously .chat-sidebar's width was declared in FOUR files (design-system 240px / workspace.css 240px / chat.css 280px / chat-mobile 300px). ------------------------------------------------------------------ */ /* The workspace shell is TWO columns: a slim icon rail (picks the service) and a contextual panel (shows it). See workspace-shell.css. */ --ws-rail-icon: 60px; /* the icon rail — always present in a deep view */ --ws-panel-w: 260px; /* the contextual panel */ --ws-shell-w: 320px; /* rail + panel; the view's left offset when expanded */ /* Legacy single-rail tokens — kept because chat.css still aliases them (dead) and to avoid churn; the shell no longer uses --ws-rail-w / --ws-rail-collapsed. */ --ws-rail-w: 280px; /* expanded (legacy) */ --ws-rail-collapsed: 72px; /* (legacy) */ --ws-rail-mobile: 320px; /* off-canvas drawer = rail + panel; capped at 92vw */ --ws-measure: 68ch; /* premium reading measure (chat answer card) */ --ws-content-max: 900px; /* message / composer max width */ /* ------------------------------------------------------------------ Radius ------------------------------------------------------------------ */ --ws-radius-sm: 8px; --ws-radius-md: 12px; --ws-radius-lg: 16px; --ws-radius-pill: 999px; /* ------------------------------------------------------------------ Motion — one easing curve across the whole workspace ------------------------------------------------------------------ */ --ws-ease: cubic-bezier(0.4, 0, 0.2, 1); --ws-t-fast: 0.15s ease; --ws-t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --ws-t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Respect the user's motion preference globally for workspace transitions. */ @media (prefers-reduced-motion: reduce) { :root { --ws-t-fast: 0.01ms; --ws-t-base: 0.01ms; --ws-t-slow: 0.01ms; } }