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

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

@layer base {
  /* Light mode defaults */
  :root {
    @apply bg-background text-foreground;
  }
  
  /* Dark mode overrides */
  .dark {
    @apply bg-background-dark text-foreground-dark;
  }
}

@layer utilities {
  /* Transition utilities for theme switching */
  .theme-transition {
    @apply transition-colors duration-200;
  }
  
  /* Card and container styles */
  .themed-card {
    @apply bg-muted/10 text-card-foreground dark:bg-muted-dark/10 dark:text-card-dark-foreground theme-transition;
  }
  
  /* Button styles */
  .themed-button-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 
           dark:bg-primary-dark dark:text-primary-dark-foreground dark:hover:bg-primary-dark/90
           theme-transition;
  }
  
  .themed-button-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/90
           dark:bg-secondary-dark dark:text-secondary-dark-foreground dark:hover:bg-secondary-dark/90
           theme-transition;
  }
}
