initial

src/style.css

@@ -0,0 +1,71 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.app-dark, .app-dark *));
+
+@layer base {
+  body {
+    font-family: var(--font-family, Inter, 'Segoe UI', Roboto, Arial, sans-serif);
+    background: #f5f7fa;
+    color: #1e293b;
+  }
+
+  .app-dark body {
+    background: #0f172a;
+    color: #e2e8f0;
+  }
+
+  #app {
+    height: 100vh;
+  }
+
+  a {
+    color: #3b82f6;
+    text-decoration: none;
+  }
+
+  .ck-editor__editable {
+    min-height: 400px;
+  }
+
+  .ck-content ol,
+  .ck-content ul {
+    padding-inline-start: 40px;
+  }
+
+  .ck-content li {
+    margin-bottom: 2px;
+  }
+
+  .app-dark .ck.ck-editor {
+    --ck-color-base-background: #0f172a;
+    --ck-color-base-border: #334155;
+    --ck-color-base-text: #e2e8f0;
+    --ck-color-text: #e2e8f0;
+    --ck-color-focus-border: #3b82f6;
+    --ck-color-toolbar-background: #1e293b;
+    --ck-color-toolbar-border: #334155;
+    --ck-color-dropdown-panel-background: #1e293b;
+    --ck-color-panel-background: #1e293b;
+    --ck-color-panel-border: #334155;
+    --ck-color-button-default-hover-background: #334155;
+    --ck-color-button-default-active-background: #334155;
+    --ck-color-button-on-background: #334155;
+    --ck-color-input-background: #0f172a;
+    --ck-color-input-border: #334155;
+    --ck-color-input-text: #e2e8f0;
+    --ck-color-tooltip-background: #334155;
+    --ck-color-tooltip-text: #e2e8f0;
+    --ck-color-table-border: #475569;
+    --ck-color-link-default: #60a5fa;
+  }
+}
+
+@layer components {
+  .field {
+    @apply mb-4;
+  }
+
+  .field > label {
+    @apply mb-1.5 block text-sm font-medium;
+  }
+}