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

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

@layer base {
  :root {
    --background: 0 0% 100%; /* White */
    --foreground: 0 0% 13%; /* Near Black */

    --card: 0 0% 100%; /* White */
    --card-foreground: 0 0% 13%; /* Near Black */

    --popover: 0 0% 100%; /* White */
    --popover-foreground: 0 0% 13%; /* Near Black */

    --primary: 0 0% 13%; /* Near Black */
    --primary-foreground: 0 0% 98%; /* Off-white/White */

    --secondary: 0 0% 96%; /* Very light grey */
    --secondary-foreground: 0 0% 20%; /* Dark grey */

    --muted: 0 0% 90%; /* Light grey */
    --muted-foreground: 0 0% 45%; /* Medium grey */

    --accent: 0 0% 92%; /* Lighter grey for subtle accents - slightly more contrast */
    --accent-foreground: 0 0% 13%; /* Near black for accent text */

    --destructive: 0 84.2% 60.2%; /* Standard red */
    --destructive-foreground: 0 0% 98%; /* Off-white/White */

    --border: 0 0% 88%; /* Light grey border */
    --input: 0 0% 88%; /* Matching input border */
    --ring: 0 0% 13%; /* Primary color for focus rings (Near Black) */

    --radius: 0.5rem;

    /* Chart colors for a monochrome theme */
    --chart-1: 0 0% 30%;
    --chart-2: 0 0% 50%;
    --chart-3: 0 0% 70%;
    --chart-4: 0 0% 40%;
    --chart-5: 0 0% 60%;

    /* Sidebar specific theme variables */
    --sidebar-background: 0 0% 98%; /* Very light grey, slightly off-white */
    --sidebar-foreground: 0 0% 13%; /* Near Black */
    --sidebar-primary: 0 0% 13%; /* Near Black for active item text */
    --sidebar-primary-foreground: 0 0% 98%; /* White for text on active primary bg */
    --sidebar-accent: 0 0% 90%; /* Light grey for active/hover background */
    --sidebar-accent-foreground: 0 0% 13%; /* Near Black for text on accent */
    --sidebar-border: 0 0% 88%; /* Light grey border */
    --sidebar-ring: 0 0% 13%; /* Near Black */
  }

  .dark {
    --background: 0 0% 10%; /* Near Black */
    --foreground: 0 0% 95%; /* Off-white */

    --card: 0 0% 13%; /* Dark grey */
    --card-foreground: 0 0% 95%; /* Off-white */

    --popover: 0 0% 13%; /* Dark grey */
    --popover-foreground: 0 0% 95%; /* Off-white */

    --primary: 0 0% 95%; /* Off-white for primary actions in dark mode */
    --primary-foreground: 0 0% 10%; /* Near black for text on primary */

    --secondary: 0 0% 20%; /* Medium-dark grey */
    --secondary-foreground: 0 0% 85%; /* Light grey */

    --muted: 0 0% 25%; /* Darker muted */
    --muted-foreground: 0 0% 65%; /* Medium grey */

    --accent: 0 0% 18%; /* Darker grey for accents - slightly more contrast */
    --accent-foreground: 0 0% 95%; /* Off-white */

    --destructive: 0 62.8% 30.6%; /* Darker red for dark mode */
    --destructive-foreground: 0 0% 98%; /* Off-white/White */

    --border: 0 0% 20%; /* Darker border */
    --input: 0 0% 20%; /* Darker input border */
    --ring: 0 0% 95%; /* Lighter primary for focus rings */

    /* Chart colors - can be adjusted for dark mode if needed */
    --chart-1: 0 0% 70%;
    --chart-2: 0 0% 50%;
    --chart-3: 0 0% 30%;
    --chart-4: 0 0% 60%;
    --chart-5: 0 0% 40%;

    /* Sidebar specific theme variables for dark mode */
    --sidebar-background: 0 0% 13%; /* Dark grey */
    --sidebar-foreground: 0 0% 95%; /* Off-white */
    --sidebar-primary: 0 0% 95%; /* Off-white */
    --sidebar-primary-foreground: 0 0% 10%; /* Near black */
    --sidebar-accent: 0 0% 20%; /* Darker grey for active/hover */
    --sidebar-accent-foreground: 0 0% 95%; /* Off-white */
    --sidebar-border: 0 0% 25%; /* Darker border */
    --sidebar-ring: 0 0% 95%; /* Off-white */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  /* Removed bg-background from body - it's now on a wrapper in layout.tsx */
  body {
    @apply text-foreground;
    position: relative; /* For positioning the animated background container */
  }

  /* Minimalist Abstract Background Animation Container */
  .animated-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind all content */
    overflow: hidden; /* Prevent scrollbars if shapes go out of bounds */
    pointer-events: none; /* Ensure it doesn't interfere with interactions */
  }

  .animated-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: hsl(var(--foreground));
    border-radius: 50%;
    opacity: 0; /* Start invisible */
    animation-name: fadeInOutPulse;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }

  @keyframes fadeInOutPulse {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    25% {
      opacity: 0.4; /* Adjusted opacity for better subtlety */
      transform: scale(1);
    }
    .dark & { /* Dark mode specific opacity */
      25% {
        opacity: 0.6;
      }
    }
    75% {
      opacity: 0.4; /* Adjusted opacity for better subtlety */
      transform: scale(1);
    }
    .dark & { /* Dark mode specific opacity */
      75% {
        opacity: 0.6;
      }
    }
    100% {
      opacity: 0;
      transform: scale(0.5);
    }
  }
}


/* Custom keyframes for wave-dot loader */
@keyframes wave-dot-animation {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  30% {
    transform: scale(1.4);
    opacity: 1;
  }
}

.animate-wave-dot-1 {
  animation: wave-dot-animation 1.3s infinite ease-in-out;
  animation-delay: 0s;
}
.animate-wave-dot-2 {
  animation: wave-dot-animation 1.3s infinite ease-in-out;
  animation-delay: 0.2s;
}
.animate-wave-dot-3 {
  animation: wave-dot-animation 1.3s infinite ease-in-out;
  animation-delay: 0.4s;
}