/** * Vynos Design System — Canonical Tokens * ======================================= * Single source of truth for all design values across every portal. * All portals import this via globals.css. Do not duplicate values elsewhere. * * Usage in CSS: color: var(--vynos-cyan); * Usage in JS/TSX: style={{ color: "var(--vynos-cyan)" }} * Light mode: Add data-theme="light" to or any container. * * Canonical brand color: #00CCCC (matches logo.svg exactly — never use the old bright-cyan hex) * * Typography: Plus Jakarta Sans + JetBrains Mono. Rounded geometric sans with premium feel, * excellent readability at small sizes. Dark-first with warm light surfaces. */ /* ── Fonts ──────────────────────────────────────────────────────────────────── Loaded once via globals.css @import (Google Fonts). Do NOT add in portal layouts. Plus Jakarta Sans — rounded geometric, premium feel. JetBrains Mono — excellent for code/data. ──────────────────────────────────────────────────────────────────────────── */ :root { --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; } /* ── Dark theme (default — all portals are dark-first) ─────────────────────── ──────────────────────────────────────────────────────────────────────────── */ :root { /* Backgrounds — Material / Gemini-style dark grays (not blue-violet tint) */ --vynos-bg-0: #131314; /* page canvas */ --vynos-bg-1: #1e1e1e; /* sidebar, shells */ --vynos-bg-2: #282a2c; /* cards, surfaces */ --vynos-bg-3: #303134; /* hover, active */ --vynos-bg-4: #3c4043; /* elevated panels */ --vynos-bg-5: #474747; /* tooltips, popovers */ /* Text — Google dark-theme scale */ --vynos-text-0: #e8eaed; /* headings, primary */ --vynos-text-1: #bdc1c6; /* body, labels */ --vynos-text-2: #9aa0a6; /* secondary, captions */ --vynos-text-3: #5f6368; /* disabled, placeholders */ /* Borders */ --vynos-border: rgba(255, 255, 255, 0.08); /* default */ --vynos-border-md: rgba(255, 255, 255, 0.14); /* medium emphasis */ --vynos-border-hi: rgba(0, 204, 204, 0.35); /* brand highlight */ /* ── Brand — Cyan (#00CCCC canonical) ──────────────────────────────────── */ --vynos-cyan: #00CCCC; --vynos-cyan-dim: #009999; --vynos-cyan-bg: rgba(0, 204, 204, 0.08); --vynos-cyan-bg-md: rgba(0, 204, 204, 0.12); --vynos-cyan-glow: rgba(0, 204, 204, 0.18); --vynos-cyan-pale: rgba(0, 204, 204, 0.06); /* ── Secondary — Violet ─────────────────────────────────────────────────── */ --vynos-violet: #a78bfa; --vynos-violet-dim: #c4b5fd; --vynos-violet-bg: rgba(167, 139, 250, 0.08); --vynos-violet-bg-md: rgba(167, 139, 250, 0.15); /* ── Semantic (Material-adjacent on dark) ─────────────────────────────── */ --vynos-emerald: #81c995; --vynos-emerald-bg: rgba(129, 201, 149, 0.12); --vynos-emerald-bg-md: rgba(129, 201, 149, 0.18); --vynos-red: #f28b82; --vynos-red-bg: rgba(242, 139, 130, 0.12); --vynos-red-bg-md: rgba(242, 139, 130, 0.22); --vynos-amber: #fdd663; --vynos-amber-bg: rgba(253, 214, 99, 0.12); --vynos-amber-bg-md: rgba(253, 214, 99, 0.2); /* ── Orange (gradients, accents — pairs with amber) ───────────────────── */ --vynos-orange: #fb923c; /* ── Text on saturated fills (buttons, pills) ─────────────────────────── */ --vynos-on-primary: #050508; --vynos-on-danger: #ffffff; /* ── Inline error / alert surfaces ──────────────────────────────────────── */ --vynos-error-text: #f28b82; --vynos-error-surface: rgba(242, 139, 130, 0.14); --vynos-error-border: rgba(242, 139, 130, 0.28); /* ── Specialist badge hues (workspace) ───────────────────────────────── */ --vynos-specialist-core: #00cccc; --vynos-specialist-data: #a78bfa; --vynos-specialist-mule: #f59e0b; --vynos-specialist-marketing: #3b82f6; --vynos-specialist-security: #ef4444; --vynos-specialist-default: #9aa0a6; /* ── Cyan border (toggles, chips — distinct from --vynos-border-hi) ─── */ --vynos-cyan-border-soft: rgba(0, 204, 204, 0.22); /* ── Semantic borders (avoid duplicating rgba in TSX) ─────────────────── */ --vynos-emerald-border-soft: rgba(129, 201, 149, 0.35); --vynos-amber-border-soft: rgba(253, 214, 99, 0.35); --vynos-red-border-soft: rgba(242, 139, 130, 0.35); --vynos-emerald-border-md: rgba(129, 201, 149, 0.45); --vynos-amber-border-md: rgba(253, 214, 99, 0.45); --vynos-red-border-md: rgba(242, 139, 130, 0.45); --vynos-violet-border-md: rgba(167, 139, 250, 0.25); /* Status dot glow (org health, etc.) */ --vynos-glow-emerald: 0 0 6px rgba(129, 201, 149, 0.45); --vynos-glow-amber: 0 0 6px rgba(253, 214, 99, 0.45); --vynos-glow-red: 0 0 6px rgba(242, 139, 130, 0.45); /* Inline spinner track (on light button fills) */ --vynos-spinner-track: rgba(255, 255, 255, 0.18); /* Nested canvas / diagram wash */ --vynos-muted-overlay: rgba(0, 0, 0, 0.2); --vynos-muted-overlay-strong: rgba(0, 0, 0, 0.32); /* ── Elevation shadows ─────────────────────────────────────────────────── */ --vynos-shadow-overlay: 0 2px 12px rgba(0, 0, 0, 0.35); --vynos-shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.4); /* ── Toggle / switch knob (on colored track) ───────────────────────────── */ --vynos-toggle-knob: #ffffff; /* ── Modal / form surfaces ───────────────────────────────────────────────── */ --vynos-scrim: rgba(5, 5, 8, 0.82); --vynos-scrim-soft: rgba(0, 0, 0, 0.52); --vynos-input-surface: rgba(255, 255, 255, 0.06); --vynos-surface-faint: rgba(255, 255, 255, 0.05); --vynos-surface-fainter: rgba(255, 255, 255, 0.03); --vynos-danger-fill: rgba(242, 139, 130, 0.92); --vynos-danger-fill-muted: rgba(242, 139, 130, 0.32); --vynos-violet-border-soft: rgba(167, 139, 250, 0.2); /* ── Radius scale ───────────────────────────────────────────────────────── */ --vynos-r-xs: 4px; --vynos-r-sm: 6px; --vynos-r-md: 8px; --vynos-r-lg: 12px; --vynos-r-xl: 16px; --vynos-r-full: 999px; /* ── Code / Terminal ─────────────────────────────────────────────────── */ --vynos-code-bg: #1e1e1e; /* Optional Gemini-style decorative gradient (hero chips, marketing — not required everywhere) */ --vynos-accent-gradient: linear-gradient(135deg, #4285f4 0%, #a142f4 42%, #f28b82 88%); /* ── Layout ─────────────────────────────────────────────────────────────── */ --vynos-sidebar-w: 220px; --vynos-topbar-h: 54px; --vynos-content-max: 1400px; } /* ── Light theme overrides ──────────────────────────────────────────────────── Apply data-theme="light" to or a container div. ──────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Warm light surfaces (not harsh white — matches command portal) */ --vynos-bg-0: #f5f5f0; --vynos-bg-1: #fafaf7; --vynos-bg-2: #efefe9; --vynos-bg-3: #e5e5df; --vynos-bg-4: #d5d5cf; --vynos-bg-5: #c0c0ba; --vynos-text-0: #1a1a1a; --vynos-text-1: #3a3a3a; --vynos-text-2: #666660; --vynos-text-3: #9a9a94; --vynos-border: rgba(0, 0, 0, 0.06); --vynos-border-md: rgba(0, 0, 0, 0.12); --vynos-border-hi: rgba(0, 153, 153, 0.35); /* Cyan darkens on light backgrounds for WCAG AA contrast */ --vynos-cyan: #007a7a; --vynos-cyan-dim: #005f5f; --vynos-cyan-bg: rgba(0, 122, 122, 0.08); --vynos-cyan-bg-md: rgba(0, 122, 122, 0.14); --vynos-cyan-glow: rgba(0, 122, 122, 0.14); --vynos-cyan-pale: rgba(0, 122, 122, 0.05); --vynos-violet: #6d28d9; --vynos-violet-dim: #7c3aed; --vynos-violet-bg: rgba(109, 40, 217, 0.08); --vynos-emerald: #1e8e3e; --vynos-emerald-bg: rgba(30, 142, 62, 0.1); --vynos-red: #d93025; --vynos-red-bg: rgba(217, 48, 37, 0.08); --vynos-red-bg-md: rgba(217, 48, 37, 0.14); --vynos-amber: #f29900; --vynos-amber-bg: rgba(242, 153, 0, 0.1); --vynos-amber-bg-md: rgba(242, 153, 0, 0.18); --vynos-orange: #ea580c; --vynos-on-primary: #050508; --vynos-on-danger: #ffffff; --vynos-error-text: #c5221f; --vynos-error-surface: rgba(217, 48, 37, 0.08); --vynos-error-border: rgba(217, 48, 37, 0.22); --vynos-specialist-core: #007a7a; --vynos-specialist-data: #6d28d9; --vynos-specialist-mule: #b45309; --vynos-specialist-marketing: #1d4ed8; --vynos-specialist-security: #dc2626; --vynos-specialist-default: #5f6368; --vynos-cyan-border-soft: rgba(0, 122, 122, 0.28); --vynos-emerald-border-soft: rgba(30, 142, 62, 0.28); --vynos-amber-border-soft: rgba(242, 153, 0, 0.35); --vynos-red-border-soft: rgba(217, 48, 37, 0.28); --vynos-emerald-border-md: rgba(30, 142, 62, 0.38); --vynos-amber-border-md: rgba(242, 153, 0, 0.42); --vynos-red-border-md: rgba(217, 48, 37, 0.35); --vynos-violet-border-md: rgba(109, 40, 217, 0.28); --vynos-glow-emerald: 0 0 6px rgba(30, 142, 62, 0.4); --vynos-glow-amber: 0 0 6px rgba(242, 153, 0, 0.4); --vynos-glow-red: 0 0 6px rgba(217, 48, 37, 0.4); --vynos-spinner-track: rgba(0, 0, 0, 0.12); --vynos-muted-overlay: rgba(0, 0, 0, 0.06); --vynos-muted-overlay-strong: rgba(0, 0, 0, 0.1); --vynos-shadow-overlay: 0 2px 12px rgba(0, 0, 0, 0.12); --vynos-shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.14); --vynos-toggle-knob: #ffffff; --vynos-scrim: rgba(10, 10, 20, 0.45); --vynos-scrim-soft: rgba(0, 0, 0, 0.32); --vynos-input-surface: rgba(0, 0, 0, 0.04); --vynos-surface-faint: rgba(0, 0, 0, 0.04); --vynos-surface-fainter: rgba(0, 0, 0, 0.025); --vynos-danger-fill: rgba(217, 48, 37, 0.92); --vynos-danger-fill-muted: rgba(217, 48, 37, 0.3); --vynos-violet-border-soft: rgba(109, 40, 217, 0.22); --vynos-code-bg: #f8f9fa; --vynos-accent-gradient: linear-gradient(135deg, #1a73e8 0%, #9334e6 42%, #ea4335 88%); } /* ── Base resets ────────────────────────────────────────────────────────────── Applied globally. These match the standards used across all portals. ──────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; font-family: var(--font-body); background: var(--vynos-bg-0); color: var(--vynos-text-1); transition: background 0.3s ease, color 0.3s ease; } /* Same as command portal: UI controls inherit Plus Jakarta (not browser serif/sans defaults) */ button, input, textarea, select, optgroup { font-family: inherit; } /* Workspace chat markdown — body uses Plus Jakarta; code blocks use JetBrains Mono */ .vynos-markdown { font-family: var(--font-body); } .vynos-markdown pre, .vynos-markdown code.hljs { font-family: var(--font-mono); } html[data-theme-transitioning] *, html[data-theme-transitioning] *::before, html[data-theme-transitioning] *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* Consistent scrollbar across portals */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 99px; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } /* Inputs — consistent focus ring using brand cyan */ input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(0, 204, 204, 0.40) !important; box-shadow: 0 0 0 2px rgba(0, 204, 204, 0.08); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: rgba(0, 122, 122, 0.50) !important; box-shadow: 0 0 0 2px rgba(0, 122, 122, 0.10); } /* Animations used across all portals */ @keyframes vynos-spin { to { transform: rotate(360deg); } } @keyframes vynos-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes vynos-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes vynos-fade-in { from { opacity: 0; } to { opacity: 1; } }