@import "tailwindcss";
@import "./components/animation.css";
@import "./components/prose.css";
@plugin "@tailwindcss/typography";

@theme {
  /* Primary colors */
  --color-primary-500: #d33337;
  --color-primary-600: #c11923;
  --color-primary-700: #990013;
  
  /* Zinc palette for dark mode */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;
  
  /* Blue overrides */
  --color-blue-500: #5696FF;
  --color-blue-600: #2174EA;
}

/* Base dark mode styles */
html {
  @apply bg-zinc-50 text-zinc-900;
}

@media (prefers-color-scheme: dark) {
  html {
    @apply bg-zinc-950 text-zinc-100;
  }
}