initial commit

frontend/styles.css

@@ -0,0 +1,153 @@
+@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");
+}