:root {
    --background: 0 0% 96%;
    --foreground: 192 12% 20%;

    --card: 0 0% 100%;
    --card-foreground: 192 12% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 192 12% 20%;

    --primary: 250 76% 64%;
    --primary-foreground: 0 0% 100%;

    --secondary: 178 100% 40%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 96%;
    --muted-foreground: 200 7% 42%;

    --accent: 244 98% 80%;
    --accent-foreground: 250 62% 56%;

    --destructive: 10 82% 51%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 250 76% 64%;

    --radius: 0.75rem;

    --sidebar-background: 250 62% 56%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 178 100% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 250 76% 64%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 250 62% 50%;
    --sidebar-ring: 178 100% 40%;

    --success: 108 62% 52%;
    --success-foreground: 0 0% 100%;
    --warning: 44 100% 50%;
    --warning-foreground: 192 12% 20%;
    --info: 178 100% 40%;
    --info-foreground: 0 0% 100%;

    --gradient-primary: linear-gradient(135deg, hsl(250 76% 64%) 0%, hsl(178 100% 40%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
    --shadow-card: 0 2px 8px -2px hsl(250 76% 64% / 0.1);
    --shadow-hover: 0 8px 24px -4px hsl(250 76% 64% / 0.15);
}

.dark {
    --background: 192 12% 20%;
    --foreground: 0 0% 96%;

    --card: 192 12% 25%;
    --card-foreground: 0 0% 96%;

    --popover: 192 12% 25%;
    --popover-foreground: 0 0% 96%;

    --primary: 250 76% 64%;
    --primary-foreground: 0 0% 100%;

    --secondary: 178 100% 40%;
    --secondary-foreground: 0 0% 100%;

    --muted: 192 12% 25%;
    --muted-foreground: 200 7% 65%;

    --accent: 250 62% 56%;
    --accent-foreground: 244 98% 80%;

    --destructive: 10 82% 51%;
    --destructive-foreground: 0 0% 96%;

    --border: 192 12% 30%;
    --input: 192 12% 30%;
    --ring: 250 76% 64%;

    --sidebar-background: 250 62% 56%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 178 100% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 250 76% 64%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 250 62% 50%;
    --sidebar-ring: 178 100% 40%;

    --gradient-primary: linear-gradient(135deg, hsl(250 76% 64%) 0%, hsl(178 100% 40%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(192 12% 25%) 0%, hsl(192 12% 28%) 100%);
    --shadow-card: 0 2px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-hover: 0 8px 24px -4px hsl(250 76% 64% / 0.25);
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

/* Utility classes to mimic Tailwind config extensions if needed */
.bg-primary {
    background-color: hsl(var(--primary));
}

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

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

/* Add more as needed during development */