ok?

Author: Banegasn

apps/angular-app/src/pages/home/home.component.css

@@ -7,24 +7,24 @@
 .hero {
   text-align: center;
   padding: 48px 0 64px;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 
 .hero h1 {
   font-size: 48px;
   font-weight: 400;
   margin: 0 0 16px;
-  color: var(--md-sys-color-on-surface, #1d1b20);
+  color: var(--md-sys-color-on-surface);
 }
 
 .subtitle {
   font-size: 18px;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
+  color: var(--md-sys-color-on-surface-variant);
   margin: 0 0 32px;
   line-height: 1.6;
 }
 
-.button-group {
+.button-group,.framework-badges {
   display: flex;
   gap: 16px;
   justify-content: center;
@@ -33,7 +33,7 @@
 
 section {
   padding: 48px 0;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant, #e7e0ec);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
 }
 
 section:last-of-type {
@@ -45,51 +45,56 @@ h2 {
   font-weight: 400;
   margin: 0 0 32px;
   text-align: center;
-  color: var(--md-sys-color-on-surface, #1d1b20);
+  color: var(--md-sys-color-on-surface);
 }
 
-.feature-grid {
+.feature-grid,.component-list,.architecture-content,.quick-start-content,.resource-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
+}
+
+.feature-grid {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   margin-top: 32px;
 }
 
 .feature-card {
   padding: 24px;
   border-radius: 12px;
-  background: var(--md-sys-color-surface-variant, #e7e0ec);
+  background: var(--md-sys-color-surface-variant);
   text-align: center;
 }
 
 .feature-card .material-symbols-outlined {
   font-size: 48px;
-  color: var(--md-sys-color-primary, #6750a4);
+  color: var(--md-sys-color-primary);
   margin-bottom: 16px;
 }
 
-.feature-card h3 {
+.feature-card h3,.arch-column h3 {
   font-size: 20px;
   font-weight: 500;
+  margin: 0 0 16px;
+  color: var(--md-sys-color-on-surface);
+}
+
+.feature-card h3 {
   margin: 0 0 8px;
-  color: var(--md-sys-color-on-surface, #1d1b20);
 }
 
-.feature-card p {
+.feature-card p,.component-card p,.arch-column li {
   margin: 0;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
+  color: var(--md-sys-color-on-surface-variant);
   line-height: 1.5;
 }
 
 .component-list {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 24px;
 }
 
 .component-card {
   padding: 24px;
-  border: 1px solid var(--md-sys-color-outline, #79747e);
+  border: 1px solid var(--md-sys-color-outline);
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -108,11 +113,18 @@ h2 {
   gap: 8px;
 }
 
-.component-header h3 {
+.component-header h3,.quick-start-content h3 {
   font-size: 18px;
   font-weight: 500;
   margin: 0;
-  color: var(--md-sys-color-on-surface, #1d1b20);
+  color: var(--md-sys-color-on-surface);
+}
+
+.quick-start-content h3 {
+  margin: 0 0 12px;
+}
+
+.component-header h3 {
   flex: 1;
 }
 
@@ -121,56 +133,44 @@ h2 {
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
-  background: var(--md-sys-color-secondary-container, #e8def8);
-  color: var(--md-sys-color-on-secondary-container, #1d192b);
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
 }
 
 .badge.coming {
-  background: var(--md-sys-color-tertiary-container, #ffd8e4);
-  color: var(--md-sys-color-on-tertiary-container, #31111d);
+  background: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
 }
 
 .component-card p {
-  margin: 0;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
-  line-height: 1.5;
   flex: 1;
 }
 
-.demo-buttons {
+.demo-buttons,.component-features,.component-actions {
   display: flex;
-  gap: 12px;
   flex-wrap: wrap;
 }
 
+.demo-buttons {
+  gap: 12px;
+}
+
 .component-features {
-  display: flex;
   gap: 12px;
-  flex-wrap: wrap;
   font-size: 14px;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 .component-actions {
-  display: flex;
   gap: 8px;
-  flex-wrap: wrap;
   margin-top: auto;
 }
 
 .architecture-content {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 32px;
 }
 
-.arch-column h3 {
-  font-size: 20px;
-  font-weight: 500;
-  margin: 0 0 16px;
-  color: var(--md-sys-color-on-surface, #1d1b20);
-}
-
 .arch-column ul {
   list-style: none;
   padding: 0;
@@ -179,34 +179,23 @@ h2 {
 
 .arch-column li {
   padding: 8px 0;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
-  line-height: 1.5;
 }
 
 .arch-column code {
-  background: var(--md-sys-color-surface-variant, #e7e0ec);
+  background: var(--md-sys-color-surface-variant);
   padding: 2px 8px;
   border-radius: 4px;
   font-family: 'Courier New', monospace;
   font-size: 14px;
 }
 
 .quick-start-content {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
   margin-bottom: 24px;
 }
 
-.quick-start-content h3 {
-  font-size: 18px;
-  font-weight: 500;
-  margin: 0 0 12px;
-  color: var(--md-sys-color-on-surface, #1d1b20);
-}
-
 pre {
-  background: var(--md-sys-color-surface-variant, #e7e0ec);
+  background: var(--md-sys-color-surface-variant);
   padding: 16px;
   border-radius: 8px;
   overflow-x: auto;
@@ -216,35 +205,31 @@ pre {
 code {
   font-family: 'Courier New', monospace;
   font-size: 14px;
-  color: var(--md-sys-color-on-surface, #1d1b20);
+  color: var(--md-sys-color-on-surface);
 }
 
 .framework-badges {
-  display: flex;
   gap: 12px;
-  justify-content: center;
-  flex-wrap: wrap;
 }
 
 .framework-badge {
   padding: 8px 16px;
   border-radius: 16px;
-  background: var(--md-sys-color-tertiary-container, #ffd8e4);
-  color: var(--md-sys-color-on-tertiary-container, #31111d);
+  background: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
   font-size: 14px;
   font-weight: 500;
 }
 
 .resource-grid {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 16px;
 }
 
 .home-footer {
   text-align: center;
   padding: 48px 0 24px;
-  color: var(--md-sys-color-on-surface-variant, #49454f);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 .home-footer p {
@@ -260,20 +245,13 @@ code {
   .hero h1 {
     font-size: 36px;
   }
-
   .subtitle {
     font-size: 16px;
   }
-
   h2 {
     font-size: 28px;
   }
-
-  .feature-grid,
-  .component-list,
-  .architecture-content,
-  .quick-start-content,
-  .resource-grid {
+  .feature-grid,.component-list,.architecture-content,.quick-start-content,.resource-grid {
     grid-template-columns: 1fr;
   }
 }