Spaces:
Sleeping
Sleeping
| /** | |
| * ============================================ | |
| * ENHANCED DESIGN TOKENS - Admin UI Modernization | |
| * Crypto Intelligence Hub | |
| * ============================================ | |
| * | |
| * Comprehensive design system with: | |
| * - Color palette (dark/light themes) | |
| * - Gradients (linear, radial, glass effects) | |
| * - Typography scale (fonts, sizes, weights, spacing) | |
| * - Spacing system (consistent rhythm) | |
| * - Border radius tokens | |
| * - Multi-layered shadow system | |
| * - Blur effect variables | |
| * - Transition and easing functions | |
| * - Z-index elevation levels | |
| * - Layout constants | |
| */ | |
| :root { | |
| /* ===== COLOR PALETTE - DARK THEME (DEFAULT) ===== */ | |
| /* Primary Brand Colors */ | |
| --color-primary: #6366f1; | |
| --color-primary-light: #818cf8; | |
| --color-primary-dark: #4f46e5; | |
| --color-primary-darker: #4338ca; | |
| /* Accent Colors */ | |
| --color-accent: #ec4899; | |
| --color-accent-light: #f472b6; | |
| --color-accent-dark: #db2777; | |
| /* Semantic Colors */ | |
| --color-success: #10b981; | |
| --color-success-light: #34d399; | |
| --color-success-dark: #059669; | |
| --color-warning: #f59e0b; | |
| --color-warning-light: #fbbf24; | |
| --color-warning-dark: #d97706; | |
| --color-error: #ef4444; | |
| --color-error-light: #f87171; | |
| --color-error-dark: #dc2626; | |
| --color-info: #3b82f6; | |
| --color-info-light: #60a5fa; | |
| --color-info-dark: #2563eb; | |
| /* Extended Palette */ | |
| --color-purple: #8b5cf6; | |
| --color-purple-light: #a78bfa; | |
| --color-purple-dark: #7c3aed; | |
| --color-cyan: #06b6d4; | |
| --color-cyan-light: #22d3ee; | |
| --color-cyan-dark: #0891b2; | |
| --color-orange: #f97316; | |
| --color-orange-light: #fb923c; | |
| --color-orange-dark: #ea580c; | |
| /* Background Colors - Dark Theme */ | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --bg-elevated: #1e293b; | |
| --bg-overlay: rgba(0, 0, 0, 0.75); | |
| /* Glassmorphism Backgrounds */ | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-bg-light: rgba(255, 255, 255, 0.08); | |
| --glass-bg-strong: rgba(255, 255, 255, 0.12); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --glass-border-strong: rgba(255, 255, 255, 0.2); | |
| /* Text Colors */ | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #cbd5e1; | |
| --text-tertiary: #94a3b8; | |
| --text-muted: #64748b; | |
| --text-disabled: #475569; | |
| --text-inverse: #0f172a; | |
| /* Border Colors */ | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| --border-color-light: rgba(255, 255, 255, 0.05); | |
| --border-color-strong: rgba(255, 255, 255, 0.2); | |
| --border-focus: var(--color-primary); | |
| /* ===== GRADIENTS ===== */ | |
| /* Primary Gradients */ | |
| --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| --gradient-warning: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); | |
| --gradient-error: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); | |
| /* Glass Gradients */ | |
| --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); | |
| --gradient-glass-strong: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%); | |
| /* Overlay Gradients */ | |
| --gradient-overlay: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.8) 100%); | |
| --gradient-overlay-radial: radial-gradient(circle at center, rgba(15,23,42,0) 0%, rgba(15,23,42,0.9) 100%); | |
| /* Radial Gradients for Backgrounds */ | |
| --gradient-radial-blue: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.15) 0%, transparent 50%); | |
| --gradient-radial-purple: radial-gradient(circle at 80% 70%, rgba(139,92,246,0.15) 0%, transparent 50%); | |
| --gradient-radial-pink: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.1) 0%, transparent 40%); | |
| --gradient-radial-green: radial-gradient(circle at 60% 40%, rgba(16,185,129,0.1) 0%, transparent 40%); | |
| /* Multi-color Gradients */ | |
| --gradient-rainbow: linear-gradient(135deg, #667eea 0%, #764ba2 33%, #f093fb 66%, #4facfe 100%); | |
| --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%); | |
| --gradient-ocean: linear-gradient(135deg, #2e3192 0%, #1bffff 100%); | |
| /* ===== TYPOGRAPHY ===== */ | |
| /* Font Families */ | |
| --font-family-primary: 'Inter', 'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-family-secondary: 'Manrope', 'Inter', sans-serif; | |
| --font-family-display: 'DM Sans', 'Inter', sans-serif; | |
| --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace; | |
| /* Font Sizes */ | |
| --font-size-xs: 0.75rem; /* 12px */ | |
| --font-size-sm: 0.875rem; /* 14px */ | |
| --font-size-base: 1rem; /* 16px */ | |
| --font-size-md: 1.125rem; /* 18px */ | |
| --font-size-lg: 1.25rem; /* 20px */ | |
| --font-size-xl: 1.5rem; /* 24px */ | |
| --font-size-2xl: 1.875rem; /* 30px */ | |
| --font-size-3xl: 2.25rem; /* 36px */ | |
| --font-size-4xl: 3rem; /* 48px */ | |
| --font-size-5xl: 3.75rem; /* 60px */ | |
| /* Font Weights */ | |
| --font-weight-light: 300; | |
| --font-weight-normal: 400; | |
| --font-weight-medium: 500; | |
| --font-weight-semibold: 600; | |
| --font-weight-bold: 700; | |
| --font-weight-extrabold: 800; | |
| --font-weight-black: 900; | |
| /* Line Heights */ | |
| --line-height-tight: 1.25; | |
| --line-height-snug: 1.375; | |
| --line-height-normal: 1.5; | |
| --line-height-relaxed: 1.625; | |
| --line-height-loose: 1.75; | |
| --line-height-loose-2: 2; | |
| /* Letter Spacing */ | |
| --letter-spacing-tighter: -0.05em; | |
| --letter-spacing-tight: -0.025em; | |
| --letter-spacing-normal: 0; | |
| --letter-spacing-wide: 0.025em; | |
| --letter-spacing-wider: 0.05em; | |
| --letter-spacing-widest: 0.1em; | |
| /* ===== SPACING SCALE ===== */ | |
| --space-0: 0; | |
| --space-1: 0.25rem; /* 4px */ | |
| --space-2: 0.5rem; /* 8px */ | |
| --space-3: 0.75rem; /* 12px */ | |
| --space-4: 1rem; /* 16px */ | |
| --space-5: 1.25rem; /* 20px */ | |
| --space-6: 1.5rem; /* 24px */ | |
| --space-7: 1.75rem; /* 28px */ | |
| --space-8: 2rem; /* 32px */ | |
| --space-10: 2.5rem; /* 40px */ | |
| --space-12: 3rem; /* 48px */ | |
| --space-16: 4rem; /* 64px */ | |
| --space-20: 5rem; /* 80px */ | |
| --space-24: 6rem; /* 96px */ | |
| --space-32: 8rem; /* 128px */ | |
| /* Semantic Spacing */ | |
| --spacing-xs: var(--space-1); | |
| --spacing-sm: var(--space-2); | |
| --spacing-md: var(--space-4); | |
| --spacing-lg: var(--space-6); | |
| --spacing-xl: var(--space-8); | |
| --spacing-2xl: var(--space-12); | |
| --spacing-3xl: var(--space-16); | |
| /* ===== BORDER RADIUS ===== */ | |
| --radius-none: 0; | |
| --radius-xs: 0.25rem; /* 4px */ | |
| --radius-sm: 0.375rem; /* 6px */ | |
| --radius-base: 0.5rem; /* 8px */ | |
| --radius-md: 0.75rem; /* 12px */ | |
| --radius-lg: 1rem; /* 16px */ | |
| --radius-xl: 1.5rem; /* 24px */ | |
| --radius-2xl: 2rem; /* 32px */ | |
| --radius-3xl: 3rem; /* 48px */ | |
| --radius-full: 9999px; | |
| /* ===== MULTI-LAYERED SHADOW SYSTEM ===== */ | |
| /* Base Shadows - Dark Theme */ | |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5); | |
| --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7); | |
| /* Colored Glow Shadows */ | |
| --shadow-glow: 0 0 20px rgba(99,102,241,0.3); | |
| --shadow-glow-accent: 0 0 20px rgba(236,72,153,0.3); | |
| --shadow-glow-success: 0 0 20px rgba(16,185,129,0.3); | |
| --shadow-glow-warning: 0 0 20px rgba(245,158,11,0.3); | |
| --shadow-glow-error: 0 0 20px rgba(239,68,68,0.3); | |
| /* Multi-layered Colored Shadows */ | |
| --shadow-blue: 0 10px 30px -5px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2); | |
| --shadow-purple: 0 10px 30px -5px rgba(139, 92, 246, 0.4), 0 0 15px rgba(139, 92, 246, 0.2); | |
| --shadow-pink: 0 10px 30px -5px rgba(236, 72, 153, 0.4), 0 0 15px rgba(236, 72, 153, 0.2); | |
| --shadow-green: 0 10px 30px -5px rgba(16, 185, 129, 0.4), 0 0 15px rgba(16, 185, 129, 0.2); | |
| --shadow-cyan: 0 10px 30px -5px rgba(6, 182, 212, 0.4), 0 0 15px rgba(6, 182, 212, 0.2); | |
| /* Inner Shadows */ | |
| --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); | |
| --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.4); | |
| /* ===== BLUR EFFECT VARIABLES ===== */ | |
| --blur-none: 0; | |
| --blur-xs: 2px; | |
| --blur-sm: 4px; | |
| --blur-base: 8px; | |
| --blur-md: 12px; | |
| --blur-lg: 16px; | |
| --blur-xl: 24px; | |
| --blur-2xl: 40px; | |
| --blur-3xl: 64px; | |
| /* ===== TRANSITION AND EASING FUNCTIONS ===== */ | |
| /* Duration */ | |
| --transition-instant: 0ms; | |
| --transition-fast: 150ms; | |
| --transition-base: 250ms; | |
| --transition-slow: 350ms; | |
| --transition-slower: 500ms; | |
| --transition-slowest: 700ms; | |
| /* Easing Functions */ | |
| --ease-linear: linear; | |
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | |
| --ease-out: cubic-bezier(0, 0, 0.2, 1); | |
| --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); | |
| /* Combined Transitions */ | |
| --transition-all-fast: all var(--transition-fast) var(--ease-out); | |
| --transition-all-base: all var(--transition-base) var(--ease-in-out); | |
| --transition-all-slow: all var(--transition-slow) var(--ease-in-out); | |
| --transition-transform: transform var(--transition-base) var(--ease-out); | |
| --transition-opacity: opacity var(--transition-base) var(--ease-out); | |
| --transition-colors: color var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out); | |
| /* ===== Z-INDEX ELEVATION LEVELS ===== */ | |
| --z-base: 0; | |
| --z-dropdown: 1000; | |
| --z-sticky: 1020; | |
| --z-fixed: 1030; | |
| --z-modal-backdrop: 1040; | |
| --z-modal: 1050; | |
| --z-popover: 1060; | |
| --z-tooltip: 1070; | |
| --z-notification: 1080; | |
| --z-max: 9999; | |
| /* ===== LAYOUT CONSTANTS ===== */ | |
| --header-height: 72px; | |
| --sidebar-width: 280px; | |
| --sidebar-collapsed-width: 80px; | |
| --mobile-nav-height: 64px; | |
| --container-max-width: 1920px; | |
| --content-max-width: 1440px; | |
| /* ===== BREAKPOINTS (for JS usage) ===== */ | |
| --breakpoint-xs: 320px; | |
| --breakpoint-sm: 480px; | |
| --breakpoint-md: 640px; | |
| --breakpoint-lg: 768px; | |
| --breakpoint-xl: 1024px; | |
| --breakpoint-2xl: 1280px; | |
| --breakpoint-3xl: 1440px; | |
| --breakpoint-4xl: 1920px; | |
| } | |
| /* ===== LIGHT THEME OVERRIDES ===== */ | |
| [data-theme="light"] { | |
| /* Background Colors */ | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f9fafb; | |
| --bg-tertiary: #f3f4f6; | |
| --bg-elevated: #ffffff; | |
| --bg-overlay: rgba(255, 255, 255, 0.9); | |
| /* Glassmorphism Backgrounds */ | |
| --glass-bg: rgba(255, 255, 255, 0.7); | |
| --glass-bg-light: rgba(255, 255, 255, 0.5); | |
| --glass-bg-strong: rgba(255, 255, 255, 0.85); | |
| --glass-border: rgba(0, 0, 0, 0.1); | |
| --glass-border-strong: rgba(0, 0, 0, 0.2); | |
| /* Text Colors */ | |
| --text-primary: #111827; | |
| --text-secondary: #6b7280; | |
| --text-tertiary: #9ca3af; | |
| --text-muted: #d1d5db; | |
| --text-disabled: #e5e7eb; | |
| --text-inverse: #ffffff; | |
| /* Border Colors */ | |
| --border-color: rgba(0, 0, 0, 0.1); | |
| --border-color-light: rgba(0, 0, 0, 0.05); | |
| --border-color-strong: rgba(0, 0, 0, 0.2); | |
| /* Glass Gradients */ | |
| --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%); | |
| --gradient-glass-strong: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); | |
| /* Overlay Gradients */ | |
| --gradient-overlay: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); | |
| /* Shadows - Lighter for Light Theme */ | |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.08); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| /* Inner Shadows */ | |
| --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); | |
| --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1); | |
| } | |
| /* ===== UTILITY CLASSES ===== */ | |
| /* Glassmorphism Effects */ | |
| .glass-effect { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(var(--blur-lg)); | |
| -webkit-backdrop-filter: blur(var(--blur-lg)); | |
| border: 1px solid var(--glass-border); | |
| } | |
| .glass-effect-light { | |
| background: var(--glass-bg-light); | |
| backdrop-filter: blur(var(--blur-md)); | |
| -webkit-backdrop-filter: blur(var(--blur-md)); | |
| border: 1px solid var(--glass-border); | |
| } | |
| .glass-effect-strong { | |
| background: var(--glass-bg-strong); | |
| backdrop-filter: blur(var(--blur-xl)); | |
| -webkit-backdrop-filter: blur(var(--blur-xl)); | |
| border: 1px solid var(--glass-border-strong); | |
| } | |
| /* Gradient Backgrounds */ | |
| .bg-gradient-primary { | |
| background: var(--gradient-primary); | |
| } | |
| .bg-gradient-accent { | |
| background: var(--gradient-accent); | |
| } | |
| .bg-gradient-success { | |
| background: var(--gradient-success); | |
| } | |
| /* Text Gradients */ | |
| .text-gradient-primary { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .text-gradient-accent { | |
| background: var(--gradient-accent); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Shadow Utilities */ | |
| .shadow-glow-blue { | |
| box-shadow: var(--shadow-blue); | |
| } | |
| .shadow-glow-purple { | |
| box-shadow: var(--shadow-purple); | |
| } | |
| .shadow-glow-pink { | |
| box-shadow: var(--shadow-pink); | |
| } | |
| .shadow-glow-green { | |
| box-shadow: var(--shadow-green); | |
| } | |
| /* Animation Utilities */ | |
| .transition-fast { | |
| transition: var(--transition-all-fast); | |
| } | |
| .transition-base { | |
| transition: var(--transition-all-base); | |
| } | |
| .transition-slow { | |
| transition: var(--transition-all-slow); | |
| } | |
| /* Accessibility: Respect reduced motion preference */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| scroll-behavior: auto ; | |
| } | |
| } | |