refactor(src/shared/styles): replace hardcoded CSS values with design token variables

Introduce consistent design tokens for radii and colors, replacing alpha() and hardcoded values with theme variables for easier theming and maintenance.

- New Features:   - Add CSS variable usage for radii (var(--radius-*)) and color tokens (@border-subtle, @text-main, @accent)
- Enhancements:
  - Replace hardcoded border, radius, and color definitions with variable references
  - Align styling with the project's theme system
- Bug Fixes:
  - No bug fixes included

src/shared/styles/about.css

@@ -4,7 +4,7 @@
   box-shadow:
     inset 0 -0.5px 0 0.5px alpha(#555, 0.7),
     inset 0 0.5px 0 0.5px alpha(#777, 0.7);
-  border: 1px solid alpha(#111, 0.3);
+  border: 1px solid @border-subtle;
   border-top: none;
   border-radius: 1.25rem;
   padding: 2rem;
@@ -12,7 +12,7 @@
 
 #about-options {
   background-color: alpha(#333, 0.9);
-  border-radius: 15px;
+  border-radius: var(--radius-md);
   padding: 2rem;
 }
 
@@ -61,7 +61,7 @@
 
 #more-info-button {
   background-color: #888888;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all 200ms ease-in-out;
@@ -74,5 +74,5 @@
   font-size: 12px;
   margin: 0px;
   font-weight: 400;
-  color: #fff;
+  color: @text-main;
 }