Spaces:
Paused
Paused
File size: 2,754 Bytes
a5784e9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | /**
* CSS Design System Variables
* Premium dark-mode-first design
*/
:root {
/* Color Palette - Dark Mode (Default) */
--bg-primary: #0a0a0b;
--bg-secondary: #141416;
--bg-tertiary: #1c1c1f;
--bg-elevated: #242428;
/* Accent Colors */
--accent-primary: #6366f1;
--accent-primary-hover: #818cf8;
--accent-secondary: #8b5cf6;
--accent-success: #10b981;
--accent-warning: #f59e0b;
--accent-error: #ef4444;
/* Text Colors */
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--text-disabled: #52525b;
/* Border Colors */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);
--border-emphasis: rgba(255, 255, 255, 0.15);
/* Glassmorphism */
--glass-bg: rgba(20, 20, 22, 0.8);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-blur: blur(12px);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Typography */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
--transition-slow: 300ms ease;
/* Z-Index Layers */
--z-base: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 30;
--z-modal: 40;
--z-toast: 50;
/* Layout */
--sidebar-width: 320px;
--header-height: 56px;
}
/* Light Mode */
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--bg-tertiary: #f3f4f6;
--bg-elevated: #ffffff;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-muted: #9ca3af;
--text-disabled: #d1d5db;
--border-subtle: rgba(0, 0, 0, 0.04);
--border-default: rgba(0, 0, 0, 0.08);
--border-emphasis: rgba(0, 0, 0, 0.12);
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(0, 0, 0, 0.06);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.1);
}
|