/* ============================================ LIQUID GLASS & AI CINEMA - CSS Variables Premium Dark Theme Design System ============================================ */ :root { /* ======================================== BACKGROUNDS ======================================== */ --bg-deep: #050505; --bg-dark: #0A0B10; --bg-medium: #0D0E15; --bg-gradient: linear-gradient(135deg, #050505 0%, #0A0B10 50%, #0D0E15 100%); --bg-radial: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%); /* ======================================== ACCENT COLORS (with RGB for alpha usage) ======================================== */ /* Electric Blue */ --color-blue: #00D4FF; --color-blue-rgb: 0, 212, 255; /* Neon Purple */ --color-purple: #A855F7; --color-purple-rgb: 168, 85, 247; /* Soft Teal */ --color-teal: #14F195; --color-teal-rgb: 20, 241, 149; /* Warm Glow */ --color-warm: #FF6B6B; --color-warm-rgb: 255, 107, 107; /* ======================================== GLASS EFFECTS ======================================== */ --glass-bg: rgba(255, 255, 255, 0.03); --glass-bg-hover: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-hover: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.1); --glass-blur: 24px; --glass-blur-light: 16px; --glass-blur-heavy: 40px; /* ======================================== TEXT COLORS ======================================== */ --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); --text-dim: rgba(255, 255, 255, 0.3); /* ======================================== TYPOGRAPHY ======================================== */ --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* Fluid Typography Scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem); --text-5xl: clamp(3rem, 2rem + 5vw, 5rem); --text-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 6rem); /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ======================================== SPACING SCALE ======================================== */ --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 */ /* ======================================== BORDER RADIUS ======================================== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ======================================== SHADOWS ======================================== */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); /* Glass Shadows (3D effect) */ --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2); /* Glow Shadows */ --glow-blue: 0 0 20px rgba(var(--color-blue-rgb), 0.3), 0 0 40px rgba(var(--color-blue-rgb), 0.15); --glow-purple: 0 0 20px rgba(var(--color-purple-rgb), 0.3), 0 0 40px rgba(var(--color-purple-rgb), 0.15); --glow-teal: 0 0 20px rgba(var(--color-teal-rgb), 0.3), 0 0 40px rgba(var(--color-teal-rgb), 0.15); /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-slower: 600ms ease; /* Cubic Beziers */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================== Z-INDEX SCALE ======================================== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; /* ======================================== LAYOUT ======================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 80px; --header-height-mobile: 64px; /* ======================================== GRADIENTS ======================================== */ --gradient-primary: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%); --gradient-secondary: linear-gradient(135deg, var(--color-purple) 0%, var(--color-warm) 100%); --gradient-accent: linear-gradient(135deg, var(--color-teal) 0%, var(--color-blue) 100%); /* Chromatic Aberration Gradient */ --gradient-chromatic: linear-gradient(135deg, rgba(var(--color-blue-rgb), 0.3) 0%, transparent 30%, transparent 70%, rgba(var(--color-purple-rgb), 0.3) 100% ); } /* Dark scrollbar styling */ :root { color-scheme: dark; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; scrollbar-width: thin; }