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

@layer base {
  :root {
    /* Light Mode Colors - Based on PLAN.md */
    --background: 0 0% 100%; /* #FFFFFF */
    --foreground: 0 0% 9%; /* #171717 */

    --card: 210 20% 98%; /* #F9FAFB */
    --card-foreground: 0 0% 9%; /* #171717 */

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;

    /* Primary: #3B82F6 (Blue-500) */
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 0 0% 9%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%; /* #6B7280 */

    --accent: 210 40% 96%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 91%; /* #E5E7EB */
    --input: 220 13% 91%;
    --ring: 217 91% 60%;

    --radius: 0.5rem;

    /* Sidebar colors for light mode */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 40% 96%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217 91% 60%;
  }

  .dark {
    /* Dark Mode Colors - Based on PLAN.md */
    --background: 240 10% 4%; /* #0A0A0F */
    --foreground: 0 0% 98%; /* #FAFAFA */

    --card: 240 6% 10%; /* #141419 */
    --card-foreground: 0 0% 98%;

    --popover: 240 6% 10%;
    --popover-foreground: 0 0% 98%;

    /* Primary: #3B82F6 (Blue-500) */
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 240 4% 16%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%; /* #A1A1AA */

    --accent: 240 4% 16%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 4% 16%; /* #27272A */
    --input: 240 4% 16%;
    --ring: 217 91% 60%;

    /* Sidebar colors for dark mode */
    --sidebar-background: 240 6% 10%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 4% 16%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 4% 16%;
    --sidebar-ring: 217 91% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Remove default focus styles and add custom ones */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/20 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/30;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-in {
    animation: animate-in 0.2s ease-out;
  }

  .animate-out {
    animation: animate-out 0.2s ease-in;
  }

  @keyframes animate-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes animate-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  /* Sidebar width utilities */
  .sidebar-expanded {
    width: 240px;
  }

  .sidebar-collapsed {
    width: 64px;
  }

  /* Content area margin utilities */
  .content-with-sidebar-expanded {
    margin-left: 240px;
  }

  .content-with-sidebar-collapsed {
    margin-left: 64px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
