@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --font-sans: var(--font-inter);
  --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;

  --animate-fade-in: fade-in 0.5s ease-in-out;
  --animate-slide-up: slide-up 0.5s ease-in-out;

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

:root {
  --background: var(--color-zinc-50);
  --foreground: var(--color-zinc-900);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--color-zinc-950);
    --foreground: var(--color-zinc-50);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), sans-serif;
}