/* Custom CSS Variables for New Dark Design */
 :root {
     --bg-primary: 220 15% 8%;
     /* Deep Charcoal Blue */
     --bg-secondary: 220 10% 18%;
     /* Slightly lighter Charcoal for mobile menu */
     --text-light: 210 20% 95%;
     /* Soft Off-White */
     --text-muted: 210 10% 60%;
     /* Medium Gray */
     --accent-color-1: 30 90% 60%;
     /* Vibrant Orange/Gold */
     --accent-color-2: 200 80% 55%;
     /* Bright Cyan/Blue */
     --border-color: 220 5% 20%;
     /* Darker Gray Border */
     --card-bg: 220 10% 10%;
     /* Dark Card Background */
     --radius-lg: 1rem;
     --radius-xl: 1.5rem;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: hsl(var(--bg-primary));
     color: hsl(var(--text-light));
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /* Utility classes for new color palette (dark theme) */
 .bg-primary-dark {
     background-color: hsl(var(--bg-primary));
 }

 .bg-secondary-dark {
     background-color: hsl(var(--bg-secondary));
 }

 .text-light-gray {
     color: hsl(var(--text-light));
 }

 .text-muted-gray {
     color: hsl(var(--text-muted));
 }

 .bg-accent-1 {
     background-color: hsl(var(--accent-color-1));
 }

 .text-accent-1 {
     color: hsl(var(--accent-color-1));
 }

 .border-dark-gray {
     border-color: hsl(var(--border-color));
 }

 .bg-card-dark {
     background-color: hsl(var(--card-bg));
 }

 /* Gradient Text */
 .gradient-text-v3 {
     background: linear-gradient(90deg, hsl(var(--accent-color-1)), hsl(var(--accent-color-2)));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }