feat: CSS variable theming system with 3 themes (Dark Canvas, Warm Studio, Midnight)"

src/index.css

@@ -1,35 +1,77 @@
-@import "tailwindcss";
-
-@theme {
-  --font-sans: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
-  --color-panel-bg: #1C1C1E;
-  --color-panel-border: #3A3A3E;
-  --color-canvas-bg: #141414;
-  --color-ui-primary: #E0E0E0;
-  --color-ui-secondary: #808080;
-  --color-accent-blue: #0A84FF;
-  --color-accent-amber: #FFD60A;
-}
-
-body {
-  background-color: #1C1C1E;
-  color: #E0E0E0;
-  font-family: var(--font-sans);
-  margin: 0;
-  overflow: hidden;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #3A3A3E; border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: #5A5A5E; }
-
-.custom-scrollbar::-webkit-scrollbar { width: 4px; }
-.hide-scrollbar::-webkit-scrollbar { display: none; }
-.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-
-.rich-text-editor a { color: #0A84FF; text-decoration: underline; }
-.rich-text-editor ul { list-style: disc inside; }
-.rich-text-editor ol { list-style: decimal inside; }
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
+  --color-panel-bg: var(--panel-bg);
+  --color-panel-border: var(--panel-border);
+  --color-canvas-bg: var(--canvas-bg);
+  --color-ui-primary: var(--ui-primary);
+  --color-ui-secondary: var(--ui-secondary);
+  --color-accent-blue: var(--accent);
+  --color-accent-amber: #FFD60A;
+}
+
+/* ═══ Theme: Dark Canvas (default) ═══ */
+:root, [data-theme="dark-canvas"] {
+  --canvas-bg: #141414;
+  --panel-bg: #1C1C1E;
+  --panel-surface: #2A2A2E;
+  --panel-border: #3A3A3E;
+  --ui-primary: #E5E5E7;
+  --ui-secondary: #88888A;
+  --accent: #0A84FF;
+  --accent-green: #30D158;
+  --accent-amber: #FFD60A;
+  --accent-red: #FF453A;
+}
+
+/* ═══ Theme: Warm Studio ═══ */
+[data-theme="warm-studio"] {
+  --canvas-bg: #181410;
+  --panel-bg: #221F1B;
+  --panel-surface: #2E2A24;
+  --panel-border: #46403A;
+  --ui-primary: #F0EAE0;
+  --ui-secondary: #9A9080;
+  --accent: #D4A373;
+  --accent-green: #8FBF6A;
+  --accent-amber: #E8C45A;
+  --accent-red: #D45A4A;
+}
+
+/* ═══ Theme: Midnight ═══ */
+[data-theme="midnight"] {
+  --canvas-bg: #0A0E14;
+  --panel-bg: #0F1319;
+  --panel-surface: #171D28;
+  --panel-border: #253040;
+  --ui-primary: #D5DBEB;
+  --ui-secondary: #6B7A95;
+  --accent: #6C89E8;
+  --accent-green: #5EC4A0;
+  --accent-amber: #E8C84A;
+  --accent-red: #E85C5C;
+}
+
+body {
+  background-color: var(--panel-bg);
+  color: var(--ui-primary);
+  font-family: var(--font-sans);
+  margin: 0;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--ui-secondary); }
+
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.hide-scrollbar::-webkit-scrollbar { display: none; }
+.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+.rich-text-editor a { color: var(--accent); text-decoration: underline; }
+.rich-text-editor ul { list-style: disc inside; }
+.rich-text-editor ol { list-style: decimal inside; }