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

[x-cloak] {
  display: none !important;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide::-webkit-scrollbar-thumb {
  display: none;
}

@variant dark (&:where(.dark, .dark *));

@theme {
  /* Light mode - light backgrounds, dark text */
  --color-primary-50: oklch(98% 0.02 290);
  --color-primary-100: oklch(95% 0.04 290);
  --color-primary-200: oklch(90% 0.08 290);
  --color-primary-300: oklch(82% 0.14 290);
  --color-primary-400: oklch(70% 0.18 290);
  --color-primary-500: oklch(60% 0.2 290);
  --color-primary-600: oklch(50% 0.18 290);
  --color-primary-700: oklch(42% 0.15 290);
  --color-primary-800: oklch(35% 0.12 290);
  --color-primary-900: oklch(28% 0.1 290);

  --color-secondary-50: oklch(98% 0.02 180);
  --color-secondary-100: oklch(94% 0.04 180);
  --color-secondary-200: oklch(88% 0.08 180);
  --color-secondary-300: oklch(80% 0.12 180);
  --color-secondary-400: oklch(68% 0.14 180);
  --color-secondary-500: oklch(58% 0.15 180);
  --color-secondary-600: oklch(48% 0.13 180);
  --color-secondary-700: oklch(40% 0.11 180);
  --color-secondary-800: oklch(33% 0.09 180);
  --color-secondary-900: oklch(27% 0.07 180);

  --color-tertiary-50: oklch(98% 0.005 60);
  --color-tertiary-100: oklch(95% 0.01 60);
  --color-tertiary-200: oklch(90% 0.015 60);
  --color-tertiary-300: oklch(82% 0.02 60);
  --color-tertiary-400: oklch(70% 0.025 60);
  --color-tertiary-500: oklch(58% 0.03 60);
  --color-tertiary-600: oklch(48% 0.025 60);
  --color-tertiary-700: oklch(40% 0.02 60);
  --color-tertiary-800: oklch(33% 0.015 60);
  --color-tertiary-900: oklch(26% 0.01 60);
}

@layer base {
  .dark {
    /* Dark mode - dark backgrounds (50-300), light text (700-900) */
    --color-primary-50: oklch(15% 0.08 290);
    --color-primary-100: oklch(18% 0.1 290);
    --color-primary-200: oklch(22% 0.12 290);
    --color-primary-300: oklch(28% 0.15 290);
    --color-primary-400: oklch(36% 0.18 290);
    --color-primary-500: oklch(45% 0.2 290);
    --color-primary-600: oklch(55% 0.18 290);
    --color-primary-700: oklch(65% 0.15 290);
    --color-primary-800: oklch(75% 0.12 290);
    --color-primary-900: oklch(85% 0.08 290);

    --color-secondary-50: oklch(15% 0.05 180);
    --color-secondary-100: oklch(18% 0.07 180);
    --color-secondary-200: oklch(22% 0.09 180);
    --color-secondary-300: oklch(28% 0.11 180);
    --color-secondary-400: oklch(36% 0.13 180);
    --color-secondary-500: oklch(45% 0.15 180);
    --color-secondary-600: oklch(55% 0.14 180);
    --color-secondary-700: oklch(65% 0.12 180);
    --color-secondary-800: oklch(75% 0.09 180);
    --color-secondary-900: oklch(85% 0.06 180);

    --color-tertiary-50: oklch(15% 0.008 60);
    --color-tertiary-100: oklch(18% 0.01 60);
    --color-tertiary-200: oklch(22% 0.015 60);
    --color-tertiary-300: oklch(28% 0.02 60);
    --color-tertiary-400: oklch(36% 0.025 60);
    --color-tertiary-500: oklch(45% 0.03 60);
    --color-tertiary-600: oklch(55% 0.025 60);
    --color-tertiary-700: oklch(65% 0.02 60);
    --color-tertiary-800: oklch(75% 0.015 60);
    --color-tertiary-900: oklch(85% 0.01 60);
  }
}

.prose {
  --tw-prose-body: theme("colors.primary.900");
  --tw-prose-headings: theme("colors.primary.900");
  --tw-prose-links: theme("colors.primary.600");
  --tw-prose-bold: theme("colors.primary.900");
  --tw-prose-counters: theme("colors.primary.700");
  --tw-prose-bullets: theme("colors.primary.700");
  --tw-prose-hr: theme("colors.primary.200");
  --tw-prose-quotes: theme("colors.primary.700");
  --tw-prose-quote-borders: theme("colors.primary.400");
  --tw-prose-captions: theme("colors.primary.700");
  --tw-prose-code: theme("colors.primary.900");
  --tw-prose-pre-code: theme("colors.primary.900");
  --tw-prose-pre-bg: theme("colors.primary.100");
  --tw-prose-th-borders: theme("colors.primary.300");
  --tw-prose-td-borders: theme("colors.primary.300");
}

.dark .prose {
  --tw-prose-body: theme("colors.primary.100");
  --tw-prose-headings: theme("colors.primary.100");
  --tw-prose-links: theme("colors.primary.400");
  --tw-prose-bold: theme("colors.primary.100");
  --tw-prose-counters: theme("colors.primary.300");
  --tw-prose-bullets: theme("colors.primary.300");
  --tw-prose-hr: theme("colors.primary.700");
  --tw-prose-quotes: theme("colors.primary.300");
  --tw-prose-quote-borders: theme("colors.primary.500");
  --tw-prose-captions: theme("colors.primary.300");
  --tw-prose-code: theme("colors.primary.100");
  --tw-prose-pre-code: theme("colors.primary.100");
  --tw-prose-pre-bg: theme("colors.primary.800");
  --tw-prose-th-borders: theme("colors.primary.700");
  --tw-prose-td-borders: theme("colors.primary.700");
}

.prose pre {
  background: theme("colors.primary.100");
  border: 1px solid theme("colors.primary.200");
}

.dark .prose pre {
  background: theme("colors.primary.800");
  border: 1px solid theme("colors.primary.700");
}

.prose code:not(pre code) {
  background: theme("colors.primary.300");
  color: theme("colors.primary.900");
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

.dark .prose code:not(pre code) {
  background: theme("colors.primary.700");
  color: theme("colors.primary.100");
}