feat: Add mobile responsive theme editor and documentation

- ThemesPage: Custom dropdown with theme cards for mobile
- ThemesPage: Collapsible variables section
- ThemePreview: Responsive grid and compact layout
- VariableEditor: Separate radius preview with border-radius
- ColorPicker: Mobile-friendly dropdown positioning
- README: Complete theme system documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/themes/ColorPicker.vue

@@ -277,4 +277,41 @@ input[type="range"]::-webkit-slider-thumb {
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
+
+/* Mobile responsive */
+@media (max-width: 600px) {
+  .color-preview {
+    padding: 0.25rem 0.375rem;
+  }
+
+  .color-swatch {
+    width: 20px;
+    height: 20px;
+  }
+
+  .color-value {
+    font-size: 0.7rem;
+  }
+
+  .color-dropdown {
+    width: 220px;
+    padding: 0.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .slider-group label {
+    width: 55px;
+    font-size: 0.7rem;
+  }
+
+  .slider-group span {
+    width: 35px;
+    font-size: 0.65rem;
+  }
+
+  .large-preview {
+    height: 32px;
+  }
+}
 </style>

frontend/src/components/themes/ThemePreview.vue

@@ -249,4 +249,69 @@ defineProps<{
   background: var(--info-bg);
   color: var(--info);
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .theme-preview {
+    padding: 0.75rem;
+  }
+
+  .preview-section {
+    margin-bottom: 1rem;
+  }
+
+  .color-swatches {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+
+  .swatch {
+    height: 40px;
+  }
+
+  .swatch span {
+    font-size: 0.6rem;
+  }
+
+  .component-samples {
+    flex-direction: column;
+  }
+
+  .sample-btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .sample-card {
+    padding: 0.75rem;
+  }
+
+  .sample-card h5 {
+    font-size: 0.875rem;
+  }
+
+  .sample-card p {
+    font-size: 0.8rem;
+  }
+
+  .status-badges {
+    gap: 0.375rem;
+  }
+
+  .badge {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.7rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .color-swatches {
+    grid-template-columns: 1fr;
+  }
+
+  .swatch {
+    height: 36px;
+  }
+}
 </style>

frontend/src/components/themes/VariableEditor.vue

@@ -169,4 +169,35 @@ function handleInputChange(e: Event) {
   outline: none;
   border-color: var(--accent);
 }
+
+/* Mobile responsive */
+@media (max-width: 600px) {
+  .variable-editor {
+    padding: 0.75rem;
+  }
+
+  .variable-header {
+    margin-bottom: 0.5rem;
+  }
+
+  .variable-name {
+    font-size: 0.8rem;
+  }
+
+  .variable-key {
+    font-size: 0.65rem;
+  }
+
+  .size-input input,
+  .text-input {
+    padding: 0.4rem;
+    font-size: 0.8rem;
+  }
+
+  .size-preview,
+  .radius-preview {
+    width: 24px;
+    height: 24px;
+  }
+}
 </style>