src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Inter', sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 100%; /* White */
    --foreground: 220 10% 10%; /* Very dark gray/near black */
    --card: 0 0% 97%; /* Very light gray, almost white */
    --card-foreground: 220 10% 10%;
    --popover: 0 0% 97%;
    --popover-foreground: 220 10% 10%;
    --primary: 217 91% 55%; /* Vibrant Blue (slightly darker for light theme) */
    --primary-foreground: 0 0% 100%; /* White */
    --secondary: 258 90% 60%; /* Vibrant Purple (slightly darker for light theme) */
    --secondary-foreground: 0 0% 100%; /* White */
    --muted: 220 15% 94%; /* Light gray */
    --muted-foreground: 220 10% 45%; /* Mid gray */
    --accent: 75 80% 45%; /* Vibrant Green (slightly darker/desaturated for light theme) */
    --accent-foreground: 0 0% 100%; /* White */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 15% 88%; /* Light gray border */
    --input: 220 15% 92%; /* Light gray input background */
    --ring: 217 91% 55%; /* Primary blue for focus rings */
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem; /* Standard radius */

    /* Sidebar variables for light theme */
    --sidebar-background: 0 0% 96%; /* Slightly off-white */
    --sidebar-foreground: 220 10% 20%; /* Dark gray */
    --sidebar-primary: 217 91% 50%; /* Primary blue, slightly darker for sidebar */
    --sidebar-primary-foreground: 0 0% 100%; /* White */
    --sidebar-accent: 220 15% 90%; /* Lighter gray for hover/accent */
    --sidebar-accent-foreground: 220 10% 15%; /* Darker text for accent */
    --sidebar-border: 220 15% 85%; /* Light border */
    --sidebar-ring: 217 91% 55%;
  }

  .dark {
    --background: 220 7% 8%; /* Vite's #161618 - Very dark blue/gray */
    --foreground: 240 8% 94%; /* Vite's #EFEFF0 - Light gray/white */
    --card: 225 6% 13%; /* Vite's #202123 - Slightly lighter dark blue/gray */
    --card-foreground: 240 8% 94%;
    --popover: 225 6% 13%;
    --popover-foreground: 240 8% 94%;
    --primary: 217 91% 60%; /* Vite's blue #3B82F6 */
    --primary-foreground: 210 100% 97%; /* Very light color for contrast */
    --secondary: 258 90% 66%; /* Vite's purple #8B5CF6 */
    --secondary-foreground: 260 100% 97%; /* Very light for contrast */
    --muted: 240 3% 18%; /* Slightly lighter than card for muted elements */
    --muted-foreground: 240 5% 65%; /* A dimmer text color */
    --accent: 75 94% 57%; /* Vite's green #74C042 */
    --accent-foreground: 75 100% 10%; /* Dark green for text on accent */
    --destructive: 0 70% 50%; /* Adjusted red for dark theme */
    --destructive-foreground: 0 0% 95%;
    --border: 240 3% 23%; /* Vite's #3A3A3C */
    --input: 225 6% 18%; /* Slightly lighter than card, for input fields */
    --ring: 217 91% 60%; /* Primary blue for focus rings */
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    /* Sidebar variables for dark theme */
    --sidebar-background: 225 6% 13%; /* Same as card */
    --sidebar-foreground: 240 8% 94%; /* Same as foreground */
    --sidebar-primary: 217 91% 60%; /* Primary blue */
    --sidebar-primary-foreground: 210 100% 97%;
    --sidebar-accent: 225 6% 18%; /* Slightly lighter than sidebar-background for hover */
    --sidebar-accent-foreground: 240 8% 94%;
    --sidebar-border: 240 3% 23%; /* Same as border */
    --sidebar-ring: 217 91% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}