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

/* DetectPack Forge Design System - Dark Mode First */

@layer base {
  :root {
    /* Dark mode first - Light theme */
    --background: 220 13% 9%;
    --foreground: 220 9% 96%;

    --surface: 220 13% 11%;
    --surface-hover: 220 13% 13%;
    
    --card: 220 13% 11%;
    --card-foreground: 220 9% 96%;
    --card-border: 220 13% 15%;

    --popover: 220 13% 11%;
    --popover-foreground: 220 9% 96%;

    /* Emerald primary */
    --primary: 160 84% 39%;
    --primary-foreground: 220 13% 9%;
    --primary-hover: 160 84% 44%;
    --primary-subtle: 160 84% 39% / 0.1;

    /* Neutral secondary */
    --secondary: 220 13% 15%;
    --secondary-foreground: 220 9% 88%;
    --secondary-hover: 220 13% 18%;

    --muted: 220 13% 15%;
    --muted-foreground: 220 9% 65%;

    --accent: 220 13% 15%;
    --accent-foreground: 220 9% 88%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 220 9% 96%;

    --warning: 38 92% 50%;
    --warning-foreground: 220 13% 9%;
    --warning-bg: 38 92% 15%;
    --warning-border: 38 92% 25%;

    --border: 220 13% 15%;
    --input: 220 13% 15%;
    --input-border: 220 13% 20%;
    --ring: 160 84% 39%;

    --radius: 0.75rem;

    /* Code colors */
    --code-bg: 220 13% 8%;
    --code-border: 220 13% 17%;
    
    /* Semantic colors */
    --success: 160 84% 39%;
    --info: 200 95% 60%;
    
    /* Skeleton shimmer */
    --shimmer-start: 220 13% 11%;
    --shimmer-mid: 220 13% 15%;
    --shimmer-end: 220 13% 11%;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 0 1px hsl(var(--primary) / 0.2), 0 0 20px hsl(var(--primary) / 0.1);

    /* Animation */
    --transition-fast: 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .light {
    --background: 0 0% 100%;
    --foreground: 220 13% 9%;

    --surface: 0 0% 98%;
    --surface-hover: 220 13% 96%;
    
    --card: 0 0% 100%;
    --card-foreground: 220 13% 9%;
    --card-border: 220 13% 91%;

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

    --primary: 160 84% 39%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 160 84% 34%;
    --primary-subtle: 160 84% 39% / 0.1;

    --secondary: 220 13% 96%;
    --secondary-foreground: 220 13% 9%;
    --secondary-hover: 220 13% 91%;

    --muted: 220 13% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 220 13% 96%;
    --accent-foreground: 220 13% 9%;

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

    --border: 220 13% 91%;
    --input: 220 13% 96%;
    --input-border: 220 13% 85%;
    --ring: 160 84% 39%;

    --code-bg: 220 13% 98%;
    --code-border: 220 13% 91%;

    --shimmer-start: 220 13% 96%;
    --shimmer-mid: 220 13% 91%;
    --shimmer-end: 220 13% 96%;
  }
}

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

  html {
    color-scheme: dark;
  }
  
  html.dark {
    color-scheme: dark;
  }

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

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

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

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

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

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Code blocks */
  pre {
    @apply bg-code-bg border border-code-border rounded-xl p-4 overflow-x-auto;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Menlo, 'Liberation Mono', 'Courier New', monospace;
  }

  code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Menlo, 'Liberation Mono', 'Courier New', monospace;
  }

  /* Focus styles */
  .focus-ring {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }
}

@layer components {
  /* Shimmer animation for loading */
  .skeleton {
    background: linear-gradient(90deg, hsl(var(--shimmer-start)) 25%, hsl(var(--shimmer-mid)) 37%, hsl(var(--shimmer-start)) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease infinite;
  }

  @keyframes shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  /* Gentle hover effects */
  .hover-lift {
    @apply transition-all duration-200 hover:scale-[1.02] hover:shadow-md;
  }

  .hover-glow {
    @apply transition-all duration-200 hover:shadow-glow;
  }

  /* Status indicators */
  .status-dot {
    @apply w-2 h-2 rounded-full;
  }

  .status-online {
    @apply bg-success;
  }

  .status-warning {
    @apply bg-warning;
  }

  .status-error {
    @apply bg-destructive;
  }
}