routing

frontend/angular-clarity-master/src/styles.scss

@@ -1,7 +1,19 @@
 @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 @import '~@clr/icons/clr-icons.min.css';
 
-/* font set ==================== */
+// Modern Design System Imports
+@import './styles/design-tokens';
+@import './styles/theme-variables';
+@import './styles/base';
+@import './styles/components';
+@import './styles/animations';
+
+// Google Fonts - Modern Typography
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');
+
+/* Legacy font set ==================== */
 @import url(https://fonts.googleapis.com/css?family=Athiti|Bai+Jamjuree|Chakra+Petch|Charmonman|Chonburi|Fahkwang|Itim|K2D|Kanit|KoHo|Kodchasan|Krub|Maitree|Mali|Mitr|Niramit|Pattaya|Pridi|Prompt|Sriracha|Srisakdi|Taviraj|Trirong);
 
 .font-athiti { font-family: 'Athiti', sans-serif; }
@@ -196,3 +208,78 @@ margin-right: 0;
 .float-right {
   float: right !important;
 }
+
+// Global styles for enhanced components
+.btn {
+  @extend .modern-btn;
+}
+
+.modal-dialog {
+  @extend .modern-modal;
+  
+  .modal-header {
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: $white;
+    border-radius: $radius-2xl $radius-2xl 0 0;
+    
+    .modal-title {
+      color: $white;
+      font-weight: $font-bold;
+    }
+    
+    .close {
+      color: $white;
+      opacity: 0.8;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  
+  .modal-body {
+    padding: $space-6;
+  }
+  
+  .modal-footer {
+    padding: $space-5 $space-6;
+    background: $gray-50;
+    border-radius: 0 0 $radius-2xl $radius-2xl;
+  }
+}
+
+.datagrid {
+  @extend .modern-table;
+}
+
+.badge {
+  @extend .modern-badge;
+}
+
+.alert {
+  @extend .modern-alert;
+}
+
+.spinner {
+  @extend .modern-spinner;
+}
+
+.skeleton {
+  @extend .modern-skeleton;
+}
+
+.form-group {
+  @extend .modern-form-group;
+  
+  .form-label {
+    @extend .form-label;
+  }
+  
+  .form-input, .form-select {
+    @extend .form-input;
+  }
+  
+  .form-error {
+    @extend .form-error;
+  }
+}