@import "tailwindcss";

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

@plugin "@tailwindcss/typography";

@theme {
  --color-dfblue-50: oklch(0.9632 0.0173 264.48);
  --color-dfblue-100: oklch(0.9292 0.0337 271.04);
  --color-dfblue-200: oklch(0.8728 0.0619 269.99);
  --color-dfblue-300: oklch(0.7879 0.1069 271.46);
  --color-dfblue-400: oklch(0.6835 0.1637 274.32);
  --color-dfblue-500: oklch(0.5479 0.2345 272.71);
  --color-dfblue-600: oklch(0.4994 0.2482 273.49);
  --color-dfblue-700: oklch(0.4471 0.2302 273.3);
  --color-dfblue-800: oklch(0.3898 0.1911 274.02);
  --color-dfblue-900: oklch(0.3534 0.1436 275.68);
  --color-dfblue-950: oklch(0.2515 0.0931 278.19);

  --color-dfgreen-50: oklch(0.982 0.0122 178.03);
  --color-dfgreen-100: oklch(0.9387 0.0439 180.51);
  --color-dfgreen-200: oklch(0.8912 0.0751 181.21);
  --color-dfgreen-300: oklch(0.8214 0.1051 181.54);
  --color-dfgreen-400: oklch(0.7394 0.1148 182.74);
  --color-dfgreen-500: oklch(0.6554 0.1082 183.05);
  --color-dfgreen-600: oklch(0.5605 0.0926 184.34);
  --color-dfgreen-700: oklch(0.4792 0.0756 186.42);
  --color-dfgreen-800: oklch(0.4137 0.0613 188.83);
  --color-dfgreen-900: oklch(0.3688 0.0508 189.39);
  --color-dfgreen-950: oklch(0.2616 0.0374 195.11);
}
body {
  font-family: 'Inter', sans-serif;
  /* Using your custom colors for a light theme background */
  background-color: white;
  color: var(--color-dfblue-900);
}

.prose h1, .prose h2, .prose h3 { color: var(--color-dfblue-950); }
.prose p, .prose li { color: var(--color-dfblue-800); }
.prose strong { color: var(--color-dfblue-900); }
.prose a { color: var(--color-dfblue-500); }
.prose code { color: var(--color-dfblue-600); background-color: var(--color-dfblue-100); padding: 2px 4px; border-radius: 4px;}
.prose pre { background-color: var(--color-dfblue-100); padding: 1rem; border-radius: 0.5rem; }
.prose blockquote { border-left-color: var(--color-dfblue-300); color: var(--color-dfblue-600); }