lutaml 0.10.6 → 0.10.8

data/templates/static_site/assets/scripts/core/state.js

@@ -10,9 +10,10 @@ document.addEventListener('alpine:init', () => {
     config: window.APP_CONFIG || {},
 
     // Current State
-    currentView: 'welcome',  // 'welcome' | 'package' | 'class' | 'search'
+    currentView: 'welcome',  // 'welcome' | 'package' | 'class' | 'search' | 'diagram'
     currentPackage: null,
     currentClass: null,
+    currentDiagram: null,
     searchQuery: '',
     searchResults: [],
 
@@ -86,6 +87,7 @@ document.addEventListener('alpine:init', () => {
       this.currentView = 'welcome';
       this.currentPackage = null;
       this.currentClass = null;
+      this.currentDiagram = null;
       this.breadcrumbs = [];
       this.pushState();
     },
@@ -118,6 +120,21 @@ document.addEventListener('alpine:init', () => {
       this.pushState();
     },
 
+    selectDiagram(diagramId) {
+      if (!this.data || !this.data.diagrams[diagramId]) {
+        console.warn('Diagram not found:', diagramId);
+        return;
+      }
+
+      const diag = this.data.diagrams[diagramId];
+
+      this.currentDiagram = diagramId;
+      this.currentPackage = diag.package;
+      this.currentView = 'diagram';
+      this.updateBreadcrumbs();
+      this.pushState();
+    },
+
     performSearch(query) {
       if (!query || query.length < 2) {
         this.searchResults = [];
@@ -196,6 +213,8 @@ document.addEventListener('alpine:init', () => {
         this.breadcrumbs = this.buildPackageBreadcrumbs(this.currentPackage);
       } else if (this.currentView === 'class' && this.currentClass) {
         this.breadcrumbs = this.buildClassBreadcrumbs(this.currentClass);
+      } else if (this.currentView === 'diagram' && this.currentDiagram) {
+        this.breadcrumbs = [{ name: `Diagram: ${this.data.diagrams[this.currentDiagram]?.name || ''}`, type: 'diagram' }];
       } else if (this.currentView === 'search') {
         this.breadcrumbs = [{ name: `Search: ${this.searchQuery}`, type: 'search' }];
       }
@@ -275,6 +294,8 @@ document.addEventListener('alpine:init', () => {
         this.selectPackage(decodeURIComponent(parts[1]));
       } else if (parts[0] === 'class' && parts[1]) {
         this.selectClass(decodeURIComponent(parts[1]));
+      } else if (parts[0] === 'diagram' && parts[1]) {
+        this.selectDiagram(decodeURIComponent(parts[1]));
       } else if (parts[0] === 'search') {
         const params = new URLSearchParams(queryString);
         const query = params.get('q');
@@ -294,6 +315,8 @@ document.addEventListener('alpine:init', () => {
         hash = `#/package/${encodeURIComponent(this.currentPackage)}`;
       } else if (this.currentView === 'class' && this.currentClass) {
         hash = `#/class/${encodeURIComponent(this.currentClass)}`;
+      } else if (this.currentView === 'diagram' && this.currentDiagram) {
+        hash = `#/diagram/${encodeURIComponent(this.currentDiagram)}`;
       } else if (this.currentView === 'search' && this.searchQuery) {
         hash = `#/search?q=${encodeURIComponent(this.searchQuery)}`;
       }
@@ -370,6 +393,7 @@ function app() {
     get currentView() { return Alpine.store('app').currentView; },
     get currentPackage() { return Alpine.store('app').currentPackage; },
     get currentClass() { return Alpine.store('app').currentClass; },
+    get currentDiagram() { return Alpine.store('app').currentDiagram; },
     get sidebarVisible() {
       return Alpine.store('app').sidebarVisible;
     },
@@ -392,6 +416,9 @@ function app() {
     selectClass(id) {
       Alpine.store('app').selectClass(id);
     },
+    selectDiagram(id) {
+      Alpine.store('app').selectDiagram(id);
+    },
     toggleTheme() {
       Alpine.store('app').toggleTheme();
     },

data/templates/static_site/assets/scripts/ui/sidebar.js

@@ -1,7 +1,7 @@
-// Alpine.js Components for Sidebar
+// Sidebar Tree — LutaML Branded
+// Compact, clean tree matching lutaml-xsd SchemaTreeNode
 
 document.addEventListener('alpine:init', () => {
-  // Package Tree Component
   Alpine.data('packageTree', () => ({
     get data() {
       return this.$store.app.data;
@@ -9,206 +9,115 @@ document.addEventListener('alpine:init', () => {
 
     get rootNodes() {
       if (!this.data || !this.data.packageTree) return [];
-
-      // Return as array for iteration
       return [this.data.packageTree];
     }
   }));
 
-  // Tree Node Component (Recursive)
-  Alpine.data('treeNode', (node) => ({
-    node,
-
-    get expanded() {
-      return this.$store.app.isNodeExpanded(this.node.id);
-    },
-
-    get hasChildren() {
-      return (this.node.children && this.node.children.length > 0) ||
-             (this.node.classes && this.node.classes.length > 0);
-    },
-
-    get isSelected() {
-      return this.$store.app.currentPackage === this.node.id;
-    },
-
-    get currentClass() {
-      return this.$store.app.currentClass;
-    },
-
-    toggle() {
-      this.$store.app.toggleNode(this.node.id);
-    },
-
-    selectPackage(id) {
-      this.$store.app.selectPackage(id);
-    },
-
-    selectClass(id) {
-      this.$store.app.selectClass(id);
-    },
-
-    getClass(classId) {
-      return this.$store.app.data?.classes[classId];
-    }
-  }));
-
-  // Sidebar Actions
-  Alpine.data('sidebarActions', () => ({
-    expandAll() {
-      this.$store.app.expandAll();
-    },
-
-    collapseAll() {
-      this.$store.app.collapseAll();
-    }
-  }));
-
-  // Recursive tree rendering component with full reactivity
   Alpine.data('renderTree', (rootNode) => ({
     treeHtml: '',
     rootNode,
 
     init() {
       this.rebuildTree();
-
-      // Listen for manual rebuild triggers
-      window.addEventListener('tree-rebuild', () => {
-        this.rebuildTree();
-      });
-
-      // Watch for state changes and rebuild tree
-      this.$watch('$store.app.expandedNodes.size', () => {
-        this.rebuildTree();
-      });
-
-      this.$watch('$store.app.currentPackage', () => {
-        this.rebuildTree();
-      });
-
-      this.$watch('$store.app.currentClass', () => {
-        this.rebuildTree();
-      });
+      window.addEventListener('tree-rebuild', () => this.rebuildTree());
+      this.$watch('$store.app.expandedNodes.size', () => this.rebuildTree());
+      this.$watch('$store.app.currentPackage', () => this.rebuildTree());
+      this.$watch('$store.app.currentClass', () => this.rebuildTree());
     },
 
     rebuildTree() {
-      this.treeHtml = this.buildTreeNode(this.rootNode);
+      if (!this.rootNode) { this.treeHtml = ''; return; }
+      this.treeHtml = this.buildPackageNode(this.rootNode);
     },
 
-    buildTreeNode(node) {
+    buildPackageNode(node) {
       const store = Alpine.store('app');
       const expanded = store.isNodeExpanded(node.id);
-      const isSelected = store.currentPackage === node.id;
+      const selected = store.currentPackage === node.id;
       const hasChildren = (node.children && node.children.length > 0) ||
                           (node.classes && node.classes.length > 0);
-
-      // Get package data for stereotypes
       const pkg = store.data?.packages[node.id];
       const stereotypes = pkg?.stereotypes || node.stereotypes || [];
 
-      let html = `<div class="tree-node${isSelected ? ' selected' : ''}">`;
-      html += '<div class="node-header">';
+      let h = '<div class="tree-node">';
+      h += '<div class="tree-node-content' + (selected ? ' selected' : '') + '">';
 
-      // Expand/collapse button - call store method directly and trigger rebuild
+      // Expand toggle
       if (hasChildren) {
-        html += `<button onclick="Alpine.store('app').toggleNode('${node.id}'); window.dispatchEvent(new CustomEvent('tree-rebuild'));" class="expand-icon${expanded ? ' expanded' : ''}">`;
-        html += '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">';
-        html += '<polyline points="9 18 15 12 9 6"></polyline></svg></button>';
+        h += '<button onclick="Alpine.store(\'app\').toggleNode(\'' + node.id + '\'); window.dispatchEvent(new CustomEvent(\'tree-rebuild\'));" class="tree-toggle">';
+        h += '<svg width="12" height="12" viewBox="0 0 12 12" fill="none"' + (expanded ? ' class="expanded"' : '') + '>';
+        h += '<path d="M4 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';
+        h += '</svg></button>';
       } else {
-        html += '<span class="no-icon"></span>';
+        h += '<span class="tree-toggle-placeholder"></span>';
       }
 
-      // Package icon and label
-      html += '<svg class="package-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">';
-      html += '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+      // Folder icon
+      h += '<span class="tree-icon">';
+      h += '<svg width="14" height="14" viewBox="0 0 14 14" fill="none">';
+      h += '<path d="M2 5a2 2 0 012-2h2.5L8 4.5h2a2 2 0 012 2v2.5a2 2 0 01-2 2H4a2 2 0 01-2-2V5z" stroke="currentColor" stroke-width="1.1"/>';
+      h += '</svg></span>';
 
-      html += `<button onclick="Alpine.store('app').selectPackage('${node.id}')" class="node-label${isSelected ? ' active' : ''}" title="${node.path || ''}">`;
-
-      // Add stereotype prefix if present
+      // Label
+      h += '<button onclick="Alpine.store(\'app\').selectPackage(\'' + node.id + '\')" class="tree-label" title="' + this.esc(node.path || node.name) + '">';
       if (stereotypes.length > 0) {
-        html += `<span class="stereotype-prefix">«${this.escapeHtml(stereotypes[0])}»</span> `;
+        h += '<span class="tree-stereotype">«' + this.esc(stereotypes[0]) + '» </span>';
       }
+      h += this.esc(node.name) + '</button>';
 
-      html += `<span>${this.escapeHtml(node.name)}</span></button>`;
-
-      // Class count badge
+      // Count badge
       if (node.classCount > 0) {
-        html += `<span class="count-badge" title="${node.classCount} class${node.classCount !== 1 ? 'es' : ''}">${node.classCount}</span>`;
+        h += '<span class="tree-count">' + node.classCount + '</span>';
       }
 
-      html += '</div>'; // node-header
+      h += '</div>'; // tree-node-content
 
-      // Children (packages and classes)
+      // Children
       if (hasChildren && expanded) {
-        html += '<div class="node-children">';
+        h += '<div class="tree-children">';
 
-        // Render child packages
-        if (node.children && node.children.length > 0) {
-          node.children.forEach(child => {
-            html += this.buildTreeNode(child);
+        if (node.classes && node.classes.length > 0) {
+          h += '<div class="tree-group">';
+          h += '<div class="tree-group-label">Classes <span class="tree-count">' + node.classes.length + '</span></div>';
+          h += '<div class="tree-group-items">';
+          node.classes.forEach(cd => {
+            const classId = typeof cd === 'string' ? cd : cd.id;
+            h += this.buildClassLeaf(classId);
           });
+          h += '</div></div>';
         }
 
-        // Render classes
-        if (node.classes && node.classes.length > 0) {
-          node.classes.forEach(classData => {
-            // classData can be either string ID or object with {id, name, stereotypes}
-            const classId = typeof classData === 'string' ? classData : classData.id;
-            const classStereotypes = typeof classData === 'object' ? classData.stereotypes : null;
-            html += this.buildClassNode(classId, classStereotypes);
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(child => {
+            h += this.buildPackageNode(child);
           });
         }
 
-        html += '</div>';
+        h += '</div>';
       }
 
-      html += '</div>'; // tree-node
-      return html;
+      h += '</div>';
+      return h;
     },
 
-    buildClassNode(classId, providedStereotypes = null) {
+    buildClassLeaf(classId) {
       const store = Alpine.store('app');
       const cls = store.data?.classes[classId];
       if (!cls) return '';
 
-      const isSelected = store.currentClass === classId;
-      const stereotypes = providedStereotypes || cls.stereotypes || [];
-
-      let html = `<div class="tree-node class-node${isSelected ? ' selected' : ''}">`;
-      html += '<div class="node-header">';
-      html += '<span class="no-icon"></span>';
-
-      // Class icon
-      html += '<svg class="class-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">';
-      html += '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>';
-      html += '<line x1="3" y1="9" x2="21" y2="9"></line>';
-      html += '<line x1="9" y1="21" x2="9" y2="9"></line>';
-      html += '</svg>';
-
-      html += `<button onclick="Alpine.store('app').selectClass('${classId}')" class="node-label${isSelected ? ' active' : ''}" title="${this.escapeHtml(cls.qualifiedName || cls.name)}">`;
-
-      // Add stereotype prefix if present
-      if (stereotypes.length > 0) {
-        html += `<span class="stereotype-prefix">«${this.escapeHtml(stereotypes[0])}»</span> `;
-      }
-
-      html += `<span>${this.escapeHtml(cls.name)}</span></button>`;
-
-      html += '</div>'; // node-header
-      html += '</div>'; // tree-node
+      const selected = store.currentClass === classId;
+      const typeKey = (cls.type === 'Enumeration' ? 'enum' : cls.type === 'DataType' ? 'datatype' : cls.type === 'Interface' ? 'interface' : 'class');
 
-      return html;
+      let h = '<div class="tree-item' + (selected ? ' selected' : '') + '" onclick="Alpine.store(\'app\').selectClass(\'' + classId + '\')">';
+      h += '<span class="badge badge-' + typeKey + '">' + (cls.type === 'Enumeration' ? 'E' : cls.type === 'DataType' ? 'DT' : cls.type === 'Interface' ? 'I' : 'C') + '</span>';
+      h += '<span class="tree-item-label" title="' + this.esc(cls.qualifiedName || cls.name) + '">' + this.esc(cls.name) + '</span>';
+      h += '</div>';
+      return h;
     },
 
-    escapeHtml(text) {
-      const map = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#039;'
-      };
-      return String(text).replace(/[&<>"']/g, m => map[m]);
+    esc(text) {
+      const m = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+      return String(text).replace(/[&<>"']/g, c => m[c]);
     }
   }));
 });

data/templates/static_site/assets/styles/00-variables.css

@@ -1,144 +1,144 @@
-/* CSS Custom Properties for Theming */
+/* LutaML UML Browser — Branded Design System */
 
 :root {
-  /* Colors - Light Theme */
-  --color-bg: #ffffff;
-  --color-bg-secondary: #f8f9fa;
-  --color-bg-tertiary: #ecf0f1;
-  --color-text: #2c3e50;
-  --color-text-secondary: #7f8c8d;
-  --color-text-muted: #95a5a6;
-
-  --color-primary: #2c3e50;
-  --color-accent: #3498db;
-  --color-success: #27ae60;
-  --color-warning: #f39c12;
-  --color-error: #e74c3c;
-  --color-info: #3498db;
-
-  --color-border: #dcdfe6;
-  --color-border-light: #e4e7ed;
-  --color-border-dark: #b3b9bf;
-
-  --color-link: #3498db;
-  --color-link-hover: #2980b9;
-
-  --color-code-bg: #f8f9fa;
-  --color-code-text: #e74c3c;
-
-  /* Sidebar */
-  --color-sidebar-bg: #ffffff;
-  --color-sidebar-border: #dcdfe6;
-  --color-sidebar-hover: #f8f9fa;
-  --color-sidebar-active: #ebf5fb;
-
-  /* Header */
-  --color-header-bg: #2c3e50;
-  --color-header-text: #ffffff;
+  /* Primary — LutaML Blue (#5b9cd4) */
+  --color-primary: #5b9cd4;
+  --color-primary-light: #7db5e2;
+  --color-primary-dark: #26489e;
+  --color-primary-alpha: rgba(91, 156, 212, 0.12);
+
+  /* Accent — Golden Yellow (#dbab3e) */
+  --color-accent: #dbab3e;
+  --color-accent-light: #f0ca6e;
+  --color-accent-alpha: rgba(219, 171, 62, 0.12);
+
+  /* Semantic */
+  --color-teal: #60c3a7;
+  --color-teal-alpha: rgba(96, 195, 167, 0.12);
+  --color-orange: #ea5624;
+  --color-orange-alpha: rgba(234, 86, 36, 0.12);
+  --color-red: #b31f24;
+  --color-red-alpha: rgba(179, 31, 36, 0.12);
+  --color-green: #7cc242;
+  --color-green-alpha: rgba(124, 194, 66, 0.12);
+
+  /* Backgrounds — Warm Stones */
+  --bg-primary: #FAFAF9;
+  --bg-secondary: #F5F5F4;
+  --bg-elevated: #FFFFFF;
+  --bg-overlay: rgba(28, 25, 23, 0.5);
+  --bg-hover: rgba(28, 25, 23, 0.04);
+  --bg-active: rgba(28, 25, 23, 0.06);
+
+  /* Text — Warm Grays */
+  --text-primary: #1C1917;
+  --text-secondary: #57534E;
+  --text-muted: #A8A29E;
+
+  /* Borders */
+  --border-light: #E7E5E4;
+  --border-medium: #D6D3D1;
+  --border-focus: #5b9cd4;
+
+  /* Badge Colors */
+  --badge-class: #26489e;
+  --badge-class-bg: rgba(38, 72, 158, 0.12);
+  --badge-enum: #dbab3e;
+  --badge-enum-bg: rgba(219, 171, 62, 0.15);
+  --badge-datatype: #60c3a7;
+  --badge-datatype-bg: rgba(96, 195, 167, 0.15);
+  --badge-interface: #5b9cd4;
+  --badge-interface-bg: rgba(91, 156, 212, 0.12);
+  --badge-package: #ea5624;
+  --badge-package-bg: rgba(234, 86, 36, 0.12);
+  --badge-diagram: #7cc242;
+  --badge-diagram-bg: rgba(124, 194, 66, 0.12);
+  --badge-abstract: #b31f24;
+  --badge-abstract-bg: rgba(179, 31, 36, 0.12);
 
-  /* Spacing */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -1px rgba(28, 25, 23, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -2px rgba(28, 25, 23, 0.04);
 
   /* Typography */
-  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-                       "Helvetica Neue", Arial, sans-serif;
-  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",
-                       "Courier New", monospace;
-
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.25;
-  --line-height-base: 1.5;
-  --line-height-relaxed: 1.75;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Consolas', monospace;
+
+  /* Type Scale */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+
+  /* Line Heights */
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
 
-  /* Layout */
-  --sidebar-width: 320px;
-  --header-height: 64px;
-  --border-radius: 4px;
-  --border-radius-lg: 8px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
 
   /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-base: 200ms ease-in-out;
-  --transition-slow: 300ms ease-in-out;
+  --transition-fast: 100ms ease;
+  --transition-normal: 150ms ease;
+  --transition-slow: 200ms ease-out;
+
+  /* Layout */
+  --sidebar-width: 280px;
+  --header-height: 56px;
 
   /* Z-index */
   --z-sidebar: 10;
   --z-header: 20;
-  --z-search-overlay: 30;
-  --z-modal: 40;
+  --z-search-overlay: 100;
+  --z-modal: 200;
 }
 
-/* Dark Theme */
+/* Dark Mode */
 #app.dark {
-  /* Colors - Dark Theme */
-  --color-bg: #1e1e1e;
-  --color-bg-secondary: #252526;
-  --color-bg-tertiary: #2d2d30;
-  --color-text: #e0e0e0;
-  --color-text-secondary: #a0a0a0;
-  --color-text-muted: #808080;
-
-  --color-primary: #3d5a80;
-  --color-accent: #5dade2;
-  --color-success: #52c08d;
-  --color-warning: #ffa726;
-  --color-error: #ef5350;
-  --color-info: #5dade2;
-
-  --color-border: #3e3e42;
-  --color-border-light: #2d2d30;
-  --color-border-dark: #4e4e52;
-
-  --color-link: #5dade2;
-  --color-link-hover: #85c1e9;
-
-  --color-code-bg: #2d2d30;
-  --color-code-text: #ef5350;
-
-  /* Sidebar */
-  --color-sidebar-bg: #252526;
-  --color-sidebar-border: #3e3e42;
-  --color-sidebar-hover: #2d2d30;
-  --color-sidebar-active: #37373d;
-
-  /* Header */
-  --color-header-bg: #1e1e1e;
-  --color-header-text: #e0e0e0;
-
-  /* Shadows (darker for dark mode) */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
+  --bg-primary: #1a1a24;
+  --bg-secondary: #232736;
+  --bg-elevated: #2d3344;
+  --bg-overlay: rgba(0, 0, 0, 0.7);
+  --bg-hover: rgba(255, 255, 255, 0.06);
+  --bg-active: rgba(255, 255, 255, 0.10);
+
+  --text-primary: #e8edf4;
+  --text-secondary: #a8b4c8;
+  --text-muted: #6b7a8f;
+
+  --border-light: #3a4256;
+  --border-medium: #4a5572;
+  --border-focus: #5b9cd4;
+
+  --badge-class-bg: rgba(91, 156, 212, 0.2);
+  --badge-class: #5b9cd4;
+  --badge-enum-bg: rgba(219, 171, 62, 0.2);
+  --badge-datatype-bg: rgba(96, 195, 167, 0.2);
+  --badge-interface-bg: rgba(91, 156, 212, 0.2);
+  --badge-package-bg: rgba(234, 86, 36, 0.2);
+  --badge-diagram-bg: rgba(124, 194, 66, 0.2);
+  --badge-abstract-bg: rgba(179, 31, 36, 0.2);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
 }
-
-/* Responsive breakpoints (for media queries) */
-/* Use these in @media rules:
-   @media (min-width: 640px) { ... }  - Small devices and up
-   @media (min-width: 768px) { ... }  - Tablets and up
-   @media (min-width: 1024px) { ... } - Desktop and up
-   @media (min-width: 1280px) { ... } - Large desktop and up
-*/