feat: Themes added, 4 themes available (3 dark, 1 light)

frontend/src/components/qsl/SendEQSLModal.tsx

@@ -75,13 +75,13 @@ export function SendEQSLModal({ open, qsoId, onClose, onOpenDesigner }: Props) {
       <DialogContent className="max-w-[820px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Mail className="size-5 text-rose-600" /> Send OpsLog QSL by e-mail
+            <Mail className="size-5 text-danger" /> Send OpsLog QSL by e-mail
           </DialogTitle>
         </DialogHeader>
 
         <div className="space-y-3 px-6 py-5">
         {error && (
-          <div className="rounded border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">{error}</div>
+          <div className="rounded border border-destructive bg-destructive-muted px-3 py-1.5 text-sm text-destructive-muted-foreground">{error}</div>
         )}
 
         {open && !templateId && !error && (
@@ -107,7 +107,7 @@ export function SendEQSLModal({ open, qsoId, onClose, onOpenDesigner }: Props) {
 
         <DialogFooter>
           {sent ? (
-            <div className="flex items-center gap-2 text-sm text-emerald-600">
+            <div className="flex items-center gap-2 text-sm text-success">
               <CheckCircle2 className="size-4" /> OpsLog QSL sent.
               <Button variant="outline" size="sm" onClick={onClose}>Close</Button>
             </div>