@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    /* Primary Colors */
    --color-lime-primary: #a3e635; /* lime-400 */
    --color-lime-secondary: #bef264; /* lime-300 */
    --color-lime-tertiary: #d9f99d; /* lime-200 */
    
    /* Neutral Colors */
    --color-cosmic-black: #09090b; /* zinc-950 */
    --color-cosmic-dark: #18181b; /* zinc-900 */
    --color-cosmic-gray: #27272a; /* zinc-800 */
    --color-cosmic-light: #3f3f46; /* zinc-700 */
    --color-text-primary: #ffffff; /* white */
    --color-text-secondary: #d4d4d8; /* zinc-300 */
    --color-text-tertiary: #a1a1aa; /* zinc-400 */
    
    /* Semantic Colors */
    --color-success: #10b981; /* emerald-500 */
    --color-warning: #f59e0b; /* amber-500 */
    --color-error: #f43f5e; /* rose-500 */
    --color-info: #0ea5e9; /* sky-500 */
    --color-glow-lime: #a3e63533; /* lime-400 with 20% opacity */
    --color-glow-cosmic: #27272a80; /* zinc-800 with 50% opacity */
  }

  body {
    @apply bg-cosmic-black text-text-primary font-inter;
  }
}

@layer components {
  /* Button Styles */
  .btn-primary {
    @apply bg-lime-primary text-cosmic-black font-medium px-4 py-2 rounded-md shadow-md shadow-lime-primary/20 hover:shadow-lime-primary/30 transition-all duration-300;
  }
  
  .btn-secondary {
    @apply bg-transparent border border-lime-primary text-lime-primary font-medium px-4 py-2 rounded-md shadow-md shadow-lime-primary/10 hover:shadow-lime-primary/20 transition-all duration-300;
  }
  
  .btn-ghost {
    @apply text-lime-primary hover:bg-lime-primary/10 font-medium px-4 py-2 rounded-md transition-all duration-300;
  }
  
  /* Card Styles */
  .card {
    @apply bg-cosmic-dark rounded-xl p-6 shadow-lg shadow-cosmic-gray/50;
  }
  
  .card-interactive {
    @apply bg-cosmic-dark rounded-xl p-6 shadow-lg shadow-cosmic-gray/50 hover:shadow-lime-primary/20 transition-all duration-300 cursor-pointer;
  }
  
  /* Input Styles */
  .input {
    @apply bg-cosmic-gray border-cosmic-light text-text-primary rounded-md px-4 py-2 focus:ring-2 focus:ring-lime-primary/50 focus:border-lime-primary outline-none transition-all duration-300;
  }
  
  /* Typography Styles */
  .display {
    @apply text-5xl font-semibold tracking-tight;
  }
  
  .heading-1 {
    @apply text-4xl font-semibold tracking-tight;
  }
  
  .heading-2 {
    @apply text-3xl font-medium tracking-tight;
  }
  
  .heading-3 {
    @apply text-2xl font-medium tracking-tight;
  }
  
  .heading-4 {
    @apply text-xl font-medium tracking-tight;
  }
  
  .body-large {
    @apply text-lg font-normal tracking-tight;
  }
  
  .body {
    @apply text-base font-normal tracking-tight;
  }
  
  .body-small {
    @apply text-sm font-normal tracking-tight;
  }
  
  .label {
    @apply text-xs font-medium tracking-tight;
  }
}