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

@layer base {
  :root {
    /* Claude Code inspired dark theme */
    --background: 0 0% 6%;           /* #0f0f0f - Deep charcoal */
    --foreground: 0 0% 98%;          /* #fafafa - Bright white */
    
    --card: 0 0% 10%;                /* #1a1a1a - Dark card background */
    --card-foreground: 0 0% 98%;     /* #fafafa */
    
    --popover: 0 0% 10%;             /* #1a1a1a */
    --popover-foreground: 0 0% 98%;  /* #fafafa */
    
    --primary: 22 78% 55%;           /* #e85d3b - Warm orange accent */
    --primary-foreground: 0 0% 98%;  /* #fafafa */
    
    --secondary: 0 0% 16%;           /* #292929 - Subtle gray */
    --secondary-foreground: 0 0% 98%; /* #fafafa */
    
    --muted: 0 0% 16%;               /* #292929 */
    --muted-foreground: 0 0% 64%;    /* #a3a3a3 - Muted text */
    
    --accent: 22 78% 55%;            /* #e85d3b - Same as primary */
    --accent-foreground: 0 0% 98%;   /* #fafafa */
    
    --destructive: 0 84.2% 60.2%;    /* #ef4444 */
    --destructive-foreground: 0 0% 98%; /* #fafafa */
    
    --border: 0 0% 16%;              /* #292929 - Subtle borders */
    --input: 0 0% 16%;               /* #292929 */
    --ring: 22 78% 55%;              /* #e85d3b - Focus ring matches accent */
    
    --radius: 0.75rem;               /* Slightly larger radius */
  }

  /* Remove light mode - Claude Code is dark only */
  .dark {
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 10%;
    --popover-foreground: 0 0% 98%;
    --primary: 22 78% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 16%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 64%;
    --accent: 22 78% 55%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 16%;
    --input: 0 0% 16%;
    --ring: 22 78% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Typography improvements */
  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight;
  }
  
  /* Custom gradients */
  .gradient-radial {
    background: radial-gradient(ellipse at center, rgba(232, 93, 59, 0.15) 0%, transparent 70%);
  }
  
  .gradient-border {
    background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.8));
  }
  
  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-300;
    background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--card)));
  }
  
  .card-hover:hover {
    background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--card) / 0.8));
    box-shadow: 0 0 30px rgba(232, 93, 59, 0.1);
  }
  
  /* Button gradients */
  .btn-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    transition: all 0.3s ease;
  }
  
  .btn-gradient:hover {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(var(--primary) / 0.7));
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(232, 93, 59, 0.3);
  }
  
  /* Glow effects */
  .glow-primary {
    box-shadow: 0 0 20px rgba(232, 93, 59, 0.5);
  }
  
  /* Animation keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes wiggle {
    0%, 100% {
      transform: rotate(8deg);
    }
    25% {
      transform: rotate(-2deg);
    }
    50% {
      transform: rotate(6deg);
    }
    75% {
      transform: rotate(-1deg);
    }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }
  
  .animate-slide-in {
    animation: slideIn 0.5s ease-out;
  }
  
  .animate-wiggle {
    animation: wiggle 4s ease-in-out infinite;
  }
  
  /* Force dark mode */
  html {
    color-scheme: dark;
  }
}

/* Custom utilities */
@layer utilities {
  .text-gradient {
    background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}