fix: polish blog share button styles

Author: Copilot

src/components/SocialShare/SocialShare.css

@@ -1,4 +1,6 @@
 .blog-post-share-section {
+  --share-btn-shadow: rgba(15, 23, 42, 0.06);
+  --share-btn-shadow-hover: rgba(15, 23, 42, 0.1);
   margin-top: 2rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--ifm-color-emphasis-300);
@@ -26,7 +28,6 @@
   height: 3.25rem;
   border-radius: 999px;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border: 1px solid color-mix(in srgb, var(--ifm-color-primary) 18%, var(--ifm-color-emphasis-300));
   background: var(--ifm-background-surface-color);
   color: var(--ifm-font-color-base) !important;
   text-decoration: none !important;
@@ -35,7 +36,7 @@
     box-shadow 0.2s ease,
     border-color 0.2s ease,
     color 0.2s ease;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
+  box-shadow: 0 12px 30px var(--share-btn-shadow);
   cursor: pointer;
 }
 
@@ -46,7 +47,7 @@
 
 .share-btn-circle:hover {
   transform: translateY(-2px);
-  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
+  box-shadow: 0 18px 36px var(--share-btn-shadow-hover);
   text-decoration: none;
 }
 
@@ -81,6 +82,16 @@
   color: var(--ifm-color-danger) !important;
 }
 
+@supports (color: color-mix(in srgb, white 50%, black)) {
+  .share-btn-circle {
+    border-color: color-mix(
+      in srgb,
+      var(--ifm-color-primary) 18%,
+      var(--ifm-color-emphasis-300)
+    );
+  }
+}
+
 @media (max-width: 576px) {
   .share-buttons-row {
     gap: 0.75rem;