/* ========================================================================== Design Tokens — CSS Custom Properties Dark / Light theme support ========================================================================== */ :root { /* ====================================================================== Colors — Brand ====================================================================== */ --color-primary: #6366f1; /* Indigo */ --color-primary-hover: #818cf8; --color-primary-active:#4f46e5; --color-primary-rgb: 99, 102, 241; --color-secondary: #8b5cf6; /* Purple */ --color-secondary-hover: #a78bfa; --color-secondary-active:#7c3aed; --color-secondary-rgb: 139, 92, 246; /* ====================================================================== Colors — Semantic ====================================================================== */ --color-success: #22c55e; --color-success-hover: #4ade80; --color-success-bg: rgba(34, 197, 94, 0.1); --color-warning: #f59e0b; --color-warning-hover: #fbbf24; --color-warning-bg: rgba(245, 158, 11, 0.1); --color-danger: #ef4444; --color-danger-hover: #f87171; --color-danger-active: #dc2626; --color-danger-bg: rgba(239, 68, 68, 0.1); --color-info: #3b82f6; --color-info-hover: #60a5fa; --color-info-bg: rgba(59, 130, 246, 0.1); /* ====================================================================== Backgrounds ====================================================================== */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --bg-card: #1e293b; --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.08); --bg-overlay: rgba(0, 0, 0, 0.6); /* ====================================================================== Text ====================================================================== */ --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; --text-link: var(--color-primary); /* ====================================================================== Borders ====================================================================== */ --border-color: #334155; --border-light: rgba(255, 255, 255, 0.06); --border-radius: 8px; --border-radius-sm:4px; --border-radius-lg:12px; --border-radius-xl:16px; --border-radius-full: 9999px; /* ====================================================================== Breakpoints (for reference — use in @media queries directly) ====================================================================== */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; /* ====================================================================== Spacing Scale ====================================================================== */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ====================================================================== Typography ====================================================================== */ --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed:1.75; /* ====================================================================== Shadows ====================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-glow:0 0 20px rgba(99, 102, 241, 0.15); /* ====================================================================== Transitions ====================================================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ====================================================================== Layout ====================================================================== */ --sidebar-width: 260px; --sidebar-collapsed: 60px; --header-height: 60px; --content-max-width: 1400px; /* ====================================================================== Z-index Scale ====================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-overlay: 400; --z-modal: 500; /* ⚠️ --z-toast and --z-tooltip deliberately break the 100-step scale, and must NOT be "tidied" back down to 600/700. The scale only governs the components that opt into it (six modals use var(--z-modal, 500), plus layout.css and components.css). Plenty of others hardcode a literal instead and sit far above it: mh-files' .modal-backdrop is 2000 and its .ctx-menu 3000, mh-support is 2000, mh-public-page reaches 9500, whiteboard-engine 9999, and the Quill image/overlay dialogs 100000. At 600 the toast rendered BEHIND every one of them, so a success or error toast raised while any modal was open was invisible -- which is exactly where toasts matter most. It went unnoticed for a long time because nothing was obviously broken; the message simply never appeared. A toast is a global notification and must outrank every surface that can be open at the time, so these sit above the highest hardcoded value in the codebase (100000). Fixing this properly means migrating those components onto the tokens; until then, raising these two is what makes toasts visible without reordering anything else relative to each other. If a new surface is ever added above 100000, raise these to match. */ --z-toast: 100200; --z-tooltip: 100300; } /* ========================================================================== Light Theme Overrides ========================================================================== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0; --bg-card: #ffffff; --bg-hover: rgba(0, 0, 0, 0.04); --bg-active: rgba(0, 0, 0, 0.08); --bg-overlay: rgba(0, 0, 0, 0.4); /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #f8fafc; /* Borders */ --border-color: #cbd5e1; --border-light: rgba(0, 0, 0, 0.06); /* Semantic — slightly adjusted for light bg readability */ --color-success-bg: rgba(34, 197, 94, 0.12); --color-warning-bg: rgba(245, 158, 11, 0.12); --color-danger-bg: rgba(239, 68, 68, 0.1); --color-info-bg: rgba(59, 130, 246, 0.1); /* Shadows — lighter for light theme */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-glow:0 0 20px rgba(99, 102, 241, 0.1); }