/* ============================================ TaskFlow Design Tokens — Premium Aurora System Font: Plus Jakarta Sans | Style: Vibrant Cosmic Themes: Cosmic Dark, Luminous Light, Ocean Abyss, Rose Quartz, Neon Cyber ============================================ */ :root { --font-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --text-xs: clamp(0.6875rem, 0.6rem + 0.25vw, 0.75rem); --text-sm: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem); --text-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-lg: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --text-2xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --text-3xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); --text-4xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem); --text-5xl: clamp(2.25rem, 1.8rem + 2vw, 3rem); --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 480ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); --z-base:1; --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500; --z-max:999; --sidebar-width: 272px; --sidebar-collapsed: 68px; --header-height: 64px; --scrollbar-size: 5px; } /* ============================================= Theme: Cosmic Dark Aurora (Default & Premium) ============================================= */ [data-theme="dark"], :root { --bg-primary: #07071A; --bg-secondary: #0D0D2A; --bg-tertiary: #141430; --bg-card: #101026; --bg-card-hover: #171740; --bg-input: #0A0A20; --bg-elevated: #1A1A3E; --bg-overlay: rgba(0, 0, 0, 0.75); --text-primary: #F0F0FF; --text-secondary: #A0A0C8; --text-tertiary: #5E5E8A; --text-inverse: #07071A; --border-primary: rgba(255, 255, 255, 0.07); --border-secondary: rgba(255, 255, 255, 0.03); --border-accent: rgba(139, 92, 246, 0.35); --border-glow: rgba(139, 92, 246, 0.6); --accent: #8B5CF6; --accent-2: #EC4899; --accent-3: #06B6D4; --accent-hover: #7C3AED; --accent-light: rgba(139, 92, 246, 0.14); --accent-glow: rgba(139, 92, 246, 0.45); --accent-glow-2: rgba(236, 72, 153, 0.35); --accent-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%); --accent-gradient-3: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #06B6D4 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(139,92,246,0.2) 0%, rgba(236,72,153,0.2) 100%); --success: #10B981; --success-bg: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --warning-bg: rgba(245, 158, 11, 0.12); --error: #EF4444; --error-bg: rgba(239, 68, 68, 0.12); --info: #06B6D4; --info-bg: rgba(6, 182, 212, 0.12); --priority-critical: #EF4444; --priority-high: #F97316; --priority-medium: #F59E0B; --priority-low: #10B981; --shadow-sm: 0 2px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4); --shadow-glow: 0 0 24px rgba(139,92,246,0.35), 0 0 48px rgba(139,92,246,0.15); --shadow-glow-2: 0 0 24px rgba(236,72,153,0.35), 0 0 48px rgba(236,72,153,0.1); --shadow-card: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); --glass-bg: rgba(16, 16, 38, 0.82); --glass-border: rgba(255, 255, 255, 0.06); --glass-blur: 20px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(139, 92, 246, 0.4); --scrollbar-thumb-hover: rgba(139, 92, 246, 0.65); } /* =========================== Theme: Luminous Light =========================== */ [data-theme="light"] { --bg-primary: #FAFBFF; --bg-secondary: #F1F3FC; --bg-tertiary: #E8ECF8; --bg-card: #FFFFFF; --bg-card-hover: #F6F7FF; --bg-input: #F3F4FA; --bg-elevated: #FFFFFF; --bg-overlay: rgba(0, 0, 0, 0.35); --text-primary: #0F0F2E; --text-secondary: #4A4A72; --text-tertiary: #8A8ABE; --text-inverse: #FAFBFF; --border-primary: rgba(100, 80, 220, 0.12); --border-secondary: rgba(100, 80, 220, 0.06); --border-accent: rgba(124, 58, 237, 0.28); --border-glow: rgba(124, 58, 237, 0.5); --accent: #7C3AED; --accent-2: #DB2777; --accent-3: #0891B2; --accent-hover: #6D28D9; --accent-light: rgba(124, 58, 237, 0.1); --accent-glow: rgba(124, 58, 237, 0.25); --accent-glow-2: rgba(219, 39, 119, 0.2); --accent-gradient: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%); --accent-gradient-3: linear-gradient(135deg, #7C3AED 0%, #DB2777 50%, #0891B2 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(219,39,119,0.08) 100%); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #D97706; --warning-bg: rgba(217, 119, 6, 0.08); --error: #DC2626; --error-bg: rgba(220, 38, 38, 0.08); --info: #0891B2; --info-bg: rgba(8, 145, 178, 0.08); --priority-critical: #DC2626; --priority-high: #EA580C; --priority-medium: #CA8A04; --priority-low: #16A34A; --shadow-sm: 0 1px 4px rgba(15,15,46,0.06), 0 2px 8px rgba(15,15,46,0.04); --shadow-md: 0 4px 16px rgba(15,15,46,0.08), 0 1px 4px rgba(15,15,46,0.04); --shadow-lg: 0 8px 32px rgba(15,15,46,0.12), 0 2px 8px rgba(15,15,46,0.06); --shadow-glow: 0 0 24px rgba(124,58,237,0.18), 0 4px 16px rgba(124,58,237,0.1); --shadow-glow-2: 0 0 24px rgba(219,39,119,0.15); --shadow-card: 0 2px 16px rgba(15,15,46,0.08), inset 0 1px 0 rgba(255,255,255,0.8); --glass-bg: rgba(255, 255, 255, 0.88); --glass-border: rgba(100, 80, 220, 0.1); --glass-blur: 20px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(124, 58, 237, 0.28); --scrollbar-thumb-hover: rgba(124, 58, 237, 0.5); } /* =========================== Theme: Ocean Abyss =========================== */ [data-theme="ocean"] { --bg-primary: #020D1A; --bg-secondary: #061829; --bg-tertiary: #0C2440; --bg-card: #081E36; --bg-card-hover: #0E2948; --bg-input: #041220; --bg-elevated: #122E4A; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #D0EFFF; --text-secondary: #7AB8D8; --text-tertiary: #3E7A9A; --text-inverse: #020D1A; --border-primary: rgba(0, 200, 255, 0.1); --border-secondary: rgba(0, 200, 255, 0.05); --border-accent: rgba(0, 229, 255, 0.3); --border-glow: rgba(0, 229, 255, 0.6); --accent: #00E5FF; --accent-2: #00B8D4; --accent-3: #40C4FF; --accent-hover: #00BCD4; --accent-light: rgba(0, 229, 255, 0.1); --accent-glow: rgba(0, 229, 255, 0.35); --accent-glow-2: rgba(64, 196, 255, 0.25); --accent-gradient: linear-gradient(135deg, #00E5FF 0%, #40C4FF 100%); --accent-gradient-3: linear-gradient(135deg, #00E5FF 0%, #40C4FF 50%, #0050E8 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(0,229,255,0.15) 0%, rgba(64,196,255,0.15) 100%); --success: #00E5A0; --success-bg: rgba(0, 229, 160, 0.1); --warning: #FFD740; --warning-bg: rgba(255, 215, 64, 0.1); --error: #FF5252; --error-bg: rgba(255, 82, 82, 0.1); --info: #40C4FF; --info-bg: rgba(64, 196, 255, 0.1); --priority-critical: #FF5252; --priority-high: #FF6D00; --priority-medium: #FFD740; --priority-low: #00E5A0; --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 4px 20px rgba(0,0,0,0.5); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6); --shadow-glow: 0 0 24px rgba(0,229,255,0.3), 0 0 48px rgba(0,229,255,0.1); --shadow-glow-2: 0 0 24px rgba(64,196,255,0.25); --shadow-card: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,229,255,0.04); --glass-bg: rgba(8, 30, 54, 0.85); --glass-border: rgba(0, 229, 255, 0.08); --glass-blur: 20px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(0, 229, 255, 0.3); --scrollbar-thumb-hover: rgba(0, 229, 255, 0.55); } /* =========================== Theme: Rose Quartz =========================== */ [data-theme="rose"] { --bg-primary: #150A14; --bg-secondary: #1F1020; --bg-tertiary: #2A1830; --bg-card: #231328; --bg-card-hover: #301A3C; --bg-input: #180C1C; --bg-elevated: #361E40; --bg-overlay: rgba(0, 0, 0, 0.7); --text-primary: #FAE8FF; --text-secondary: #D8A8E8; --text-tertiary: #9060A8; --text-inverse: #150A14; --border-primary: rgba(240, 160, 255, 0.1); --border-secondary: rgba(240, 160, 255, 0.05); --border-accent: rgba(244, 114, 182, 0.35); --border-glow: rgba(244, 114, 182, 0.6); --accent: #F472B6; --accent-2: #E879F9; --accent-3: #C084FC; --accent-hover: #EC4899; --accent-light: rgba(244, 114, 182, 0.12); --accent-glow: rgba(244, 114, 182, 0.4); --accent-glow-2: rgba(232, 121, 249, 0.3); --accent-gradient: linear-gradient(135deg, #F472B6 0%, #E879F9 100%); --accent-gradient-3: linear-gradient(135deg, #F472B6 0%, #E879F9 50%, #C084FC 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(232,121,249,0.15) 100%); --success: #86EFAC; --success-bg: rgba(134, 239, 172, 0.1); --warning: #FCD34D; --warning-bg: rgba(252, 211, 77, 0.1); --error: #FCA5A5; --error-bg: rgba(252, 165, 165, 0.1); --info: #93C5FD; --info-bg: rgba(147, 197, 253, 0.1); --priority-critical: #FCA5A5; --priority-high: #FDBA74; --priority-medium: #FCD34D; --priority-low: #86EFAC; --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 4px 20px rgba(0,0,0,0.5); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6); --shadow-glow: 0 0 24px rgba(244,114,182,0.4), 0 0 48px rgba(244,114,182,0.15); --shadow-glow-2: 0 0 24px rgba(232,121,249,0.3); --shadow-card: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(244,114,182,0.04); --glass-bg: rgba(35, 19, 40, 0.85); --glass-border: rgba(244, 114, 182, 0.08); --glass-blur: 20px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(244, 114, 182, 0.35); --scrollbar-thumb-hover: rgba(244, 114, 182, 0.6); } /* =========================== Theme: Neon Cyber =========================== */ [data-theme="cyberpunk"] { --bg-primary: #050512; --bg-secondary: #0A0A2A; --bg-tertiary: #111138; --bg-card: #0C0C30; --bg-card-hover: #141448; --bg-input: #080820; --bg-elevated: #181858; --bg-overlay: rgba(0, 0, 0, 0.8); --text-primary: #E8E8FF; --text-secondary: #9090C8; --text-tertiary: #5050A0; --text-inverse: #050512; --border-primary: rgba(0, 240, 255, 0.1); --border-secondary: rgba(0, 240, 255, 0.04); --border-accent: rgba(0, 240, 255, 0.35); --border-glow: rgba(0, 240, 255, 0.7); --accent: #00F0FF; --accent-2: #FF00FF; --accent-3: #00FF88; --accent-hover: #00D5E5; --accent-light: rgba(0, 240, 255, 0.1); --accent-glow: rgba(0, 240, 255, 0.45); --accent-glow-2: rgba(255, 0, 255, 0.35); --accent-gradient: linear-gradient(135deg, #00F0FF 0%, #FF00FF 100%); --accent-gradient-3: linear-gradient(135deg, #00F0FF 0%, #FF00FF 50%, #00FF88 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(0,240,255,0.12) 0%, rgba(255,0,255,0.12) 100%); --success: #00FF88; --success-bg: rgba(0, 255, 136, 0.1); --warning: #FFB800; --warning-bg: rgba(255, 184, 0, 0.1); --error: #FF0055; --error-bg: rgba(255, 0, 85, 0.1); --info: #00F0FF; --info-bg: rgba(0, 240, 255, 0.1); --priority-critical: #FF0055; --priority-high: #FF6600; --priority-medium: #FFB800; --priority-low: #00FF88; --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 4px 20px rgba(0,0,0,0.6); --shadow-lg: 0 8px 40px rgba(0,0,0,0.7); --shadow-glow: 0 0 20px rgba(0,240,255,0.5), 0 0 60px rgba(0,240,255,0.15); --shadow-glow-2: 0 0 20px rgba(255,0,255,0.4), 0 0 60px rgba(255,0,255,0.1); --shadow-card: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(0,240,255,0.05); --glass-bg: rgba(12, 12, 48, 0.88); --glass-border: rgba(0, 240, 255, 0.1); --glass-blur: 20px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(0, 240, 255, 0.35); --scrollbar-thumb-hover: rgba(0, 240, 255, 0.6); }