:root {
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;
    --primary: 204 92% 32%;
    --primary-foreground: 0 0% 100%;
    --secondary: 204 50% 95%;
    --secondary-foreground: 204 92% 32%;
    --muted: 210 15% 94%;
    --muted-foreground: 215 15% 45%;
    --accent: 204 70% 90%;
    --accent-foreground: 204 92% 25%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 20% 88%;
    --input: 214 20% 88%;
    --ring: 204 92% 32%;
    --radius: .75rem;
    --hero-gradient: linear-gradient(135deg, hsl(204 92% 32%) 0%, hsl(204 80% 45%) 100%);
    --card-shadow: 0 4px 20px -4px hsl(204 92% 32% / .12);
    --card-shadow-hover: 0 12px 32px -8px hsl(204 92% 32% / .2);
    --feature-icon-bg: hsl(204 70% 95%);
    --contact-gradient: linear-gradient(135deg, hsl(204 92% 28%) 0%, hsl(204 85% 38%) 100%);
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --tw-border-opacity: 1;
}

.active {
    color: hsl(var(--primary)) !important;
    background-color: hsl(var(--accent)) !important;
}

.from-primary-foreground {
    --tw-gradient-from: hsl(var(--primary-foreground)) var(--tw-gradient-from-position);
    --tw-gradient-to: hsl(var(--primary-foreground) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary-foreground\/90 {
    --tw-gradient-to: hsl(var(--primary-foreground) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--primary-foreground) / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-primary-foreground\/70 {
    --tw-gradient-to: hsl(var(--primary-foreground) / 0.7) var(--tw-gradient-to-position);
}

li.active a {
    color: hsl(var(--primary-foreground));
    background-color: hsl(var(--primary));
}

li > a {
    color: hsl(var(--muted-foreground));
}

    li > a:hover {
        background-color: hsl(var(--muted));
        color: hsl(var(--foreground));
    }