/* CollabX — Modern Enterprise Design System Variables */ /* Palette: Vibrant CollabX Royal Blue (#1F5EF2 / #2563EB) & Crisp SaaS UI */ /* Seamlessly matches the CollabX Login, Register & Landing Page brand identity */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ================================================================ LIGHT MODE (CollabX Brand Blue Signature) Crisp Blue, Ice Canvas, Deep Navy Typography, Sleek Micro-Borders ================================================================ */ --color-scheme: light; /* Primary Accent: CollabX Signature Vibrant Royal Blue (#1F5EF2) */ --color-primary: #1F5EF2; /* Vibrant Royal Blue */ --color-primary-container: #1F5EF2; /* Button fill & active states */ --color-primary-dark: #154ECC; /* Darker Blue */ --color-primary-hover: #1752D8; --color-primary-light: rgba(31, 94, 242, 0.10); --color-primary-xlight: rgba(31, 94, 242, 0.05); --color-on-primary: #FFFFFF; /* Secondary Accent: Cyan / Sky Blue */ --color-secondary: #0284C7; /* Sky 600 */ --color-secondary-light: rgba(2, 132, 199, 0.10); /* Neutral Typography: Deep Navy & Slate */ --color-navy: #0B1533; /* CollabX Deep Navy Headings */ --color-text-primary: #0F172A; /* Slate 900 Primary Text */ --color-text-secondary: #475569; /* Slate 600 Secondary Text */ --color-text-muted: #64748B; /* Slate 500 Metadata */ --color-text-placeholder: #94A3B8; /* Slate 400 */ /* Surfaces & Backgrounds: Crisp Ice Canvas */ --color-bg: #F5F8FF; /* Soft CollabX Ice Blue Canvas */ --color-surface: #FFFFFF; /* Pure Crisp White Cards */ --color-surface-container: #EFF4FE; /* Soft Blue Container */ --color-surface-high: #F8FAFF; --color-surface-low: #F0F4FC; /* Recessed ice surface */ --color-surface-hover: #EFF4FE; --color-sidebar-bg: #FFFFFF; --color-header-bg: rgba(255, 255, 255, 0.90); /* Borders: Clean Ice/Slate Borders */ --color-border: #E2E8F0; /* Slate 200 */ --color-border-light: #EFF3F9; --color-border-hover: #CBD5E1; /* Slate 300 */ /* Semantic Status (Vibrant SaaS Badges) */ --color-success: #10B981; /* Emerald Green */ --color-success-bg: rgba(16, 185, 129, 0.10); --color-success-border: rgba(16, 185, 129, 0.25); --color-warning: #F59E0B; /* Amber */ --color-warning-bg: rgba(245, 158, 11, 0.10); --color-warning-border: rgba(245, 158, 11, 0.25); --color-danger: #EF4444; /* Rose / Crimson */ --color-danger-bg: #FEF2F2; --color-danger-border: rgba(239, 68, 68, 0.25); --color-error: #EF4444; --color-info: #1F5EF2; --color-info-bg: rgba(31, 94, 242, 0.10); --color-info-border: rgba(31, 94, 242, 0.25); /* Typography */ --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xxs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-headline-sm: 18px; --text-headline: 20px; --text-headline-lg: 24px; --text-display: 32px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* Border Radius: Smooth SaaS rounded corners */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 9999px; /* Rich Soft Shadows */ --shadow-xs: 0 1px 2px rgba(11, 21, 51, 0.04); --shadow-sm: 0 2px 4px rgba(11, 21, 51, 0.05), 0 1px 2px rgba(11, 21, 51, 0.03); --shadow-md: 0 4px 14px rgba(11, 21, 51, 0.07), 0 2px 6px rgba(11, 21, 51, 0.04); --shadow-lg: 0 12px 28px rgba(11, 21, 51, 0.09), 0 4px 10px rgba(11, 21, 51, 0.05); --shadow-xl: 0 20px 40px rgba(11, 21, 51, 0.12), 0 8px 16px rgba(11, 21, 51, 0.06); --shadow-card: 0 1px 3px rgba(11, 21, 51, 0.04), 0 0 0 1px rgba(226, 232, 240, 0.7); --shadow-sidebar: 1px 0 0 rgba(226, 232, 240, 0.8), 2px 0 12px rgba(11, 21, 51, 0.03); --shadow-header: 0 1px 0 rgba(226, 232, 240, 0.8), 0 2px 8px rgba(11, 21, 51, 0.02); /* Transitions */ --transition-fast: all 0.15s ease; --transition-normal: all 0.25s ease; /* Layout */ --sidebar-width: 248px; --header-height: 64px; --content-padding: 28px; /* Z-Index */ --z-sidebar: 100; --z-header: 200; --z-dropdown: 500; --z-modal: 1000; } /* ================================================================ NIGHT (DARK) MODE OVERRIDES (data-theme="dark") Deep Midnight Navy & Royal Blue Glowing Accents ================================================================ */ html[data-theme="dark"] { --color-scheme: dark; /* Primary Accent: Glowing Royal Blue */ --color-primary: #3B82F6; /* Blue 500 */ --color-primary-container: #2563EB; /* Blue 600 */ --color-primary-dark: #60A5FA; /* Blue 400 */ --color-primary-hover: #1D4ED8; --color-primary-light: rgba(59, 130, 246, 0.16); --color-primary-xlight: rgba(59, 130, 246, 0.08); --color-on-primary: #FFFFFF; /* Secondary Accent */ --color-secondary: #38BDF8; /* Sky 400 */ --color-secondary-light: rgba(56, 189, 248, 0.16); /* Neutral Typography in Dark Mode */ --color-navy: #F8FAFC; /* Pure White Headings */ --color-text-primary: #F1F5F9; /* Slate 100 Primary */ --color-text-secondary: #CBD5E1; /* Slate 300 Secondary */ --color-text-muted: #94A3B8; /* Slate 400 Metadata */ --color-text-placeholder: #64748B; /* Slate 500 */ /* Surfaces & Backgrounds: Deep Midnight Obsidian */ --color-bg: #0A0F1D; /* Deep Midnight Canvas */ --color-surface: #11192E; /* Elevated Midnight Card */ --color-surface-container: #18233C; /* Secondary Surface */ --color-surface-high: #1E2C4B; /* Hover surface */ --color-surface-low: #0E1424; /* Recessed areas */ --color-surface-hover: #18233C; --color-sidebar-bg: #0D1326; /* Deep Midnight Sidebar */ --color-header-bg: rgba(13, 19, 38, 0.90); /* Borders in Dark Mode */ --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.05); --color-border-hover: rgba(255, 255, 255, 0.18); /* Semantic Status */ --color-success: #34D399; --color-success-bg: rgba(52, 211, 153, 0.14); --color-success-border: rgba(52, 211, 153, 0.30); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.14); --color-warning-border: rgba(251, 191, 36, 0.30); --color-danger: #F87171; --color-danger-bg: rgba(248, 113, 113, 0.14); --color-danger-border: rgba(248, 113, 113, 0.30); --color-error: #F87171; --color-info: #3B82F6; --color-info-bg: rgba(59, 130, 246, 0.14); --color-info-border: rgba(59, 130, 246, 0.30); /* Shadows in Dark Mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.7); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.8); --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-sidebar: 1px 0 0 rgba(255, 255, 255, 0.06); --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06); }