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

@layer base {
  :root {
    --background: 180 30% 98%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 171 77% 35%; /* Teal/Emerald */
    --primary-foreground: 210 40% 98%;
    --secondary: 180 15% 90%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 180 15% 90%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 171 77% 35%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 180 15% 85%;
    --input: 180 15% 85%;
    --ring: 171 77% 35%;
    --radius: 1rem; /* 16px border radius for glassmorphism */
  }

  .dark {
    --background: 222 47% 7%;
    --foreground: 210 40% 98%;
    --card: 222 47% 9%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 9%;
    --popover-foreground: 210 40% 98%;
    --primary: 171 77% 45%; /* Vibrant Teal */
    --primary-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 171 77% 45%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
    /* Soft mesh gradient background */
    background-image: 
      radial-gradient(at 0% 0%, hsla(171, 77%, 35%, 0.15) 0px, transparent 50%),
      radial-gradient(at 100% 0%, hsla(222, 47%, 50%, 0.15) 0px, transparent 50%),
      radial-gradient(at 100% 100%, hsla(280, 50%, 50%, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
  }
  .dark body {
    background-image: 
      radial-gradient(at 0% 0%, hsla(171, 77%, 45%, 0.15) 0px, transparent 50%),
      radial-gradient(at 100% 0%, hsla(222, 47%, 50%, 0.15) 0px, transparent 50%),
      radial-gradient(at 100% 100%, hsla(280, 50%, 50%, 0.15) 0px, transparent 50%);
  }
}

/* Glassmorphism utility classes */
@layer utilities {
  .glass-panel {
    @apply bg-background/60 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-lg;
  }
  .glass-card {
    @apply bg-card/60 backdrop-blur-md border border-white/20 dark:border-white/10 shadow-sm hover:shadow-md transition-shadow;
  }
  
  /* Custom thin scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-primary/50;
  }
}