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

body {
  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 210 40% 98%; /* Lighter, cleaner background */
    --foreground: 222 47% 11%; /* Dark blue for strong contrast */

    --card: 0 0% 100%; /* Pure White */
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 220 70% 50%; /* Vibrant, professional Blue */
    --primary-foreground: 0 0% 100%; /* White */

    --secondary: 210 40% 93%; /* Softer gray for secondary elements */
    --secondary-foreground: 222 30% 25%;

    --muted: 210 40% 90%; /* Muted gray */
    --muted-foreground: 210 30% 50%;

    --accent: 260 80% 60%; /* Rich Purple for accents */
    --accent-foreground: 0 0% 100%; /* White */

    --destructive: 0 75% 55%; /* Clear Red for destructive actions */
    --destructive-foreground: 0 0% 100%;

    --border: 210 30% 85%;
    --input: 210 30% 95%;
    --ring: 220 70% 55%; /* Primary blue for rings */

    --radius: 0.75rem; /* Slightly larger radius for a softer look */

    /* Chart colors */
    --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-background: 220 30% 97%; 
    --sidebar-foreground: 220 18% 12%;
    --sidebar-primary: 225 75% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 250 70% 65%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 25% 90%;
    --sidebar-ring: 225 75% 65%;
  }

  .dark {
    --background: 222 47% 8%; /* Very dark blue for background */
    --foreground: 210 40% 96%; /* Light gray/off-white for text */

    --card: 222 40% 12%; /* Darker card for depth */
    --card-foreground: 210 40% 96%;

    --popover: 222 40% 10%;
    --popover-foreground: 210 40% 96%;

    --primary: 220 70% 65%; /* Lighter, vibrant Blue for dark mode */
    --primary-foreground: 222 47% 11%; /* Dark text on light primary */

    --secondary: 222 30% 18%; /* Darker secondary */
    --secondary-foreground: 210 30% 85%;

    --muted: 222 25% 22%;
    --muted-foreground: 210 25% 70%;

    --accent: 260 70% 70%; /* Lighter Purple for dark mode */
    --accent-foreground: 0 0% 98%;

    --destructive: 0 65% 60%; /* Adjusted red for dark */
    --destructive-foreground: 0 0% 98%;

    --border: 222 25% 28%;
    --input: 222 25% 20%;
    --ring: 220 70% 65%;

    /* Chart colors for dark theme */
    --chart-1: 220 70% 60%;
    --chart-2: 160 60% 55%;
    --chart-3: 30 80% 65%;
    --chart-4: 280 65% 70%;
    --chart-5: 340 75% 65%;

    --sidebar-background: 222 40% 12%;
    --sidebar-foreground: 210 40% 96%;
    --sidebar-primary: 220 70% 65%;
    --sidebar-primary-foreground: 222 47% 11%;
    --sidebar-accent: 260 70% 70%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 222 25% 28%;
    --sidebar-ring: 220 70% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex-grow: 1;
  }
}