fix: dynamic colors for checkbox and radio

frappe/public/scss/common/css_variables.scss

@@ -249,6 +249,7 @@
 	--checkbox-right-margin: var(--margin-xs);
 	--checkbox-size: 14px;
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
+	--checkbox-gradient: linear-gradient(180deg, #4AC3F8 -124.51%, var(--primary) 100%);
 
 	--right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 	--left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'></path></svg>");

frappe/public/scss/common/global.scss

@@ -54,7 +54,7 @@ input[type="radio"] {
 	}
 
 	&:checked::before {
-		background-color: var(--blue-500);
+		background-color: var(--primary);
 		border-radius: 16px;
 		box-shadow: inset 0 0 0 2px white;
 	}
@@ -85,8 +85,8 @@ input[type="checkbox"] {
 	}
 
 	&:checked {
-		background-color: var(--blue-500);
-		background-image: $check-icon, linear-gradient(180deg, #4AC3F8 -124.51%, #2490EF 100%);
+		background-color: var(--primary);
+		background-image: $check-icon, var(--checkbox-gradient);
 		background-size: 57%, 100%;
 		box-shadow: none;
 		border: none;