style(cards): make --card-border a single base token (muted, inherited by all themes)

public/css/main.css

@@ -50,6 +50,7 @@ html {
   --icon-nav-overflow: 1.125rem;
   --icon-contact: 1.5rem;
   --icon-contact-meta: 1.125rem;
+  --card-border: hsla(210, 10%, 55%, 0.2);
 }
 
 html[data-theme="dark"] {
@@ -3289,7 +3290,7 @@ body.home .section__title {
   width: 100%;
   min-height: 100%;
   height: 100%;
-  border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
+  border: 1px solid var(--card-border);
   border-radius: var(--radius-card);
   background: var(--surface);
   color: inherit;
@@ -3299,7 +3300,7 @@ body.home .section__title {
 
 .mp-card:hover,
 .mp-card:focus-visible {
-  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--card-border));
 }
 
 .mp-card--link {
@@ -3745,7 +3746,7 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
   height: auto;
   padding: 0;
   border-radius: var(--radius-card);
-  border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
+  border: 1px solid var(--card-border);
   background: color-mix(in srgb, var(--surface) 94%, transparent);
   color: inherit;
   text-decoration: none;
@@ -3755,7 +3756,7 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
 
 .portfolio-card:hover,
 .portfolio-card:focus-visible {
-  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border));
 }
 
 .portfolio-card:focus-visible {
@@ -4461,7 +4462,7 @@ html[data-radius="strong"] .skill-task-card__solution {
   width: 100%;
   min-height: 100%;
   padding: 1rem 2.35rem 1rem 1.1rem;
-  border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
+  border: 1px solid var(--card-border);
   border-radius: var(--radius-card);
   background: var(--surface);
   color: inherit;
@@ -4510,7 +4511,7 @@ html[data-radius="strong"] .skill-task-card__solution {
 
 .contact-card:hover,
 .contact-card:focus-visible {
-  border-color: color-mix(in srgb, var(--contact-brand) 50%, transparent);
+  border-color: color-mix(in srgb, var(--contact-brand) 58%, var(--card-border));
   transform: translateY(-5px);
   z-index: 2;
   box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--contact-brand) 28%, transparent),