bugfix: the whole theming structure overhauled. light/dark mode icon added.

frontend/src/components/ui/Badge.tsx

@@ -10,10 +10,10 @@ interface BadgeProps {
 }
 
 const variantStyles: Record<BadgeVariant, string> = {
-    success: 'bg-green-50 text-green-700 border-green-200',
-    warning: 'bg-yellow-50 text-yellow-700 border-yellow-200',
-    danger: 'bg-red-50 text-red-700 border-red-200',
-    default: 'bg-gray-50 text-gray-700 border-gray-200',
+    success: 'bg-emerald-900/30 text-emerald-300 border-emerald-700/60',
+    warning: 'bg-amber-900/30 text-amber-300 border-amber-700/60',
+    danger: 'bg-red-950/30 text-red-300 border-red-700/60',
+    default: 'bg-background-secondary text-text-secondary border-border',
 };
 
 export function Badge({

frontend/src/components/ui/Button.tsx

@@ -24,24 +24,24 @@ export const Button: React.FC<ButtonProps> = ({
   ...props
 }) => {
   const baseClasses =
-    'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 ' +
-    'focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed';
+    'inline-flex items-center justify-center rounded-[var(--radius-md)] font-medium transition-all duration-200 ' +
+    'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed';
 
   const variantClasses: Record<ButtonVariant, string> = {
     primary:
-      'bg-primary text-black hover:opacity-90',
+      'bg-primary text-primary-contrast hover:brightness-105 shadow-[0_0_0_1px_var(--color-primary-soft)]',
 
     secondary:
-      'bg-background-secondary text-text-primary hover:bg-background-card',
+      'bg-surface-elevated text-text-primary border border-border hover:border-border-strong',
 
     outline:
-      'border border-border text-text-primary hover:bg-background-card',
+      'border border-border text-text-primary hover:bg-background-card/70',
 
     danger:
       'bg-red-600 text-white hover:bg-red-700',
 
     ghost:
-      'text-text-secondary hover:bg-background-card',
+      'text-text-secondary hover:text-text-primary hover:bg-background-card/70',
   };
 
   const sizeClasses: Record<ButtonSize, string> = {

frontend/src/components/ui/Input.tsx

@@ -25,7 +25,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
         <div className="relative">
           {icon && (
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center text-text-secondary pointer-events-none">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center text-text-muted pointer-events-none">
               {icon}
             </div>
           )}
@@ -34,19 +34,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             ref={ref}
             id={inputId}
             className={`
-              w-full rounded-lg border
+              w-full rounded-[var(--radius-md)] border
               ${error ? 'border-red-500' : 'border-border'}
-              bg-background-secondary text-text-primary
+              bg-background-secondary/90 text-text-primary
 
               ${icon ? 'pl-10' : 'pl-4'} pr-4 py-2
 
-              placeholder:text-text-secondary
+              placeholder:text-text-muted
 
-              focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
+              focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
 
               disabled:opacity-50 disabled:cursor-not-allowed
 
-              transition-all duration-200
+              transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]
 
               ${className}
             `}

frontend/src/components/ui/OrganizationCard.tsx

@@ -18,21 +18,21 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
   return (
     <button
       onClick={() => onSelect(organization.id)}
-      className="w-full bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:border-primary-300 hover:shadow-md transition-all text-left flex items-center gap-4 group"
+      className="w-full surface-card p-6 hover:border-primary/60 transition-all text-left flex items-center gap-4 group"
     >
-      <div className="p-3 bg-primary-50 rounded-lg text-primary-600">
-        <Icon className="h-8 w-8" />
+      <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
+        <Icon className="h-8 w-8 icon-flat" />
       </div>
       <div className="flex-1">
-        <h3 className="text-lg font-semibold text-gray-900">{organization.name}</h3>
-        <p className="text-sm text-gray-500">{typeText}</p>
+        <h3 className="text-lg font-semibold text-text-primary">{organization.name}</h3>
+        <p className="text-sm text-text-secondary">{typeText}</p>
         {organization.plan && (
-          <p className="text-xs text-gray-400 mt-1">
+          <p className="text-xs text-text-muted mt-1">
             Plan: {organization.plan.name} • {organization.plan.maxUsers} users
           </p>
         )}
       </div>
-      <ChevronRight className="h-5 w-5 text-gray-400 group-hover:text-primary-600 transition-colors" />
+      <ChevronRight className="h-5 w-5 icon-flat text-text-muted group-hover:text-primary transition-colors" />
     </button>
   );
 };

frontend/src/components/ui/Sidebar.tsx

@@ -26,9 +26,9 @@ export default function Sidebar() {
   const router = useRouter();
 
   return (
-    <aside className="w-64 bg-[#071a2f] text-white flex flex-col p-4">
-      <div className="mb-8">
-        <h1 className="text-xl font-bold">DyoLink</h1>
+    <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col p-4">
+      <div className="mb-6 pb-4 border-b border-border">
+        <h1 className="text-xl font-semibold tracking-tight">DyoLink</h1>
       </div>
 
       <nav className="flex flex-col gap-2">
@@ -40,14 +40,14 @@ export default function Sidebar() {
             <button
               key={item.name}
               onClick={() => router.push(item.path)}
-              className={`flex items-center gap-3 p-3 rounded-lg transition ${
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
                 isActive
-                  ? 'bg-primary-600'
-                  : 'hover:bg-white/10'
+                  ? 'bg-primary-soft border-primary/60 text-text-primary'
+                  : 'border-border/50 text-text-secondary hover:bg-background-card/70 hover:text-text-primary hover:border-border'
               }`}
             >
-              <Icon className="w-5 h-5" />
-              <span>{item.name}</span>
+              <Icon className="w-[18px] h-[18px] icon-flat" />
+              <span className="text-sm">{item.name}</span>
             </button>
           );
         })}

frontend/src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';
+
+export function ThemeToggle() {
+  const [mode, setMode] = useState<ThemeMode | null>(null);
+
+  useEffect(() => {
+    setMode(getStoredTheme());
+  }, []);
+
+  const handleClick = () => {
+    const current = getStoredTheme();
+    const next: ThemeMode = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+    setMode(next);
+  };
+
+  if (mode === null) {
+    return (
+      <span
+        className="inline-flex h-9 w-9 shrink-0 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80"
+        aria-hidden
+      />
+    );
+  }
+
+  const isDark = mode === 'dark';
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={isDark ? 'Light mode' : 'Dark mode'}
+    >
+      {isDark ? (
+        <Sun className="h-[18px] w-[18px] icon-flat" />
+      ) : (
+        <Moon className="h-[18px] w-[18px] icon-flat" />
+      )}
+    </button>
+  );
+}