fix(css): reuse css vars

src/client/theme-default/components/BuySellAds.vue

@@ -67,7 +67,7 @@ function load() {
 
 .bsa-cpc {
   border-radius: 6px;
-  background-color: #f8f8f8;
+  background-color: var(--c-bg-accent);
 }
 
 .bsa-cpc ::v-deep(a._default_) {

src/client/theme-default/components/CarbonAds.vue

@@ -26,7 +26,7 @@ onMounted(() => {
   margin: 0 auto;
   max-width: 280px;
   font-size: 0.75rem;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: var(--c-bg-accent);
   min-height: 105.38px; /* avoid layout shift on mobile */
 }
 

src/client/theme-default/components/HomeHero.vue

@@ -132,20 +132,20 @@ const hasAltAction = computed(() => data.value.altActionLink && data.value.altAc
   line-height: 44px;
   font-size: 1rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--c-bg);
   background-color: var(--c-brand);
   border: 2px solid var(--c-brand);
   transition: background-color 0.1s ease;
 }
 
 .action.alt :deep(.item) {
-  background-color: #fff;
+  background-color: var(--c-bg);
   color: var(--c-brand);
 }
 
 .action :deep(.item:hover) {
   text-decoration: none;
-  color: #ffffff;
+  color: var(--c-bg);
   background-color: var(--c-brand-light);
 }
 

src/client/theme-default/components/NavBar.vue

@@ -36,7 +36,7 @@ defineEmit(['toggle'])
   border-bottom: 1px solid var(--c-divider);
   padding: .7rem 1.5rem .7rem 4rem;
   height: var(--header-height);
-  background-color: #ffffff;
+  background-color: var(--c-bg);
 }
 
 @media (min-width: 720px) {

src/client/theme-default/styles/custom-blocks.css

@@ -9,7 +9,7 @@
 
 .custom-block.tip {
   background-color: #f3f5f7;
-  border-color: #42b983;
+  border-color: var(--c-brand);
 }
 
 .custom-block.warning {

src/client/theme-default/styles/vars.css

@@ -1,15 +1,15 @@
 /** Base Styles */
 :root {
-
   /**
    * Colors
    * --------------------------------------------------------------------- */
 
   --c-white: #ffffff;
+  --c-white-dark: #f8f8f8;
   --c-black: #000000;
 
-  --c-divider-light: rgba(60, 60, 67, .12);
+  --c-divider-light: rgba(60, 60, 67, 0.12);
-  --c-divider-dark: rgba(84, 84, 88, .48);
+  --c-divider-dark: rgba(84, 84, 88, 0.48);
 
   --c-text-light-1: #2c3e50;
   --c-text-light-2: #476582;
@@ -54,7 +54,6 @@
 
 /** Fallback Styles */
 :root {
-
   --c-divider: var(--c-divider-light);
 
   --c-text: var(--c-text-light-1);
@@ -62,11 +61,11 @@
   --c-text-lighter: var(--c-text-light-3);
 
   --c-bg: var(--c-white);
+  --c-bg-accent: var(--c-white-dark);
 
   --code-line-height: 24px;
   --code-font-family: var(--font-family-mono);
   --code-font-size: 14px;
-  --code-inline-bg-color: rgba(27, 31, 35, .05);
+  --code-inline-bg-color: rgba(27, 31, 35, 0.05);
   --code-bg-color: #282c34;
-
 }