Refactors UI styles with typography and color updates

Applies JetBrains Mono font across key components
Updates color scheme to use consistent teal palette
Adjusts font sizes and weights for improved readability

Enhances visual design tokens and styling for drawer components

wwwroot/poc-detail-drawer.html

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Detail Drawer POC</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     /* Import design tokens fra calendar-base.css */
     :root {
@@ -30,6 +33,10 @@
       --b-color-teal: #00897b;
       --b-mix: #fff;
 
+      /* Checkout style tokens */
+      --color-teal: #00897b;
+      --font-mono: 'JetBrains Mono', monospace;
+
       /* Shadows */
       --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
       --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -229,12 +236,12 @@
 
     swp-section-label {
       display: block;
-      font-size: 13px;
+      font-size: 11px;
-      font-weight: 500;
+      font-weight: 400;
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 8px;
+      margin-bottom: 10px;
     }
 
     /* Event time/date */
@@ -286,7 +293,7 @@
     }
 
     swp-contact-item a {
-      color: var(--color-primary);
+      color: var(--color-teal);
       text-decoration: none;
     }
 
@@ -377,11 +384,16 @@
 
     swp-service-details {
       display: block;
-      font-size: 14px;
+      font-size: 13px;
       color: var(--color-text-secondary);
       margin-top: 2px;
     }
 
+    swp-service-price {
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
     swp-service-resource {
       display: block;
       font-size: 13px;
@@ -407,6 +419,7 @@
     }
 
     swp-total-amount {
+      font-family: var(--font-mono);
       font-size: 20px;
       font-weight: 600;
     }
@@ -438,7 +451,7 @@
 
     swp-journal-link:hover {
       background: var(--color-background-hover);
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
     }
 
     swp-journal-icon {
@@ -491,7 +504,7 @@
 
     swp-journal-link.no-journal:hover {
       background: var(--color-surface);
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
       border-style: solid;
     }
 
@@ -517,6 +530,10 @@
       color: var(--color-text);
     }
 
+    swp-stat-value.mono {
+      font-family: var(--font-mono);
+    }
+
     swp-stat-label {
       font-size: 11px;
       color: var(--color-text-secondary);
@@ -545,13 +562,13 @@
     }
 
     swp-footer-btn.btn-primary {
-      background: var(--color-primary);
+      background: var(--color-teal);
       color: white;
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
     }
 
     swp-footer-btn.btn-primary:hover {
-      background: #1565c0;
+      background: #00796b;
     }
 
     swp-footer-btn.btn-secondary {
@@ -565,8 +582,10 @@
 
     /* Footer states based on booking status */
     swp-drawer-footer.status-paid swp-footer-btn.btn-primary {
-      background: var(--b-color-green);
+      background: var(--color-teal);
-      border-color: var(--b-color-green);
+      border-color: var(--color-teal);
+      opacity: 0.7;
+      cursor: default;
     }
 
     swp-drawer-footer.status-cancelled swp-footer-btn.btn-primary,
@@ -819,12 +838,12 @@
         <swp-services-list>
           <swp-service-item>
             <swp-service-name>Klipning og styling</swp-service-name>
-            <swp-service-details>60 min · 500 DKK</swp-service-details>
+            <swp-service-details>60 min · <swp-service-price>500 kr</swp-service-price></swp-service-details>
             <swp-service-resource>Emma (EMP001)</swp-service-resource>
           </swp-service-item>
           <swp-service-item>
             <swp-service-name>Bundfarve</swp-service-name>
-            <swp-service-details>90 min · 800 DKK</swp-service-details>
+            <swp-service-details>90 min · <swp-service-price>800 kr</swp-service-price></swp-service-details>
             <swp-service-resource>Emma (EMP001)</swp-service-resource>
           </swp-service-item>
         </swp-services-list>
@@ -834,7 +853,7 @@
       <swp-drawer-section>
         <swp-total-row>
           <swp-total-label>Total</swp-total-label>
-          <swp-total-amount>1.300 DKK</swp-total-amount>
+          <swp-total-amount>1.300 kr</swp-total-amount>
         </swp-total-row>
       </swp-drawer-section>
 
@@ -861,11 +880,11 @@
         <swp-section-label>Kundehistorik</swp-section-label>
         <swp-stats-grid>
           <swp-stat-item>
-            <swp-stat-value>14</swp-stat-value>
+            <swp-stat-value class="mono">14</swp-stat-value>
             <swp-stat-label>Besøg</swp-stat-label>
           </swp-stat-item>
           <swp-stat-item>
-            <swp-stat-value>8.450</swp-stat-value>
+            <swp-stat-value class="mono">8.450 kr</swp-stat-value>
             <swp-stat-label>Omsætning</swp-stat-label>
           </swp-stat-item>
           <swp-stat-item>