Adds authentication and pricing pages for user onboarding

Introduces comprehensive user authentication flow with plan selection and registration

Includes:
- Pricing page with plan details and selection
- Payment page with plan summary and card information
- Signup page for different plan tiers
- Shared authentication layout and design system improvements

Enhances user onboarding experience with clear plan information and streamlined signup process

PlanTempus.Application/wwwroot/css/design-system.css

@@ -1,163 +1,104 @@
 /**
- * SWP Design System - CSS Variables
+ * SWP Design System
  *
- * Dette er den centrale definition af alle design tokens.
- * Alle farver, fonts og layout-variabler defineres her.
+ * Entry point for all design tokens and base styles.
+ * Import this file in your layout to get the complete design system.
  */
 
+@import url('design-tokens.css');
+
 /* ===========================================
-   COLOR PALETTE - Light Mode (Default)
+   BASE RESETS & DEFAULTS
    =========================================== */
-:root {
-  /* Surfaces */
-  --color-surface: #fff;
-  --color-background: #f5f5f5;
-  --color-background-hover: #f0f0f0;
-  --color-background-alt: #fafafa;
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-  /* Borders */
-  --color-border: #e0e0e0;
-  --color-border-light: #f0f0f0;
+html {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-  /* Text */
-  --color-text: #333;
-  --color-text-secondary: #666;
-  --color-text-muted: #999;
-
-  /* Brand Colors */
-  --color-teal: #00897b;
-  --color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
-
-  /* Semantic Colors */
-  --color-blue: #1976d2;
-  --color-green: #43a047;
-  --color-amber: #f59e0b;
-  --color-red: #e53935;
-  --color-purple: #8b5cf6;
+body {
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background-color: var(--color-background);
 }
 
 /* ===========================================
-   COLOR PALETTE - Dark Mode (System)
+   TYPOGRAPHY DEFAULTS
    =========================================== */
-@media (prefers-color-scheme: dark) {
-  :root:not(.light-mode) {
-    --color-surface: #1e1e1e;
-    --color-background: #121212;
-    --color-background-hover: #2a2a2a;
-    --color-background-alt: #1a1a1a;
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
 
-    --color-border: #333;
-    --color-border-light: #2a2a2a;
+h1 { font-size: var(--font-size-3xl); }
+h2 { font-size: var(--font-size-2xl); }
+h3 { font-size: var(--font-size-xl); }
+h4 { font-size: var(--font-size-lg); }
+h5 { font-size: var(--font-size-base); }
+h6 { font-size: var(--font-size-md); }
 
-    --color-text: #e0e0e0;
-    --color-text-secondary: #999;
-    --color-text-muted: #666;
+p {
+  margin-bottom: var(--spacing-8);
+  color: var(--color-text-secondary);
+}
 
-    --color-teal: #26a69a;
-    --color-blue: #42a5f5;
-    --color-green: #66bb6a;
-    --color-amber: #ffb74d;
-    --color-red: #ef5350;
-    --color-purple: #a78bfa;
-  }
+a {
+  color: var(--color-teal);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary);
 }
 
 /* ===========================================
-   COLOR PALETTE - Dark Mode (Manual)
+   FOCUS STATES
    =========================================== */
-:root.dark-mode {
-  --color-surface: #1e1e1e;
-  --color-background: #121212;
-  --color-background-hover: #2a2a2a;
-  --color-background-alt: #1a1a1a;
-
-  --color-border: #333;
-  --color-border-light: #2a2a2a;
-
-  --color-text: #e0e0e0;
-  --color-text-secondary: #999;
-  --color-text-muted: #666;
-
-  --color-teal: #26a69a;
-  --color-blue: #42a5f5;
-  --color-green: #66bb6a;
-  --color-amber: #ffb74d;
-  --color-red: #ef5350;
-  --color-purple: #a78bfa;
+:focus-visible {
+  outline: 2px solid var(--color-teal);
+  outline-offset: 2px;
 }
 
 /* ===========================================
-   TYPOGRAPHY
+   SCROLLBAR STYLING
    =========================================== */
-:root {
-  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 
-  /* Font Sizes */
-  --font-size-xs: 11px;
-  --font-size-sm: 12px;
-  --font-size-base: 14px;
-  --font-size-md: 13px;
-  --font-size-lg: 16px;
-  --font-size-xl: 22px;
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+}
 
-  /* Line Heights */
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) var(--color-background);
 }
 
 /* ===========================================
-   SPACING
+   SELECTION
    =========================================== */
-:root {
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-}
-
-/* ===========================================
-   LAYOUT
-   =========================================== */
-:root {
-  --side-menu-width: 240px;
-  --side-menu-width-collapsed: 64px;
-  --topbar-height: 56px;
-  --page-max-width: 1400px;
-  --border-radius: 6px;
-  --border-radius-lg: 8px;
-}
-
-/* ===========================================
-   TRANSITIONS
-   =========================================== */
-:root {
-  --transition-fast: 150ms ease;
-  --transition-normal: 200ms ease;
-  --transition-slow: 300ms ease;
-}
-
-/* ===========================================
-   Z-INDEX LAYERS
-   =========================================== */
-:root {
-  --z-dropdown: 100;
-  --z-sticky: 200;
-  --z-overlay: 900;
-  --z-drawer: 1000;
-  --z-modal: 1100;
-  --z-tooltip: 1200;
-}
-
-/* ===========================================
-   SHADOWS
-   =========================================== */
-:root {
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+::selection {
+  background: color-mix(in srgb, var(--color-teal) 30%, transparent);
+  color: var(--color-text);
 }

PlanTempus.Application/wwwroot/css/design-tokens.css

@@ -0,0 +1,311 @@
+/**
+ * SWP Design System - Unified Design Tokens
+ *
+ * Konsolideret fra Calendar POC og PlanTempus Application
+ * Brug disse tokens konsistent på tværs af alle projekter.
+ */
+
+/* ===========================================
+   COLOR PALETTE - Light Mode (Default)
+   =========================================== */
+:root {
+  /* -------- Surfaces & Backgrounds -------- */
+  --color-surface: #fff;
+  --color-background: #f5f5f5;
+  --color-background-hover: #f0f0f0;
+  --color-background-alt: #fafafa;
+
+  /* -------- Borders -------- */
+  --color-border: #e0e0e0;
+  --color-border-light: #f0f0f0;
+
+  /* -------- Text -------- */
+  --color-text: #333;
+  --color-text-secondary: #666;
+  --color-text-muted: #999;
+
+  /* -------- Primary Brand -------- */
+  --color-primary: #1976d2;
+  --color-teal: #00897b;
+  --color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
+
+  /* -------- Semantic / Status -------- */
+  --color-blue: #1976d2;
+  --color-green: #43a047;
+  --color-amber: #f59e0b;
+  --color-red: #e53935;
+  --color-purple: #8b5cf6;
+
+  /* -------- Team/Resource -------- */
+  --color-team-bg: #e3f2fd;
+  --color-team-text: #1565c0;
+
+  /* -------- Grid Lines -------- */
+  --color-hour-line: rgba(0, 0, 0, 0.2);
+  --color-grid-line-light: rgba(0, 0, 0, 0.05);
+  --color-unavailable: rgba(0, 0, 0, 0.02);
+}
+
+/* ===========================================
+   COLOR PALETTE - Dark Mode (System)
+   =========================================== */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light-mode) {
+    --color-surface: #1e1e1e;
+    --color-background: #121212;
+    --color-background-hover: #2a2a2a;
+    --color-background-alt: #1a1a1a;
+
+    --color-border: #333;
+    --color-border-light: #2a2a2a;
+
+    --color-text: #e0e0e0;
+    --color-text-secondary: #999;
+    --color-text-muted: #666;
+
+    --color-teal: #26a69a;
+    --color-blue: #42a5f5;
+    --color-green: #66bb6a;
+    --color-amber: #ffb74d;
+    --color-red: #ef5350;
+    --color-purple: #a78bfa;
+  }
+}
+
+/* ===========================================
+   COLOR PALETTE - Dark Mode (Manual Toggle)
+   =========================================== */
+:root.dark-mode {
+  --color-surface: #1e1e1e;
+  --color-background: #121212;
+  --color-background-hover: #2a2a2a;
+  --color-background-alt: #1a1a1a;
+
+  --color-border: #333;
+  --color-border-light: #2a2a2a;
+
+  --color-text: #e0e0e0;
+  --color-text-secondary: #999;
+  --color-text-muted: #666;
+
+  --color-teal: #26a69a;
+  --color-blue: #42a5f5;
+  --color-green: #66bb6a;
+  --color-amber: #ffb74d;
+  --color-red: #ef5350;
+  --color-purple: #a78bfa;
+}
+
+/* ===========================================
+   EVENT COLOR PALETTE (18 Colors)
+   =========================================== */
+:root {
+  --b-color-red: #e53935;
+  --b-color-pink: #d81b60;
+  --b-color-magenta: #c200c2;
+  --b-color-purple: #8e24aa;
+  --b-color-violet: #5e35b1;
+  --b-color-deep-purple: #4527a0;
+  --b-color-indigo: #3949ab;
+  --b-color-blue: #1e88e5;
+  --b-color-light-blue: #03a9f4;
+  --b-color-cyan: #3bc9db;
+  --b-color-teal: #00897b;
+  --b-color-green: #43a047;
+  --b-color-light-green: #8bc34a;
+  --b-color-lime: #c0ca33;
+  --b-color-yellow: #fdd835;
+  --b-color-amber: #ffb300;
+  --b-color-orange: #fb8c00;
+  --b-color-deep-orange: #f4511e;
+
+  /* For color-mix calculations */
+  --b-mix: #fff;
+}
+
+/* ===========================================
+   TYPOGRAPHY
+   =========================================== */
+:root {
+  /* -------- Font Families -------- */
+  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* -------- Font Sizes -------- */
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-md: 13px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 22px;
+
+  /* -------- Font Weights -------- */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* -------- Line Heights -------- */
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+}
+
+/* ===========================================
+   SPACING
+   =========================================== */
+:root {
+  --spacing-0: 0;
+  --spacing-1: 2px;
+  --spacing-2: 4px;
+  --spacing-3: 6px;
+  --spacing-4: 8px;
+  --spacing-5: 10px;
+  --spacing-6: 12px;
+  --spacing-7: 14px;
+  --spacing-8: 16px;
+  --spacing-10: 20px;
+  --spacing-12: 24px;
+  --spacing-16: 32px;
+  --spacing-24: 48px;
+}
+
+/* ===========================================
+   LAYOUT
+   =========================================== */
+:root {
+  /* -------- Sidebars & Navigation -------- */
+  --side-menu-width: 240px;
+  --side-menu-width-collapsed: 64px;
+  --topbar-height: 56px;
+
+  /* -------- Content Containers -------- */
+  --page-max-width: 1400px;
+  --container-max-width-sm: 900px;
+  --container-max-width-md: 1200px;
+  --container-max-width-lg: 1400px;
+
+  /* -------- Calendar Grid -------- */
+  --hour-height: 64px;
+  --time-axis-width: 60px;
+  --grid-columns: 7;
+  --day-column-min-width: 200px;
+  --day-start-hour: 6;
+  --day-end-hour: 18;
+  --header-height: 70px;
+}
+
+/* ===========================================
+   BORDERS & RADIUS
+   =========================================== */
+:root {
+  /* -------- Border Radius -------- */
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-2xl: 12px;
+  --radius-pill: 20px;
+  --radius-full: 50%;
+
+  /* Legacy aliases */
+  --border-radius: 6px;
+  --border-radius-lg: 8px;
+}
+
+/* ===========================================
+   SHADOWS
+   =========================================== */
+:root {
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.15);
+
+  /* Specific use-cases */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-drawer: 0 4px 20px rgba(0, 0, 0, 0.1);
+  --shadow-dragging: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* ===========================================
+   TRANSITIONS
+   =========================================== */
+:root {
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+
+  /* Specific timing functions */
+  --ease-out: ease-out;
+  --ease-in-out: ease-in-out;
+  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===========================================
+   Z-INDEX LAYERS
+   =========================================== */
+:root {
+  --z-base: 1;
+  --z-grid: 2;
+  --z-event: 10;
+  --z-event-hover: 20;
+  --z-resize-handle: 25;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 900;
+  --z-drawer: 1000;
+  --z-modal: 1100;
+  --z-tooltip: 1200;
+  --z-dragging: 999999;
+}
+
+/* ===========================================
+   BREAKPOINTS (as CSS custom properties)
+   For reference - use @media queries in CSS
+   =========================================== */
+/*
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1100px;
+  --breakpoint-2xl: 1400px;
+*/
+
+/* ===========================================
+   UTILITY CLASSES - Event Colors
+   =========================================== */
+.is-red { --b-primary: var(--b-color-red); }
+.is-pink { --b-primary: var(--b-color-pink); }
+.is-magenta { --b-primary: var(--b-color-magenta); }
+.is-purple { --b-primary: var(--b-color-purple); }
+.is-violet { --b-primary: var(--b-color-violet); }
+.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
+.is-indigo { --b-primary: var(--b-color-indigo); }
+.is-blue { --b-primary: var(--b-color-blue); }
+.is-light-blue { --b-primary: var(--b-color-light-blue); }
+.is-cyan { --b-primary: var(--b-color-cyan); }
+.is-teal { --b-primary: var(--b-color-teal); }
+.is-green { --b-primary: var(--b-color-green); }
+.is-light-green { --b-primary: var(--b-color-light-green); }
+.is-lime { --b-primary: var(--b-color-lime); }
+.is-yellow { --b-primary: var(--b-color-yellow); }
+.is-amber { --b-primary: var(--b-color-amber); }
+.is-orange { --b-primary: var(--b-color-orange); }
+.is-deep-orange { --b-primary: var(--b-color-deep-orange); }
+
+/* ===========================================
+   UTILITY CLASSES - Status Badges
+   =========================================== */
+.status-confirmed { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
+.status-pending { background: color-mix(in srgb, var(--color-amber) 15%, transparent); color: var(--color-amber); }
+.status-inprogress { background: color-mix(in srgb, var(--color-blue) 15%, transparent); color: var(--color-blue); }
+.status-error { background: color-mix(in srgb, var(--color-red) 15%, transparent); color: var(--color-red); }
+.status-active { background: color-mix(in srgb, var(--color-green) 15%, transparent); color: var(--color-green); }
+.status-inactive { background: var(--color-background); color: var(--color-text-muted); }

PlanTempus.Application/wwwroot/css/drawers.css

@@ -101,11 +101,11 @@ swp-profile-section {
 swp-profile-avatar-large {
   width: 64px;
   height: 64px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background: var(--color-teal);
   color: white;
-  font-size: 24px;
-  font-weight: 600;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -114,7 +114,7 @@ swp-profile-avatar-large {
 
 swp-profile-name-large {
   font-size: var(--font-size-lg);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   margin-bottom: var(--spacing-1);
 }

PlanTempus.Application/wwwroot/css/page.css

@@ -25,8 +25,8 @@ swp-page-header {
 }
 
 swp-page-title h1 {
-  font-size: 24px;
-  font-weight: 600;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   margin-bottom: var(--spacing-1);
 }
@@ -65,12 +65,12 @@ swp-card-title {
   align-items: center;
   gap: var(--spacing-2);
   font-size: var(--font-size-base);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--color-text);
 }
 
 swp-card-title i {
-  font-size: 20px;
+  font-size: var(--font-size-xl);
   color: var(--color-text-secondary);
 }
 
@@ -127,12 +127,12 @@ swp-ai-header {
   gap: var(--spacing-2);
   margin-bottom: var(--spacing-2);
   font-size: var(--font-size-sm);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   color: var(--color-purple);
 }
 
 swp-ai-header i {
-  font-size: 16px;
+  font-size: var(--font-size-base);
 }
 
 swp-ai-text {
@@ -172,7 +172,7 @@ swp-quick-action-btn:hover {
 }
 
 swp-quick-action-btn i {
-  font-size: 18px;
+  font-size: var(--font-size-lg);
 }
 
 /* ===========================================

PlanTempus.Application/wwwroot/css/sidebar.css

@@ -23,7 +23,7 @@ swp-side-menu {
 swp-side-menu-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-5);
   height: var(--topbar-height);
   padding: 0 var(--spacing-4);
   border-bottom: 1px solid var(--color-border);
@@ -100,7 +100,7 @@ a[is="swp-side-menu-item"] {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
-  padding: 10px var(--spacing-4);
+  padding: var(--spacing-5) var(--spacing-4);
   color: var(--color-text);
   cursor: pointer;
   transition: all var(--transition-fast);
@@ -146,7 +146,7 @@ swp-side-menu-action {
   align-items: center;
   justify-content: center;
   gap: var(--spacing-2);
-  padding: 10px;
+  padding: var(--spacing-5);
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
   background: transparent;

PlanTempus.Application/wwwroot/css/stats.css

@@ -49,8 +49,8 @@ swp-stat-box {
    =========================================== */
 swp-stat-value {
   display: block;
-  font-size: 22px;
-  font-weight: 600;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
   font-family: var(--font-mono);
   color: var(--color-text);
   line-height: var(--line-height-tight);
@@ -59,8 +59,8 @@ swp-stat-value {
 /* Larger variant for emphasis */
 swp-stat-card swp-stat-value,
 swp-stat-box swp-stat-value {
-  font-size: 22px;
-  font-weight: 600;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
   font-family: var(--font-mono);
   color: var(--color-text);
 }
@@ -76,8 +76,8 @@ swp-stat-label {
 }
 
 swp-stat-box swp-stat-label {
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
@@ -88,7 +88,7 @@ swp-stat-box swp-stat-label {
    =========================================== */
 swp-stat-subtitle {
   display: block;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   margin-top: var(--spacing-1);
 }
@@ -201,11 +201,11 @@ swp-quick-stat {
 }
 
 swp-quick-stat swp-stat-value {
-  font-size: 18px;
+  font-size: var(--font-size-xl);
 }
 
 swp-quick-stat swp-stat-label {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   margin-top: var(--spacing-1);
 }
 
@@ -215,15 +215,15 @@ swp-quick-stat swp-stat-label {
 swp-stat-item {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--spacing-1);
   padding: var(--spacing-2) var(--spacing-3);
   background: var(--color-background);
   border-radius: var(--border-radius);
 }
 
 swp-stat-item swp-stat-value {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
 }
 
 swp-stat-item swp-stat-value.mono {
@@ -231,7 +231,7 @@ swp-stat-item swp-stat-value.mono {
 }
 
 swp-stat-item swp-stat-label {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   margin-top: 0;
 }
 

PlanTempus.Application/wwwroot/css/topbar.css

@@ -25,7 +25,7 @@ swp-app-topbar {
 swp-topbar-search {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-5);
   padding: var(--spacing-2) var(--spacing-3);
   background: var(--color-background);
   border: 1px solid var(--color-border);
@@ -133,8 +133,8 @@ swp-topbar-divider {
 swp-topbar-profile {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 6px var(--spacing-3) 6px 6px;
+  gap: var(--spacing-5);
+  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-3);
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--border-radius);