:root { /* AperoNight Premium Theme - Telecom Inspired */ /* Base Colors - Sophisticated Navy & Electric Accents */ --background: oklch(0.1200 0.0300 240); --foreground: oklch(0.9500 0.0100 240); --surface: oklch(0.1600 0.0400 240); --surface-elevated: oklch(0.2000 0.0500 240); /* Card & Dialog surfaces */ --card: oklch(0.9800 0.0100 240); --card-foreground: oklch(0.1500 0.0200 240); --popover: oklch(0.9800 0.0100 240); --popover-foreground: oklch(0.1500 0.0200 240); /* Primary - Premium Electric Blue */ --primary: oklch(0.5500 0.2400 220); --primary-foreground: oklch(0.9800 0.0100 220); --primary-hover: oklch(0.4800 0.2600 220); --primary-light: oklch(0.8500 0.1200 220); --primary-dark: oklch(0.3500 0.2800 220); /* Secondary - Sophisticated Slate */ --secondary: oklch(0.8800 0.0200 240); --secondary-foreground: oklch(0.2500 0.0300 240); --secondary-hover: oklch(0.8200 0.0300 240); /* Accent - Vibrant Cyan (Events Energy) */ --accent: oklch(0.6800 0.2600 200); --accent-foreground: oklch(0.9800 0.0100 200); --accent-light: oklch(0.8800 0.1400 200); --accent-dark: oklch(0.4500 0.3000 200); /* Success - Event Success Green */ --success: oklch(0.6200 0.2200 140); --success-foreground: oklch(0.9600 0.0200 140); --success-light: oklch(0.9200 0.1000 140); /* Warning - Premium Gold */ --warning: oklch(0.7500 0.2000 60); --warning-foreground: oklch(0.2000 0.0300 60); --warning-light: oklch(0.9400 0.1000 60); /* Error - Professional Red */ --destructive: oklch(0.5800 0.2400 20); --destructive-foreground: oklch(0.9700 0.0200 20); --destructive-light: oklch(0.9300 0.1200 20); /* Muted tones */ --muted: oklch(0.8800 0.0200 240); --muted-foreground: oklch(0.4800 0.0400 240); --muted-dark: oklch(0.7500 0.0300 240); /* Borders and inputs */ --border: oklch(0.8400 0.0300 240); --input: oklch(0.9600 0.0200 240); --input-border: oklch(0.8200 0.0400 240); --ring: oklch(0.5500 0.2400 220); /* Typography - Premium Event Platform */ --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing and layout */ --radius: 0.75rem; --spacing: 1rem; /* Premium shadow system */ --shadow-xs: 0 1px 3px 0 hsl(240 30% 8% / 0.08), 0 1px 2px -1px hsl(240 30% 8% / 0.06); --shadow-sm: 0 2px 6px -1px hsl(240 30% 8% / 0.10), 0 2px 4px -2px hsl(240 30% 8% / 0.08); --shadow: 0 4px 8px -2px hsl(240 30% 8% / 0.12), 0 2px 4px -2px hsl(240 30% 8% / 0.08); --shadow-md: 0 8px 16px -4px hsl(240 30% 8% / 0.14), 0 4px 6px -2px hsl(240 30% 8% / 0.10); --shadow-lg: 0 16px 24px -4px hsl(240 30% 8% / 0.16), 0 8px 8px -4px hsl(240 30% 8% / 0.08); --shadow-xl: 0 20px 32px -8px hsl(240 30% 8% / 0.20), 0 8px 16px -8px hsl(240 30% 8% / 0.12); --shadow-2xl: 0 32px 64px -12px hsl(240 30% 8% / 0.25); /* Electric/Glow shadows for premium effects */ --shadow-electric: 0 4px 16px -2px hsl(220 100% 70% / 0.20), 0 2px 8px -2px hsl(220 100% 70% / 0.15); --shadow-accent: 0 4px 16px -2px hsl(200 100% 70% / 0.25), 0 2px 8px -2px hsl(200 100% 70% / 0.20); /* Premium gradients */ --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); --gradient-background: linear-gradient(135deg, oklch(0.1200 0.0300 240) 0%, oklch(0.1000 0.0400 235) 25%, oklch(0.0800 0.0500 230) 50%, oklch(0.1000 0.0400 225) 75%, oklch(0.1200 0.0300 220) 100%); --gradient-card: linear-gradient(135deg, oklch(0.9900 0.0100 240) 0%, oklch(0.9700 0.0200 235) 100%); /* Tech pattern overlays */ --grid-color: oklch(0.3000 0.0500 240); --dot-color: oklch(0.2500 0.0600 220); --connection-color: oklch(0.4000 0.1200 210); /* Glass morphism for premium feel */ --glass-bg: oklch(0.9800 0.0100 240 / 0.80); --glass-border: oklch(0.8500 0.0300 240 / 0.30); --glass-backdrop: blur(16px) saturate(200%); /* Professional states */ --hover-lift: translateY(-2px); --hover-scale: scale(1.02); --focus-ring: 0 0 0 3px var(--ring); /* Event-specific colors */ --event-vip: oklch(0.6500 0.2500 45); --event-premium: oklch(0.5500 0.2200 280); --event-standard: oklch(0.6000 0.1800 160); --event-available: oklch(0.6200 0.2000 140); --event-limited: oklch(0.7200 0.2000 50); --event-sold-out: oklch(0.5500 0.2200 15); /* Radius variations */ --radius-xs: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 2px); --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 8px); --radius-2xl: calc(var(--radius) + 12px); --radius-full: 9999px; }