/* ============================================================================ LUMENARY GALLERY - DESIGN TOKENS Comprehensive design system foundation with glassmorphism and bioluminescence ============================================================================ */ :root { /* ======================================== COLOR SYSTEM - Bioluminescent Palette ======================================== */ /* Base Colors - Deep Space Foundation */ --color-void-black: #0a0a0f; --color-deep-space: #0f0f1a; --color-dark-matter: #1a1a2e; --color-cosmic-shadow: #16213e; /* Primary Accent - Electric Teal (Bioluminescent Cyan) */ --color-primary-100: #00ffd5; --color-primary-90: #00e6c0; --color-primary-80: #00ccaa; --color-primary-70: #00b395; --color-primary-60: #009980; --color-primary-50: #00806a; --color-primary-40: #006655; /* Secondary Accent - Phosphorescent Purple */ --color-secondary-100: #8b5cf6; --color-secondary-90: #7c4ee0; --color-secondary-80: #6d40ca; --color-secondary-70: #5e32b4; --color-secondary-60: #4f249e; --color-secondary-50: #401688; /* Tertiary Accent - Warm Amber (Firefly Glow) */ --color-accent-100: #f59e0b; --color-accent-90: #f59e0b; --color-accent-80: #d97706; --color-accent-70: #b45309; --color-accent-60: #92400e; /* Neutral Grays with Blue Tint */ --color-neutral-100: #f8f9fa; --color-neutral-90: #e9ecef; --color-neutral-80: #dee2e6; --color-neutral-70: #ced4da; --color-neutral-60: #adb5bd; --color-neutral-50: #6c757d; --color-neutral-40: #495057; --color-neutral-30: #343a40; --color-neutral-20: #212529; /* Glassmorphism Overlay Colors */ --glass-white-10: rgba(255, 255, 255, 0.1); --glass-white-8: rgba(255, 255, 255, 0.08); --glass-white-5: rgba(255, 255, 255, 0.05); --glass-white-3: rgba(255, 255, 255, 0.03); --glass-teal-20: rgba(0, 255, 213, 0.2); --glass-teal-15: rgba(0, 255, 213, 0.15); --glass-teal-10: rgba(0, 255, 213, 0.1); --glass-teal-5: rgba(0, 255, 213, 0.05); --glass-purple-20: rgba(139, 92, 246, 0.2); --glass-purple-15: rgba(139, 92, 246, 0.15); --glass-purple-10: rgba(139, 92, 246, 0.1); --glass-purple-5: rgba(139, 92, 246, 0.05); /* ======================================== GLOW EFFECTS - Bioluminescent Shadows ======================================== */ /* Primary Glow - Teal */ --glow-primary-sm: 0 0 8px rgba(0, 255, 213, 0.3), 0 0 16px rgba(0, 255, 213, 0.2); --glow-primary-md: 0 0 12px rgba(0, 255, 213, 0.4), 0 0 24px rgba(0, 255, 213, 0.3), 0 0 36px rgba(0, 255, 213, 0.2); --glow-primary-lg: 0 0 16px rgba(0, 255, 213, 0.5), 0 0 32px rgba(0, 255, 213, 0.4), 0 0 48px rgba(0, 255, 213, 0.3), 0 0 64px rgba(0, 255, 213, 0.2); --glow-primary-xl: 0 0 24px rgba(0, 255, 213, 0.6), 0 0 48px rgba(0, 255, 213, 0.5), 0 0 72px rgba(0, 255, 213, 0.4), 0 0 96px rgba(0, 255, 213, 0.3); /* Secondary Glow - Purple */ --glow-secondary-sm: 0 0 8px rgba(139, 92, 246, 0.3), 0 0 16px rgba(139, 92, 246, 0.2); --glow-secondary-md: 0 0 12px rgba(139, 92, 246, 0.4), 0 0 24px rgba(139, 92, 246, 0.3), 0 0 36px rgba(139, 92, 246, 0.2); --glow-secondary-lg: 0 0 16px rgba(139, 92, 246, 0.5), 0 0 32px rgba(139, 92, 246, 0.4), 0 0 48px rgba(139, 92, 246, 0.3); /* Accent Glow - Amber */ --glow-accent-sm: 0 0 8px rgba(245, 158, 11, 0.3), 0 0 16px rgba(245, 158, 11, 0.2); --glow-accent-md: 0 0 12px rgba(245, 158, 11, 0.4), 0 0 24px rgba(245, 158, 11, 0.3); /* Text Glow */ --text-glow-primary: 0 0 10px rgba(0, 255, 213, 0.5), 0 0 20px rgba(0, 255, 213, 0.3), 0 0 30px rgba(0, 255, 213, 0.2); --text-glow-secondary: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3); --text-glow-accent: 0 0 10px rgba(245, 158, 11, 0.5), 0 0 20px rgba(245, 158, 11, 0.3); /* ======================================== GLASSMORPHISM EFFECTS ======================================== */ /* Backdrop Blur Levels */ --blur-xs: blur(4px); --blur-sm: blur(8px); --blur-md: blur(12px); --blur-lg: blur(16px); --blur-xl: blur(24px); --blur-2xl: blur(32px); /* Glass Border Gradients */ --border-glass-primary: linear-gradient(135deg, rgba(0, 255, 213, 0.3) 0%, rgba(0, 255, 213, 0.1) 50%, rgba(0, 255, 213, 0.3) 100%); --border-glass-secondary: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(139, 92, 246, 0.3) 100%); --border-glass-neutral: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 100%); /* Glass Backgrounds */ --bg-glass-light: rgba(255, 255, 255, 0.05); --bg-glass-medium: rgba(255, 255, 255, 0.08); --bg-glass-heavy: rgba(255, 255, 255, 0.12); --bg-glass-dark: rgba(10, 10, 15, 0.7); --bg-glass-darker: rgba(10, 10, 15, 0.85); /* ======================================== TYPOGRAPHY SCALE ======================================== */ /* Font Families */ --font-hero: 'Rajdhani', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font Sizes - Fluid Typography */ --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */ --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); /* 14-16px */ --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16-18px */ --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); /* 18-20px */ --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20-24px */ --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24-32px */ --font-size-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* 32-48px */ --font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* 40-64px */ --font-size-4xl: clamp(3rem, 2.5rem + 3vw, 5rem); /* 48-80px */ --font-size-5xl: clamp(4rem, 3rem + 5vw, 6rem); /* 64-96px */ --font-size-hero: clamp(4.5rem, 3.5rem + 6vw, 8rem); /* 72-128px */ /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 900; /* Line Heights */ --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* Letter Spacing */ --letter-spacing-tight: -0.05em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; --letter-spacing-widest: 0.2em; /* ======================================== SPACING SCALE - 8px Base Grid ======================================== */ --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-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 */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-64: 16rem; /* 256px */ /* Section Spacing */ --section-gap-xs: clamp(2rem, 4vw, 3rem); --section-gap-sm: clamp(3rem, 6vw, 4rem); --section-gap-md: clamp(4rem, 8vw, 6rem); --section-gap-lg: clamp(6rem, 10vw, 8rem); --section-gap-xl: clamp(8rem, 12vw, 12rem); /* ======================================== LAYOUT DIMENSIONS ======================================== */ /* Container Widths */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; --container-full: 100%; /* Border Radius */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Border Widths */ --border-0: 0; --border-1: 1px; --border-2: 2px; --border-4: 4px; --border-8: 8px; /* ======================================== Z-INDEX LAYERS ======================================== */ --z-background: -1; --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1400; --z-popover: 1500; --z-tooltip: 1600; /* ======================================== ANIMATION & TRANSITIONS ======================================== */ /* Timing Functions (Easing) */ --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); /* Custom Easing */ --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-glow: cubic-bezier(0.33, 1, 0.68, 1); /* Durations */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --duration-glacial: 1000ms; /* Transition Properties */ --transition-base: all var(--duration-normal) var(--ease-in-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-glow: box-shadow var(--duration-slow) var(--ease-glow), text-shadow var(--duration-slow) var(--ease-glow); --transition-transform: transform var(--duration-normal) var(--ease-smooth); --transition-opacity: opacity var(--duration-normal) var(--ease-in-out); --transition-colors: background-color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out); /* ======================================== OPACITY LEVELS ======================================== */ --opacity-0: 0; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; /* ======================================== SHADOWS - Depth System ======================================== */ /* Standard Shadows */ --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 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 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.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Glassmorphism Shadows with Glow */ --shadow-glass-sm: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 213, 0.1); --shadow-glass-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 213, 0.15); --shadow-glass-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 213, 0.2); /* ======================================== BREAKPOINTS (for reference in JS) ======================================== */ --breakpoint-xs: 375px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ======================================== DARK MODE ADJUSTMENTS (if needed) ======================================== */ @media (prefers-color-scheme: dark) { :root { /* Already dark by default, but can adjust if needed */ } } /* ======================================== REDUCED MOTION PREFERENCES ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-glacial: 0ms; } }