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

:root {
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-border: #e2e8f0;
  --color-accent: #10b981;
}

.theme-transition {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.theme-transition * {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@layer base {
  body {
    @apply bg-bg text-text antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-text;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}