/* Add any extra global styles here */

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

/* Theme CSS Variables */
:root {
  --color-primary: #16a34a;
  --color-primary-light: #22c55e;
  --color-primary-dark: #15803d;
  --color-neutral: #525252;
  --color-neutral-light: #a3a3a3;
  --color-neutral-dark: #262626;
  --color-background: #ffffff;
  --color-background-secondary: #f9fafb;
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}

/* Dark theme variables */
.theme-dark {
  --color-background: #111827;
  --color-background-secondary: #1f2937;
  --color-text: #ffffff;
  --color-text-secondary: #d1d5db;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-text);
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@keyframes soundwave {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Custom utility classes */
@layer utilities {
  .text-brand-primary {
    color: var(--color-primary);
  }
  
  .bg-brand-primary {
    background-color: var(--color-primary);
  }
  
  .border-brand-primary {
    border-color: var(--color-primary);
  }
  
  .hover\:bg-brand-primary:hover {
    background-color: var(--color-primary-dark);
  }
}