chore: update

frontend-prep/src/styles/PageLayout.css

@@ -11,7 +11,7 @@
 }
 
 .page-container h1 {
-  color: white;
+  color: var(--text);
   font-size: clamp(1.8rem, 6vw, 2.5rem);
   margin-bottom: clamp(1.5rem, 4vh, 2rem);
   text-align: center;
@@ -29,9 +29,9 @@
 }
 
 .page-link {
-  background-color: #1a1a1a;
-  border: 2px solid white;
-  color: white;
+  background-color: var(--surface);
+  border: 2px solid var(--text);
+  color: var(--text);
   padding: clamp(1rem, 3vw, 1.5rem);
   text-decoration: none;
   border-radius: 12px;
@@ -45,16 +45,16 @@
 
 .page-link:active {
   transform: scale(0.97);
-  background-color: #2a2a2a;
+  background-color: var(--surface-2);
 }
 
 .back-link {
-  color: white;
+  color: var(--text);
   text-decoration: none;
   margin-top: clamp(1rem, 3vh, 2rem);
   font-size: clamp(0.9rem, 3vw, 1.1rem);
   padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
-  border: 1.5px solid white;
+  border: 1.5px solid var(--text);
   border-radius: 8px;
   transition: all 0.2s ease;
   touch-action: manipulation;
@@ -62,19 +62,19 @@
 }
 
 .back-link:active {
-  background-color: #1a1a1a;
+  background-color: var(--surface);
   transform: scale(0.95);
 }
 
 .content {
-  color: white;
+  color: var(--text);
   font-size: clamp(1rem, 3.5vw, 1.2rem);
   text-align: center;
   width: 100%;
   max-width: 500px;
   padding: clamp(1.5rem, 4vw, 2rem);
-  background-color: #1a1a1a;
-  border: 2px solid white;
+  background-color: var(--surface);
+  border: 2px solid var(--text);
   border-radius: 15px;
   margin-bottom: clamp(1.5rem, 4vh, 2rem);
   box-sizing: border-box;
@@ -111,9 +111,9 @@
 @media (hover: none) {
   .page-link:hover {
     transform: none;
-    background-color: #1a1a1a;
+    background-color: var(--surface);
   }
-  
+
   .back-link:hover {
     background-color: transparent;
   }