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

@layer components {
  .article {
    @apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
  }
  .btn-primary {
    @apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
  }
}

:root {
    --contrast: 255, 255, 255;
    --neutral-900: 243, 244, 246;
    --neutral-800: 229, 231, 235;
    --neutral-700: 209, 213, 219;
    --neutral-600: 156, 163, 175;
    --neutral-500: 180, 180, 180;
    --neutral-400: 75, 85, 99;
    --neutral-300: 55, 65, 81;
    --neutral-200: 31, 41, 55;
    --neutral-100: 17, 24, 39;
    --accent-400: 132, 204, 22;
    --accent-500: 101, 163, 13;
    --accent-600: 77, 124, 15;
  }

@media (prefers-color-scheme: dark) {
  :root {
    --contrast: 0, 0, 0;
    --neutral-900: 17, 24, 39;
    --neutral-800: 31, 41, 55;
    --neutral-700: 55, 65, 81;
    --neutral-600: 75, 85, 99;
    --neutral-500: 107, 114, 128;
    --neutral-300: 209, 213, 219;
    --neutral-400: 156, 163, 175;
    --neutral-200: 229, 231, 235;
    --accent-600: 101, 163, 13;
    --accent-500: 132, 204, 22;
    --accent-400: 163, 230, 53;
  }
}