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

:root {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32.6%, 17.5%);
  --input: hsl(217, 32.6%, 17.5%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(222, 47%, 11%);
  --secondary: hsl(217, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --accent: hsl(217, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(217, 91%, 60%);
  --radius: 0.75rem;
  
  /* Custom video app colors */
  --bunny-dark: hsl(222, 84%, 4.9%);
  --bunny-gray: hsl(217, 32.6%, 17.5%);
  --bunny-blue: hsl(217, 91%, 60%);
  --bunny-light: hsl(210, 40%, 98%);
  --bunny-muted: hsl(215, 20.2%, 65.1%);
}

.dark {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32.6%, 17.5%);
  --input: hsl(217, 32.6%, 17.5%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(222, 47%, 11%);
  --secondary: hsl(217, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --accent: hsl(217, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(217, 91%, 60%);
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    background-color: hsl(222, 84%, 4.9%);
    color: hsl(210, 40%, 98%);
  }
}

@layer utilities {
  .bunny-dark {
    background-color: hsl(222, 84%, 4.9%);
  }
  
  .bunny-gray {
    background-color: hsl(217, 32.6%, 17.5%);
  }
  
  .bunny-blue {
    background-color: hsl(217, 91%, 60%);
  }
  
  .bunny-light {
    color: hsl(210, 40%, 98%);
  }
  
  .bunny-muted {
    color: hsl(215, 20.2%, 65.1%);
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}