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

@layer base {
  :root {
    --background: 220 13% 96%; /* Light Gray #F0F2F5 */
    --foreground: 220 13% 10%;

    --card: 0 0% 100%;
    --card-foreground: 220 13% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 13% 10%;

    --primary: 231 48% 54%; /* Deep Blue #3F51B5 */
    --primary-foreground: 0 0% 100%;

    --secondary: 220 13% 91%;
    --secondary-foreground: 220 13% 20%;

    --muted: 220 13% 91%;
    --muted-foreground: 220 13% 40%;

    --accent: 261 44% 63%; /* Soft Violet #9575CD */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 88%;
    --input: 220 13% 88%;
    --ring: 231 48% 54%;

    --chart-1: 231 48% 54%;
    --chart-2: 261 44% 63%;
    --chart-3: 220 13% 50%;
    --chart-4: 30 90% 55%;
    --chart-5: 150 50% 50%;

    --radius: 0.5rem;
  }
 
  .dark {
    --background: 240 10% 4%;
    --foreground: 210 40% 98%;

    --card: 240 5% 10%;
    --card-foreground: 210 40% 98%;
    --popover: 240 10% 4%;
    --popover-foreground: 210 40% 98%;

    --primary: 231 48% 64%;
    --primary-foreground: 231 48% 10%;

    --secondary: 240 4% 16%;
    --secondary-foreground: 210 40% 98%;

    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;

    --accent: 261 44% 73%;
    --accent-foreground: 261 44% 15%;
    
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 231 48% 64%;

    --chart-1: 231 48% 64%;
    --chart-2: 261 44% 73%;
    --chart-3: 220 13% 70%;
    --chart-4: 30 90% 65%;
    --chart-5: 150 50% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    transition-property: background-color, color;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
}