Enhance dark mode support (#1682)

## Description:

Improved dark mode styling for #1681 

Old:

<img width="536" height="565" alt="image"
src="https://github.com/user-attachments/assets/8b7b5cc5-aa74-4e9b-a814-635c4373d5ab"
/>

New Look:
<img width="766" height="925" alt="image"
src="https://github.com/user-attachments/assets/acd00f2b-7248-4b63-b5c4-a345195d4414"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I have read and accepted the CLA agreement (only required once).

## Please put your Discord username so you can be contacted if a bug or
regression is found:

DISCORD_USERNAME
totalfailure

src/client/styles/components/button.css

@@ -55,3 +55,30 @@
     margin: 0 auto;
   }
 }
+
+.dark .c-button {
+  background: var(--primaryColorDark);
+  color: var(--fontColorLight);
+}
+
+.dark .c-button:hover,
+.dark .c-button:active,
+.dark .c-button:focus {
+  background: var(--primaryColorHoverDark);
+}
+
+.dark .c-button:disabled {
+  background: var(--primaryColorDisabledDark);
+  opacity: 0.7;
+}
+
+.dark .c-button--secondary {
+  background: var(--secondaryColorDark);
+  color: var(--fontColorDark);
+}
+
+.dark .c-button--secondary:hover,
+.dark .c-button--secondary:active,
+.dark .c-button--secondary:focus {
+  background: var(--secondaryColorHoverDark);
+}

src/client/styles/core/variables.css

@@ -16,4 +16,11 @@
   --secondaryColor: #dbeafe;
   --secondaryColorHover: #bfdbfe;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  --primaryColorDark: #3b82f6;
+  --primaryColorHoverDark: #2563eb;
+  --primaryColorDisabledDark: #4b5563;
+  --secondaryColorDark: #374151;
+  --secondaryColorHoverDark: #4b5563;
+  --fontColorDark: #f3f4f6;
 }