style: styles file added

src/app/pages/welcome/welcome.component.css

@@ -2,98 +2,99 @@
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 2rem;
+  padding: var(--size-xl);
 }
 
 .welcome-card {
   width: min(900px, 100%);
-  border-radius: 12px;
-  border: 2px solid #5A2C28;
-  background: #F3C8A0;
-  padding: 2rem;
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-main);
+  padding: var(--size-xl-padding);
+  box-shadow: var(--shadow-md);
 }
 
 h1 {
-  margin: 0 0 0.25rem;
-  color: #5A2C28;
+  margin: 0 0 var(--size-xs);
+  color: var(--color-text-primary);
+  font-size: var(--heading-h1);
 }
 
 p {
-  margin: 0 0 1.25rem;
+  margin: 0 0 var(--size-lg);
 }
 
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
+  gap: var(--size-xl-gap);
 }
 
 .mode {
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: 1rem;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
   text-align: left;
   display: grid;
-  gap: 0.25rem;
+  gap: var(--size-xs);
 }
 
 .mode span {
   font-size: 1.15rem;
-  color: #5A2C28;
+  color: var(--color-text-primary);
 }
 
 .mode small {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   opacity: 0.9;
 }
 
 .mode-active {
-  background: #B9DAD1;
+  background: var(--color-secondary-mint);
   cursor: pointer;
 }
 
 .mode-active:hover:enabled {
-  background: #B9C2DA;
+  background: var(--color-secondary-blue);
 }
 
 .mode-disabled {
-  background: #E1EAA9;
+  background: var(--color-bg-card);
   opacity: 0.75;
 }
 
 .error {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-weight: 700;
-  margin-top: 1rem;
+  margin-top: var(--size-xl);
 }
 
 @media (max-width: 768px) {
   .welcome-shell {
-    padding: 1rem;
+    padding: var(--size-lg);
   }
 
   .welcome-card {
-    padding: 1.5rem;
+    padding: var(--size-xl);
   }
 
   h1 {
-    font-size: 1.5rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   p {
     font-size: 0.875rem;
-    margin: 0 0 1rem;
+    margin: 0 0 var(--size-lg);
   }
 
   .mode-grid {
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 0.75rem;
+    gap: var(--size-md-gap);
   }
 
   .mode {
-    padding: 0.75rem;
-    gap: 0.15rem;
+    padding: var(--size-md-padding);
+    gap: var(--size-xs-gap);
   }
 
   .mode span {
@@ -111,22 +112,22 @@ p {
 
 @media (max-width: 480px) {
   .welcome-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .welcome-card {
-    padding: 1rem;
-    border-radius: 8px;
+    padding: var(--size-lg-padding);
+    border-radius: var(--border-radius-md);
   }
 
   h1 {
-    font-size: 1.25rem;
-    margin: 0 0 0.15rem;
+    font-size: var(--heading-h1-small);
+    margin: 0 0 var(--size-xs);
   }
 
   p {
     font-size: 0.8rem;
-    margin: 0 0 0.75rem;
+    margin: 0 0 var(--size-md);
   }
 
   .mode-grid {
@@ -134,7 +135,7 @@ p {
   }
 
   .mode {
-    padding: 0.65rem;
+    padding: var(--size-md-padding);
   }
 
   .mode span {