Implement authentication phase with Cidaas OAuth2 integration

- Add authentication middleware to protect routes
- Create API endpoints for login, logout, registration, and user info
- Develop UI components for login and registration forms
- Integrate VeeValidate for form validation
- Update environment configuration for Cidaas settings
- Add i18n support for English and German languages
- Enhance Tailwind CSS for improved styling of auth components
- Document authentication flow and testing procedures

assets/css/tailwind.css

@@ -219,6 +219,43 @@
   }
 }
 
+/* ========================================
+   TAILWIND THEME INTEGRATION
+   ======================================== */
+
+/**
+ * @theme inline - Make CSS variables available to Tailwind CSS v4
+ * This allows shadcn-nuxt components to use these colors directly
+ */
+@theme inline {
+  /* Map shadcn-ui CSS variables to Tailwind colors */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  /* Border radius tokens */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
 /* ========================================
    COMPONENT CLASSES
    ======================================== */
@@ -569,6 +606,19 @@
     @apply outline-none ring-2 ring-accent;
   }
 
+  /* Form Error Message - High contrast for readability */
+  .form-error {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(248, 113, 113, 0.4); /* red-400 with 40% opacity */
+    background-color: rgba(239, 68, 68, 0.2); /* red-500 with 20% opacity */
+    color: #fecaca; /* red-200 for better contrast */
+    transition: all 0.2s;
+  }
+
   .form-checkbox {
     @apply flex items-start gap-3 cursor-pointer;
   }