Style: Design System use across more components (#6705)

## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/platform/cloud/onboarding/CloudAuthTimeoutView.vue

@@ -9,9 +9,7 @@
       </p>
 
       <!-- Troubleshooting Section -->
-      <div
-        class="mb-4 rounded bg-surface-700 px-3 py-2 text-left dark-theme:bg-surface-800"
-      >
+      <div class="mb-4 rounded bg-secondary-background px-3 py-2 text-left">
         <h3 class="mb-2 text-sm font-semibold text-text-primary">
           {{ $t('cloudOnboarding.authTimeout.troubleshooting') }}
         </h3>
@@ -30,7 +28,7 @@
       <!-- Technical Details (Collapsible) -->
       <div v-if="errorMessage" class="mb-4 text-left">
         <button
-          class="flex w-full items-center justify-between rounded bg-surface-600 px-4 py-2 text-sm text-muted transition-colors hover:bg-surface-500 dark-theme:bg-surface-700 dark-theme:hover:bg-surface-600"
+          class="flex w-full items-center justify-between rounded bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
           @click="showTechnicalDetails = !showTechnicalDetails"
         >
           <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -43,7 +41,7 @@
         </button>
         <div
           v-if="showTechnicalDetails"
-          class="mt-2 rounded bg-surface-800 p-4 font-mono text-xs text-muted break-all dark-theme:bg-surface-900"
+          class="mt-2 rounded border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
         >
           {{ errorMessage }}
         </div>

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -90,7 +90,7 @@
                   :class="
                     cn(
                       'relative flex flex-col gap-6 rounded-2xl p-5',
-                      'bg-smoke-100 dark-theme:bg-charcoal-600'
+                      'bg-modal-panel-background'
                     )
                   "
                 >