/** * TASKMATE - CSS Variables * ======================== * Modernes Light-Theme Design System */ :root { /* ======================================== FARBEN - Modernes Light Theme ======================================== */ /* Primärfarben */ --primary: #4F46E5; --primary-hover: #4338CA; --primary-light: #EEF2FF; --accent: #06B6D4; --accent-hover: #0891B2; /* Hintergründe */ --bg-main: #F8FAFC; --bg-secondary: #FFFFFF; --bg-tertiary: #F1F5F9; --bg-hover: #E2E8F0; --bg-active: #CBD5E1; --bg-sidebar: #FFFFFF; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Textfarben */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #64748B; --text-muted: #94A3B8; --text-placeholder: #94A3B8; --text-inverse: #FFFFFF; /* Statusfarben */ --success: #10B981; --success-bg: #D1FAE5; --success-text: #065F46; --warning: #F59E0B; --warning-bg: #FEF3C7; --warning-text: #92400E; --error: #EF4444; --error-bg: #FEE2E2; --error-text: #991B1B; --info: #3B82F6; --info-bg: #DBEAFE; --info-text: #1E40AF; /* Prioritätsfarben */ --priority-high: #EF4444; --priority-high-bg: #FEE2E2; --priority-medium: #F59E0B; --priority-medium-bg: #FEF3C7; --priority-low: #10B981; --priority-low-bg: #D1FAE5; /* Rahmen */ --border-light: #F1F5F9; --border-default: #E2E8F0; --border-dark: #CBD5E1; --border-focus: #4F46E5; /* Schatten */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.2); /* Scrollbar */ --scrollbar-bg: #F1F5F9; --scrollbar-thumb: #CBD5E1; --scrollbar-thumb-hover: #94A3B8; /* Overlay */ --overlay-bg: rgba(15, 23, 42, 0.5); /* ======================================== SCHRIFTARTEN ======================================== */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Schriftgrößen */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Zeilenhöhen */ --leading-none: 1; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Schriftgewichte */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ======================================== ABSTÄNDE & GRÖSSEN ======================================== */ --spacing-0: 0; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; /* Alte Spacing-Namen für Kompatibilität */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 2.5rem; /* Border Radius */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* Komponentengrößen */ --header-height: 64px; --sidebar-width: 280px; --column-width: 320px; --column-min-width: 300px; --card-min-height: 72px; /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-default: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ======================================== Z-INDEX ======================================== */ --z-dropdown: 100; --z-sticky: 200; --z-modal-overlay: 900; --z-modal: 1000; --z-tooltip: 1100; --z-toast: 1200; }