Refactor CSS styles across multiple components for improved consistency and maintainability

- Removed redundant styles and consolidated common styles in styles.scss
- Updated layout and spacing variables for better responsiveness
- Simplified component-specific styles in apartment, lease, tenant, and dashboard components
- Enhanced readability and organization of CSS by utilizing CSS layers
- Ensured consistent use of design tokens for colors, spacing, and borders

frontend/src/app/components/tenants-page/tenants-page.css

@@ -1,60 +1,11 @@
 :host {
   display: block;
 }
-.page-heading {
-  margin-bottom: 30px;
-}
-.page-heading h1 {
-  margin-bottom: 8px;
-  font-size: clamp(2rem, 7vw, 3.2rem);
-  font-weight: 750;
-  letter-spacing: -0.055em;
-  line-height: 1.02;
-}
-.page-heading p:last-child {
-  margin-bottom: 0;
-  color: var(--text-muted);
-  line-height: 1.6;
-}
-.page-heading .primary-action {
-  width: 100%;
-  margin-top: 20px;
-}
-.empty-state {
-  padding: 46px 22px;
-  text-align: center;
-  border: 1px solid var(--border);
-  border-radius: 22px;
-  background: var(--surface);
-}
-.empty-state > p:not(.eyebrow) {
-  color: var(--text-muted);
-}
 .tenant-grid {
   display: grid;
   gap: 16px;
 }
-.content-region > mat-progress-bar,
-.refresh-error {
-  margin-bottom: 16px;
-}
-.skeleton-card {
-  padding: 20px;
-  border: 1px solid var(--border);
-  border-radius: 22px;
-  background: var(--surface);
-}
 @media (min-width: 700px) {
-  .page-heading {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 28px;
-  }
-  .page-heading .primary-action {
-    width: auto;
-    margin-top: 0;
-  }
   .tenant-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 18px;