:root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --primary: 220 90% 50%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220 9.1% 43.1%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --border: 220 13% 91%;
}

html.dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --primary: 210 90% 55%;
    --primary-foreground: 224 71.4% 4.1%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --border: 215 27.9% 16.9%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.3s, color 0.3s;
}

.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.hover\:bg-secondary:hover { background-color: hsl(var(--secondary)); }
.hover\:text-primary:hover { color: hsl(var(--primary)); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 2px hsl(var(--primary)); }
.focus\:border-primary:focus { border-color: hsl(var(--primary)); }

.text-gradient {
    background-image: linear-gradient(to right, hsl(var(--primary)), #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glass-effect {
    background-color: hsla(var(--background), 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#navbar.glass-effect {
    border-bottom: 1px solid hsla(var(--border), 0.5);
}