feat(design): centralize design system with CSS variables and semantic classes in index.css

frontend/src/App.tsx

@@ -148,9 +148,9 @@ export const App: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-[#16171a] text-white flex flex-col font-sans selection:bg-[#1d8cf8]/30">
+    <div className="min-h-screen bg-canvas text-white flex flex-col font-sans selection:bg-accent/30">
       {/* Top Header Bar */}
-      <header className="sticky top-0 z-30 bg-[#16171a]/95 backdrop-blur-md border-b border-white/[0.08]">
+      <header className="sticky top-0 z-30 bg-panel/95 backdrop-blur-md border-b border-border">
         <div className="max-w-6xl mx-auto px-3 sm:px-4 h-12 flex items-center justify-between gap-4">
           {/* Logo & Headline */}
           <div
@@ -160,7 +160,7 @@ export const App: React.FC = () => {
             }}
             className="flex items-center gap-2.5 cursor-pointer group select-none"
           >
-            <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center">
+            <div className="w-7 h-7 bg-accent text-white flex items-center justify-center">
               <Brain className="w-4 h-4" />
             </div>
             <div className="flex flex-col">
@@ -180,10 +180,10 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setShowProfileModal(true);
               }}
-              className="h-8 pl-1 pr-3 rounded-full bg-[#222428] hover:bg-[#282a2f] border border-white/[0.08] text-xs font-medium text-white flex items-center gap-2 transition-colors"
+              className="h-8 pl-1 pr-3 rounded-full bg-panel hover:bg-panel-elevated border border-border text-xs font-medium text-white flex items-center gap-2 transition-colors"
               title="Profil & Einstellungen"
             >
-              <div className="w-6 h-6 rounded-full bg-[#1d8cf8] text-white text-[10px] font-bold flex items-center justify-center">
+              <div className="w-6 h-6 rounded-full bg-accent text-white text-[10px] font-bold flex items-center justify-center">
                 {user?.displayName ? user.displayName.slice(0, 1).toUpperCase() : 'U'}
               </div>
               <span className="max-w-[120px] truncate">{user?.displayName || 'Konto'}</span>
@@ -192,29 +192,19 @@ export const App: React.FC = () => {
         </div>
 
         {/* Monochrome square tabs attached to header */}
-        <nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-white/[0.06]">
+        <nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-border">
           <div className="flex items-stretch">
             <button
               onClick={() => {
                 triggerHaptic(10);
                 setActiveTab('triage');
               }}
-              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
-                activeTab === 'triage'
-                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
-                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
-              }`}
+              className={`tab-btn ${activeTab === 'triage' ? 'tab-btn-active' : ''}`}
             >
-              <Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
+              <Layers className="w-4 h-4" />
               <span>Triage</span>
               {stats.inboxCount > 0 && (
-                <span
-                  className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
-                    activeTab === 'triage'
-                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
-                      : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
-                  }`}
-                >
+                <span className={activeTab === 'triage' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
                   {stats.inboxCount}
                 </span>
               )}
@@ -225,22 +215,12 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('tasks');
               }}
-              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
-                activeTab === 'tasks'
-                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
-                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
-              }`}
+              className={`tab-btn ${activeTab === 'tasks' ? 'tab-btn-active' : ''}`}
             >
-              <CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
+              <CheckSquare className="w-4 h-4" />
               <span>Aufgaben</span>
               {stats.tasksOpenCount > 0 && (
-                <span
-                  className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
-                    activeTab === 'tasks'
-                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
-                      : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
-                  }`}
-                >
+                <span className={activeTab === 'tasks' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
                   {stats.tasksOpenCount}
                 </span>
               )}
@@ -251,21 +231,11 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('workspace');
               }}
-              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
-                activeTab === 'workspace'
-                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
-                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
-              }`}
+              className={`tab-btn ${activeTab === 'workspace' ? 'tab-btn-active' : ''}`}
             >
-              <FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
+              <FileText className="w-4 h-4" />
               <span>Workspace</span>
-              <span
-                className={`px-1.5 py-0.2 text-[10px] font-semibold transition-colors ${
-                  activeTab === 'workspace'
-                    ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
-                    : 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
-                }`}
-              >
+              <span className={activeTab === 'workspace' ? 'badge-accent' : 'px-1.5 py-0.5 text-[10px] bg-canvas text-zinc-400 border border-border'}>
                 {stats.docsCount}
               </span>
             </button>
@@ -275,13 +245,9 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('lists');
               }}
-              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
-                activeTab === 'lists'
-                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
-                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.02]'
-              }`}
+              className={`tab-btn ${activeTab === 'lists' ? 'tab-btn-active' : ''}`}
             >
-              <ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
+              <ShoppingCart className="w-4 h-4" />
               <span>Geteilte Listen</span>
             </button>
 
@@ -290,13 +256,9 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setActiveTab('ecosystem');
               }}
-              className={`h-9 px-3.5 text-xs sm:text-sm font-medium flex items-center gap-1.5 flex-shrink-0 transition-colors select-none border-b-2 ${
-                activeTab === 'ecosystem'
-                  ? 'border-[#1d8cf8] text-white bg-white/[0.04]'
-                  : 'border-transparent text-zinc-400 hover:text-white hover:bg-white/[0.03]'
-              }`}
+              className={`tab-btn ${activeTab === 'ecosystem' ? 'tab-btn-active' : ''}`}
             >
-              <Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-[#1d8cf8]' : 'text-zinc-400'}`} />
+              <Webhook className="w-4 h-4" />
               <span>Webhooks & Export</span>
             </button>
           </div>

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -135,13 +135,13 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
       <form onSubmit={handleSubmit} className="relative">
         {/* Capture Input Bar */}
         <div
-          className={`flex items-center h-11 pl-2 pr-1.5 bg-[#222428] border rounded-full transition-colors duration-150 ${
+          className={`flex items-center h-11 pl-2 pr-1.5 bg-panel border rounded-full transition-colors duration-150 ${
             isListening
-              ? 'border-[#1d8cf8] bg-[#222428]'
-              : 'border-white/[0.08] focus-within:border-[#1d8cf8]'
+              ? 'border-accent bg-panel'
+              : 'border-border focus-within:border-accent'
           }`}
         >
-          <div className="w-7 h-7 rounded-full bg-[#1d8cf8] text-white flex items-center justify-center mr-2 flex-shrink-0">
+          <div className="w-7 h-7 rounded-full bg-accent text-white flex items-center justify-center mr-2 flex-shrink-0">
             <Sparkles className="w-3.5 h-3.5" />
           </div>
 
@@ -167,8 +167,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               title="Priorität & Fälligkeit"
               className={`h-7 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                 showOptions || priority !== 'normal' || dueDate
-                  ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border border-[#1d8cf8]/40'
-                  : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
+                  ? 'bg-accent/20 text-accent border border-accent/40'
+                  : 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
               }`}
             >
               <Calendar className="w-3.5 h-3.5" />
@@ -184,8 +184,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               title="Spracheingabe"
               className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors ${
                 isListening
-                  ? 'bg-[#1d8cf8]/20 text-[#1d8cf8]'
-                  : 'text-zinc-400 hover:text-white hover:bg-[#2b2d33]'
+                  ? 'bg-accent/20 text-accent'
+                  : 'text-zinc-400 hover:text-white hover:bg-panel-elevated'
               }`}
             >
               {isListening ? <MicOff className="w-3.5 h-3.5" /> : <Mic className="w-3.5 h-3.5" />}
@@ -197,8 +197,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               disabled={!content.trim() || isSubmitting}
               className={`h-7 px-3 rounded-full font-medium text-xs flex items-center gap-1.5 transition-all ${
                 content.trim()
-                  ? 'bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white cursor-pointer shadow-sm'
-                  : 'bg-[#2b2d33] text-zinc-500 cursor-not-allowed'
+                  ? 'bg-accent hover:bg-accent-hover text-white cursor-pointer shadow-sm'
+                  : 'bg-panel-elevated text-zinc-500 cursor-not-allowed'
               }`}
             >
               {justSaved ? (
@@ -218,7 +218,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
 
         {/* Expandable Quick Metadata */}
         {showOptions && (
-          <div className="mt-1 px-3 py-2 bg-[#1c1e22] border border-white/[0.08] flex flex-wrap items-center justify-between gap-2 text-xs">
+          <div className="mt-1 px-3 py-2 bg-panel border border-border flex flex-wrap items-center justify-between gap-2 text-xs">
             <div className="flex items-center gap-1.5">
               <span className="text-zinc-400 mr-1">Priorität:</span>
               {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
@@ -236,8 +236,8 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                     onClick={() => setPriority(p)}
                     className={`px-2.5 py-0.5 rounded-full transition-colors text-xs ${
                       active
-                        ? 'bg-[#1d8cf8] text-white font-medium'
-                        : 'bg-[#16171a] text-zinc-400 hover:text-white border border-white/[0.06]'
+                        ? 'bg-accent text-white font-medium'
+                        : 'bg-canvas text-zinc-400 hover:text-white border border-border'
                     }`}
                   >
                     {labels[p]}
@@ -252,7 +252,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                 type="date"
                 value={dueDate}
                 onChange={(e) => setDueDate(e.target.value)}
-                className="bg-[#16171a] text-white px-2 py-0.5 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
+                className="input-field px-2 py-0.5 text-xs"
               />
             </div>
           </div>

frontend/src/features/lists/SharedListsView.tsx

@@ -266,7 +266,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   return (
     <div className="w-full space-y-3">
       {/* Top Space Bar & Realtime Indicator */}
-      <div className="px-3 py-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
+      <div className="px-3 py-2 panel-surface flex flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-1.5">
           {spaces.map((sp) => (
             <button
@@ -274,8 +274,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               onClick={() => setActiveSpace(sp)}
               className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-colors border ${
                 activeSpace?.id === sp.id
-                  ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
-                  : 'bg-[#16171a] text-zinc-300 hover:text-white border-white/[0.08]'
+                  ? 'bg-accent text-white border-accent'
+                  : 'bg-canvas text-zinc-300 hover:text-white border-border'
               }`}
             >
               <span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
           <button
             onClick={() => setShowNewSpaceModal((prev) => !prev)}
-            className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+            className="btn-action h-8"
           >
-            <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Space
+            <Plus className="w-3.5 h-3.5 text-accent" /> Space
           </button>
 
           <button
             onClick={() => setShowJoinModal((prev) => !prev)}
-            className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+            className="btn-action h-8"
           >
-            <UserPlus className="w-3.5 h-3.5 text-[#1d8cf8]" /> Code einlösen
+            <UserPlus className="w-3.5 h-3.5 text-accent" /> Code einlösen
           </button>
         </div>
 
@@ -305,7 +305,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               className={`h-8 px-3 text-xs flex items-center gap-1.5 ${
                 wsConnected
                   ? 'bg-[#22c55e]/15 text-[#22c55e] border border-[#22c55e]/30'
-                  : 'bg-[#2b2d33] text-zinc-400 border border-white/[0.06]'
+                  : 'bg-panel-elevated text-zinc-400 border border-border'
               }`}
             >
               <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,9 +315,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               onClick={copyInviteCode}
               title="Einladungscode für Partner oder Familie kopieren"
-              className="h-8 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+              className="btn-action h-8"
             >
-              <Users className="w-3.5 h-3.5 text-[#1d8cf8]" />
+              <Users className="w-3.5 h-3.5 text-accent" />
               <span>Code: {activeSpace.inviteCode}</span>
               {copiedInvite ? (
                 <Check className="w-3.5 h-3.5 text-[#22c55e]" />
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewSpaceModal && (
         <form
           onSubmit={handleCreateSpace}
-          className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
+          className="p-2 panel-surface flex items-center gap-2"
         >
           <input
             type="text"
             value={newSpaceName}
             onChange={(e) => setNewSpaceName(e.target.value)}
             placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
-            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 input-field text-sm"
             autoFocus
           />
           <button
             type="submit"
-            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="btn-primary h-9 px-4 text-xs sm:text-sm"
           >
             Space anlegen
           </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showJoinModal && (
         <form
           onSubmit={handleJoinSpace}
-          className="p-2 bg-[#222428] border border-white/[0.08] flex items-center gap-2"
+          className="p-2 panel-surface flex items-center gap-2"
         >
           <input
             type="text"
             value={joinCode}
             onChange={(e) => setJoinCode(e.target.value)}
             placeholder="Invite-Code des Partners eingeben…"
-            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] uppercase transition-colors"
+            className="flex-1 h-9 px-3 input-field text-sm uppercase"
             autoFocus
           />
           <button
             type="submit"
-            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="btn-primary h-9 px-4 text-xs sm:text-sm"
           >
             Beitreten
           </button>
@@ -385,14 +385,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
               onClick={() => setActiveListId(lst.id)}
               className={`h-8 px-3 text-xs sm:text-sm font-medium flex items-center gap-1.5 transition-all border ${
                 isSelected
-                  ? 'bg-[#1d8cf8] text-white border-[#1d8cf8]'
-                  : 'bg-[#222428] text-zinc-300 hover:text-white border-white/[0.08]'
+                  ? 'bg-accent text-white border-accent'
+                  : 'bg-panel text-zinc-300 hover:text-white border-border'
               }`}
             >
               <span>{lst.icon}</span>
               <span>{lst.title}</span>
               <span className={`px-1.5 py-0.2 text-[10px] font-semibold ${
-                isSelected ? 'bg-white/20 text-white' : 'bg-[#16171a] text-zinc-400'
+                isSelected ? 'bg-white/20 text-white' : 'bg-canvas text-zinc-400'
               }`}>
                 {openCount}
               </span>
@@ -402,9 +402,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
         <button
           onClick={() => setShowNewListModal((prev) => !prev)}
-          className="h-8 px-3 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+          className="btn-action h-8"
         >
-          <Plus className="w-3.5 h-3.5 text-[#1d8cf8]" />
+          <Plus className="w-3.5 h-3.5 text-accent" />
           <span>Neue Liste</span>
         </button>
       </div>
@@ -412,7 +412,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewListModal && (
         <form
           onSubmit={handleCreateList}
-          className="p-2 bg-[#222428] border border-white/[0.08] flex flex-wrap items-center gap-2"
+          className="p-2 panel-surface flex flex-wrap items-center gap-2"
         >
           <div className="flex items-center gap-1.5">
             {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -420,10 +420,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 key={ic}
                 type="button"
                 onClick={() => setNewListIcon(ic)}
-                className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
+                className={`w-9 h-9 flex items-center justify-center transition-colors ${
                   newListIcon === ic
-                    ? 'bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8]'
-                    : 'bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06]'
+                    ? 'bg-accent/20 border border-accent text-accent'
+                    : 'bg-canvas hover:bg-panel-elevated border border-border'
                 }`}
               >
                 {ic}
@@ -435,12 +435,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             value={newListTitle}
             onChange={(e) => setNewListTitle(e.target.value)}
             placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 input-field text-sm"
             autoFocus
           />
           <button
             type="submit"
-            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm transition-colors shadow-sm"
+            className="btn-primary h-9 px-4 text-xs sm:text-sm"
           >
             Liste erstellen
           </button>
@@ -449,7 +449,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
       {/* Active Shared List Card */}
       {activeList ? (
-        <div className="p-3 bg-[#222428] border border-white/[0.08]">
+        <div className="p-3 panel-surface">
           {/* Quick-Add Pill Form */}
           <form onSubmit={handleAddItem} className="space-y-2 mb-3">
             <div className="flex flex-col sm:flex-row gap-2">
@@ -458,7 +458,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 value={newItemText}
                 onChange={(e) => setNewItemText(e.target.value)}
                 placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
-                className="flex-1 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                className="flex-1 h-9 px-3 input-field text-sm"
               />
               <div className="flex gap-2">
                 <input
@@ -466,12 +466,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   value={newItemQty}
                   onChange={(e) => setNewItemQty(e.target.value)}
                   placeholder="Menge (z.B. 2x)"
-                  className="w-32 h-10 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                  className="w-32 h-9 px-3 input-field text-sm"
                 />
                 <button
                   type="submit"
                   disabled={!newItemText.trim()}
-                  className="h-10 px-5 rounded-full bg-[#1d8cf8] disabled:bg-[#2b2d33] text-white disabled:text-zinc-500 font-medium text-sm flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
+                  className="btn-primary h-9 px-4 disabled:opacity-40 disabled:cursor-not-allowed text-xs sm:text-sm flex items-center gap-1.5"
                 >
                   <Plus className="w-4 h-4" />
                   <span>Hinzufügen</span>
@@ -489,8 +489,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
                   className={`px-2.5 py-0.5 text-xs transition-colors border ${
                     newItemCategory === cat
-                      ? 'bg-[#1d8cf8] text-white border-[#1d8cf8] font-medium'
-                      : 'bg-[#16171a] text-zinc-400 hover:text-white border-white/[0.08]'
+                      ? 'bg-accent text-white border-accent font-medium'
+                      : 'bg-canvas text-zinc-400 hover:text-white border-border'
                   }`}
                 >
                   {cat}
@@ -500,10 +500,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           </form>
 
           {/* Open Items */}
-          <div className="border border-white/[0.08] divide-y divide-white/[0.06]">
+          <div className="border border-border divide-y divide-border">
             {openItems.length === 0 ? (
               <div className="py-6 text-center text-zinc-400 text-sm flex flex-col items-center gap-1.5">
-                <Sparkles className="w-4 h-4 text-[#1d8cf8]" />
+                <Sparkles className="w-4 h-4 text-accent" />
                 <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
               </div>
             ) : (
@@ -511,20 +511,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 <div
                   key={item.id}
                   onClick={() => handleToggleItem(item)}
-                  className="px-3 py-2 bg-[#16171a] hover:bg-[#282a2f] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
+                  className="px-3 py-2 bg-canvas hover:bg-panel-elevated flex items-center justify-between gap-3 cursor-pointer transition-colors group"
                 >
                   <div className="flex items-center gap-2.5 min-w-0">
-                    <Circle className="w-4 h-4 text-zinc-500 group-hover:text-[#1d8cf8] flex-shrink-0 transition-colors" />
+                    <Circle className="w-4 h-4 text-zinc-500 group-hover:text-accent flex-shrink-0 transition-colors" />
                     <span className="text-sm font-normal text-white truncate">
                       {item.content}
                     </span>
                     {item.quantity && (
-                      <span className="px-2 py-0.2 bg-[#222428] text-[#1d8cf8] border border-white/[0.06] text-xs font-semibold">
+                      <span className="badge-accent">
                         {item.quantity}
                       </span>
                     )}
                     {item.category && (
-                      <span className="hidden sm:inline px-2 py-0.2 bg-[#222428] text-zinc-400 text-xs">
+                      <span className="hidden sm:inline px-2 py-0.2 bg-panel text-zinc-400 text-xs">
                         {item.category}
                       </span>
                     )}
@@ -536,7 +536,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                       e.stopPropagation();
                       handleDeleteItem(item.id);
                     }}
-                    className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
+                    className="btn-icon btn-icon-danger w-6 h-6"
                   >
                     <Trash2 className="w-3 h-3" />
                   </button>
@@ -547,28 +547,28 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
           {/* Completed Items Section */}
           {completedItems.length > 0 && (
-            <div className="mt-3 pt-2.5 border-t border-white/[0.06]">
+            <div className="mt-3 pt-2.5 border-t border-border">
               <div className="flex items-center justify-between mb-2">
                 <span className="text-xs font-medium uppercase tracking-wider text-zinc-400">
                   Erledigt ({completedItems.length})
                 </span>
                 <button
                   onClick={handleClearCompleted}
-                  className="px-3 py-0.5 rounded-full bg-[#16171a] hover:bg-white/[0.08] border border-white/[0.06] text-xs text-zinc-400 hover:text-white transition-colors"
+                  className="btn-action text-xs"
                 >
                   Erledigte aufräumen
                 </button>
               </div>
 
-              <div className="border border-white/[0.06] divide-y divide-white/[0.04] opacity-75">
+              <div className="border border-border divide-y divide-border opacity-75">
                 {completedItems.map((item) => (
                   <div
                     key={item.id}
                     onClick={() => handleToggleItem(item)}
-                    className="px-3 py-1.5 bg-[#16171a]/50 hover:bg-[#16171a]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
+                    className="px-3 py-1.5 bg-canvas/50 hover:bg-canvas/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
                   >
                     <div className="flex items-center gap-2.5 min-w-0">
-                      <CheckCircle2 className="w-4 h-4 text-[#1d8cf8] flex-shrink-0" />
+                      <CheckCircle2 className="w-4 h-4 text-accent flex-shrink-0" />
                       <span className="text-sm text-zinc-400 line-through truncate">
                         {item.content}
                       </span>

frontend/src/features/settings/EcosystemView.tsx

@@ -92,11 +92,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
   const baseUrl = window.location.origin;
 
   return (
-    <div className="w-full bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.08]">
+    <div className="w-full panel-surface divide-y divide-border">
       {/* Section 1: API Keys for Smarthome & Automation */}
       <div className="p-4">
         <div className="flex items-center gap-3 mb-2">
-          <div className="w-8 h-8 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+          <div className="w-8 h-8 bg-accent text-white flex items-center justify-center flex-shrink-0">
             <Key className="w-4 h-4" />
           </div>
           <div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             value={newKeyName}
             onChange={(e) => setNewKeyName(e.target.value)}
             placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
-            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 input-field text-sm"
           />
           <button
             type="submit"
-            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="btn-primary h-9 px-4 text-xs sm:text-sm"
           >
             <Plus className="w-4 h-4" />
             <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </form>
 
         {newlyCreatedKey && (
-          <div className="mt-3 p-3 bg-[#1d8cf8]/15 border border-[#1d8cf8]/30 flex flex-wrap items-center justify-between gap-3">
+          <div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-xs font-semibold text-[#1d8cf8] mb-1">
+              <p className="text-xs font-semibold text-accent mb-1">
                 Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
               </p>
               <code className="text-xs sm:text-sm font-mono text-white break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             </div>
             <button
               onClick={() => handleCopy(newlyCreatedKey)}
-              className="h-8 px-3 rounded-full bg-[#1d8cf8] text-white font-medium text-xs flex items-center gap-1.5 hover:bg-[#3b9cfc] transition-colors shadow-sm"
+              className="btn-primary h-8 px-3 text-xs"
             >
               {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
               <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -147,7 +147,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         )}
 
         {/* Active Keys List */}
-        <div className="mt-3 border border-white/[0.06] divide-y divide-white/[0.06]">
+        <div className="mt-3 border border-border divide-y divide-border">
           {keys.length === 0 ? (
             <p className="text-xs text-zinc-500 px-3 py-2">
               Noch keine dedizierten API-Schlüssel hinterlegt.
@@ -156,11 +156,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             keys.map((k) => (
               <div
                 key={k.id}
-                className="px-3 py-1.5 bg-[#16171a] flex items-center justify-between gap-3"
+                className="px-3 py-1.5 bg-canvas flex items-center justify-between gap-3"
               >
                 <div>
                   <span className="text-sm font-medium text-white">{k.name}</span>
-                  <span className="ml-3 text-xs font-mono text-[#1d8cf8]">{k.keyPrefix}</span>
+                  <span className="ml-3 text-xs font-mono text-accent">{k.keyPrefix}</span>
                   {k.lastUsedAt && (
                     <span className="ml-3 text-xs text-zinc-500">
                       Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
@@ -169,7 +169,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 </div>
                 <button
                   onClick={() => handleDeleteKey(k.id)}
-                  className="w-7 h-7 rounded-full hover:bg-white/[0.1] text-zinc-500 hover:text-white flex items-center justify-center transition-colors"
+                  className="btn-icon btn-icon-danger w-7 h-7"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -182,7 +182,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       {/* Section 2: Interactive Smarthome Webhook Simulator */}
       <div className="p-4">
         <div className="flex items-center gap-3 mb-3">
-          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+          <div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
             <Webhook className="w-4 h-4" />
           </div>
           <div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 setSimTitle(preset.text);
                 setSimPriority(preset.prio);
               }}
-              className="px-3 py-1 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white transition-colors"
+              className="btn-action text-xs"
             >
               {preset.label}
             </button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             type="text"
             value={simTitle}
             onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-9 px-3 bg-[#16171a] text-sm text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+            className="flex-1 h-9 px-3 input-field text-sm"
           />
           <button
             type="button"
             onClick={handleSimulateWebhook}
-            className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center justify-center gap-1.5 transition-colors shadow-sm"
+            className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-1.5"
           >
             <Zap className="w-4 h-4" />
             <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </div>
 
         {simStatus && (
-          <p className="mt-3 text-xs font-medium text-[#1d8cf8]">{simStatus}</p>
+          <p className="mt-3 text-xs font-medium text-accent">{simStatus}</p>
         )}
 
         {/* Code Example Snippets */}
         <div className="mt-4 space-y-2">
           <div className="flex items-center gap-2 text-xs font-medium text-zinc-400">
-            <Terminal className="w-3.5 h-3.5 text-[#1d8cf8]" />
+            <Terminal className="w-3.5 h-3.5 text-accent" />
             <span>cURL / Home Assistant REST Command:</span>
           </div>
-          <pre className="p-3 bg-[#16171a] border border-white/[0.06] font-mono text-xs text-zinc-300 overflow-x-auto">
+          <pre className="p-3 bg-canvas border border-border font-mono text-xs text-zinc-300 overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
   -H "Content-Type: application/json" \\
   -d '{
@@ -257,7 +257,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       {/* Section 3: Data Sovereignty & Export */}
       <div className="p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <div className="w-7 h-7 bg-[#1d8cf8] text-white flex items-center justify-center flex-shrink-0">
+          <div className="w-7 h-7 bg-accent text-white flex items-center justify-center flex-shrink-0">
             <ShieldCheck className="w-4 h-4" />
           </div>
           <div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
 
         <button
           onClick={handleFullExport}
-          className="h-9 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-sm flex items-center gap-2 transition-colors flex-shrink-0 shadow-sm"
+          className="btn-primary h-9 px-4 text-xs sm:text-sm flex items-center gap-2"
         >
           <Download className="w-4 h-4" />
           <span>Komplett-Backup (.json)</span>

frontend/src/features/triage/TasksView.tsx

@@ -95,12 +95,12 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
     <div className="w-full space-y-2">
       {/* Filter Tabs */}
       <div className="flex flex-wrap items-center justify-between gap-2 mb-1">
-        <div className="flex items-center border border-white/[0.08] bg-[#16171a]">
+        <div className="flex items-center border border-border bg-canvas">
           <button
             onClick={() => setFilter('open')}
-            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
               filter === 'open'
-                ? 'bg-[#222428] text-white'
+                ? 'bg-panel text-white'
                 : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
@@ -109,9 +109,9 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
           <button
             onClick={() => setFilter('done')}
-            className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
+            className={`h-8 px-3.5 text-xs font-medium border-r border-border transition-colors ${
               filter === 'done'
-                ? 'bg-[#222428] text-white'
+                ? 'bg-panel text-white'
                 : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
@@ -122,7 +122,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
             onClick={() => setFilter('discarded')}
             className={`h-8 px-3.5 text-xs font-medium transition-colors ${
               filter === 'discarded'
-                ? 'bg-[#222428] text-white'
+                ? 'bg-panel text-white'
                 : 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
             }`}
           >
@@ -133,7 +133,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
         {filter === 'discarded' && discarded.length > 0 && (
           <button
             onClick={handlePurgeAllDiscarded}
-            className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white text-xs font-medium flex items-center gap-1.5 transition-colors"
+            className="btn-action"
           >
             <Trash2 className="w-3.5 h-3.5" />
             Papierkorb leeren
@@ -144,7 +144,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
       {loading ? (
         <div className="p-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
       ) : filter === 'discarded' ? (
-        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
+        <div className="panel-surface divide-y divide-border">
           {discarded.length === 0 ? (
             <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               Keine verworfenen Gedanken im Papierkorb.
@@ -162,13 +162,14 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <button
                     onClick={() => handleRestore(item)}
-                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
+                    className="btn-action"
                   >
-                    <RotateCcw className="w-3 h-3" /> Zurück
+                    <RotateCcw className="w-3 h-3 text-accent" /> Zurück
                   </button>
                   <button
                     onClick={() => handleDeletePermanent(item.id)}
-                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
+                    className="btn-icon btn-icon-danger"
+                    title="Endgültig löschen"
                   >
                     <Trash2 className="w-3 h-3" />
                   </button>
@@ -178,7 +179,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
           )}
         </div>
       ) : (
-        <div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
+        <div className="panel-surface divide-y divide-border">
           {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
             <div className="px-4 py-6 text-center text-zinc-400 text-sm">
               {filter === 'open'
@@ -199,8 +200,8 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
                     onClick={() => handleToggleDone(task)}
                     className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
                       task.isCompleted
-                        ? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
-                        : 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
+                        ? 'bg-accent border-accent text-white'
+                        : 'border-zinc-500 hover:border-accent text-transparent'
                     }`}
                     title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
                   >
@@ -218,7 +219,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
                     <div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
                       {task.priority === 'urgent' && (
-                        <span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
+                        <span className="badge-accent">
                           Dringend
                         </span>
                       )}
@@ -230,7 +231,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
                       {task.tags?.map((tag) => (
                         <span
                           key={tag}
-                          className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
+                          className="px-1.5 py-0.2 bg-canvas text-zinc-400 text-[10px]"
                         >
                           #{tag}
                         </span>
@@ -247,23 +248,23 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
                       type="date"
                       value={task.dueDate || ''}
                       onChange={(e) => handleDueDateChange(task, e.target.value)}
-                      className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+                      className="h-7 pl-6 pr-2 input-field text-xs"
                     />
                   </div>
 
                   <button
                     onClick={() => handleConvertToDoc(task)}
                     title="Als Notiz / Projekt vertiefen"
-                    className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                    className="btn-action"
                   >
-                    <FileText className="w-3 h-3 text-[#1d8cf8]" />
+                    <FileText className="w-3 h-3 text-accent" />
                     <span className="hidden md:inline">Vertiefen</span>
                   </button>
 
                   <button
                     onClick={() => handleDeletePermanent(task.id)}
                     title="Löschen"
-                    className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
+                    className="btn-icon btn-icon-danger"
                   >
                     <Trash2 className="w-3 h-3" />
                   </button>

frontend/src/features/triage/TriageDeck.tsx

@@ -185,7 +185,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <div className="flex flex-wrap items-center justify-center gap-2.5">
           <button
             onClick={onFocusCapture}
-            className="h-10 px-5 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm shadow-sm transition-colors"
+            className="btn-primary h-9 px-4"
           >
             + Neuer Gedanke
           </button>
@@ -193,9 +193,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
           {lastTriaged && (
             <button
               onClick={handleUndo}
-              className="h-10 px-4 rounded-full bg-[#2b2d33] hover:bg-[#32353b] text-zinc-300 hover:text-white border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
+              className="btn-action h-9 px-3.5"
             >
-              <RotateCcw className="w-3.5 h-3.5 text-[#1d8cf8]" />
+              <RotateCcw className="w-3.5 h-3.5 text-accent" />
               Rückgängig
             </button>
           )}
@@ -221,9 +221,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         {lastTriaged && (
           <button
             onClick={handleUndo}
-            className="h-7 px-2.5 rounded-full bg-[#222428] hover:bg-[#2b2d33] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+            className="btn-action h-7 px-2.5 text-xs"
           >
-            <RotateCcw className="w-3 h-3 text-[#1d8cf8]" />
+            <RotateCcw className="w-3 h-3 text-accent" />
             Rückgängig
           </button>
         )}
@@ -235,7 +235,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         {nextCard && (
           <div
             key={nextCard.id + '-preview'}
-            className="absolute inset-x-3 top-4 bottom-0 bg-[#222428]/60 border border-white/[0.06] p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-4 bottom-0 bg-panel/60 border border-border p-4 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
           >
             <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
             <p className="text-base text-zinc-400 line-clamp-3">{nextCard.content}</p>
@@ -262,12 +262,12 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             initial={{ scale: 0.96, opacity: 0, y: 12 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
             exit={{ scale: 0.92, opacity: 0 }}
-            className="relative w-full h-full bg-[#222428] border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            className="relative w-full h-full bg-panel border border-border p-4 sm:p-5 cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
           >
             {/* Dynamic Swipe Overlays */}
             <motion.div
               style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-[#1d8cf8]/20 border border-[#1d8cf8] text-[#1d8cf8] font-semibold text-xs tracking-wide uppercase"
+              className="pointer-events-none absolute top-4 right-4 px-2.5 py-1 bg-accent/20 border border-accent text-accent font-semibold text-xs tracking-wide uppercase"
             >
               Behalten 👉
             </motion.div>
@@ -304,13 +304,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             </div>
 
             {/* Card Footer: Tags & Due Date */}
-            <div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-white/[0.06]">
+            <div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-border">
               <div className="flex flex-wrap items-center gap-1.5">
                 {activeCard.tags && activeCard.tags.length > 0 ? (
                   activeCard.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="px-2.5 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] text-xs flex items-center gap-1 font-medium"
+                      className="badge-accent"
                     >
                       <Tag className="w-2.5 h-2.5" />#{tag}
                     </span>
@@ -321,7 +321,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               </div>
 
               {activeCard.dueDate && (
-                <span className="px-2.5 py-0.5 bg-[#16171a] text-zinc-300 border border-white/[0.06] text-xs">
+                <span className="px-2.5 py-0.5 bg-canvas text-zinc-300 border border-border text-xs">
                   📅 {activeCard.dueDate}
                 </span>
               )}
@@ -332,9 +332,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Task Date Picker Popover */}
       {showDateModal && (
-        <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
+        <div className="p-3 bg-panel border border-t-0 border-border flex flex-wrap items-center justify-between gap-3">
           <div className="flex items-center gap-2 text-xs text-zinc-300">
-            <Calendar className="w-4 h-4 text-[#1d8cf8]" />
+            <Calendar className="w-4 h-4 text-accent" />
             <span>Fälligkeitsdatum für Aufgabe:</span>
           </div>
           <div className="flex items-center gap-2">
@@ -342,11 +342,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               type="date"
               value={taskDueDate}
               onChange={(e) => setTaskDueDate(e.target.value)}
-              className="bg-[#16171a] text-white px-3 py-1 border border-white/[0.08] text-xs focus:outline-none focus:border-[#1d8cf8]"
+              className="input-field px-3 py-1 text-xs"
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="px-3.5 py-1 rounded-full bg-[#22c55e] text-white font-medium text-xs hover:bg-[#16a34a] transition-colors"
+              className="btn-primary"
             >
               Speichern
             </button>
@@ -354,9 +354,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </div>
       )}
 
-      {/* Convert to Shopping List Item Popover */}
+      {/* Convert to Shared Shopping List Item Popover */}
       {showListSelector && (
-        <div className="p-3 bg-[#1c1e22] border border-t-0 border-white/[0.08]">
+        <div className="p-3 bg-panel border border-t-0 border-border">
           <p className="text-xs text-zinc-400 mb-2">
             In welche Liste verschieben?
           </p>
@@ -368,7 +368,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   onClick={() =>
                     handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                   }
-                  className="px-3 py-1.5 rounded-full bg-[#2b2d33] hover:bg-[#32353b] border border-white/[0.06] text-xs text-zinc-200 flex items-center gap-1.5 transition-colors"
+                  className="btn-action"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
@@ -381,13 +381,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         </div>
       )}
 
-      {/* Primary Triage Action Pills */}
+      {/* Primary Triage Action Buttons */}
       <div className="mt-3 flex flex-wrap items-center justify-center gap-2">
         {/* Swipe Left: Discard */}
         <button
           onClick={() => handleAction('discard')}
           title="Verwerfen (Taste H oder Pfeil links)"
-          className="h-9 px-3.5 rounded-full border border-white/20 text-zinc-300 hover:text-white hover:bg-white/[0.06] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
+          className="btn-action h-8 px-3"
         >
           <X className="w-4 h-4" />
           <span>Weg damit</span>
@@ -400,13 +400,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal((prev) => !prev);
           }}
           title="Als Aufgabe mit Datum (Taste T)"
-          className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
-            showDateModal
-              ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
-              : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
-          }`}
+          className={`btn-action h-8 px-3 ${showDateModal ? 'border-accent text-accent bg-accent/20' : ''}`}
         >
-          <Calendar className="w-3.5 h-3.5 text-[#1d8cf8]" />
+          <Calendar className="w-3.5 h-3.5 text-accent" />
           <span>Termin-To-Do</span>
         </button>
 
@@ -414,9 +410,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
           title="In Notiz / Projekt umwandeln (Taste D)"
-          className="h-9 px-3 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-zinc-300 hover:text-white text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
+          className="btn-action h-8 px-3"
         >
-          <FileText className="w-3.5 h-3.5 text-[#1d8cf8]" />
+          <FileText className="w-3.5 h-3.5 text-accent" />
           <span>Als Notiz</span>
         </button>
 
@@ -427,13 +423,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowListSelector((prev) => !prev);
           }}
           title="Auf eine geteilte Liste setzen"
-          className={`h-9 px-3 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
-            showListSelector
-              ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40 font-medium'
-              : 'bg-[#16171a] hover:bg-[#2b2d33] text-zinc-300 hover:text-white border-white/[0.06]'
-          }`}
+          className={`btn-action h-8 px-3 ${showListSelector ? 'border-accent text-accent bg-accent/20' : ''}`}
         >
-          <ShoppingCart className="w-3.5 h-3.5 text-[#1d8cf8]" />
+          <ShoppingCart className="w-3.5 h-3.5 text-accent" />
           <span>Auf Liste</span>
         </button>
 
@@ -441,7 +433,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
         <button
           onClick={() => handleAction('keep')}
           title="Behalten & sichern (Taste L oder Pfeil rechts)"
-          className="h-9 px-4 rounded-full bg-[#1d8cf8] hover:bg-[#3b9cfc] text-white font-medium text-xs sm:text-sm flex items-center gap-1.5 shadow-sm transition-colors active:scale-95"
+          className="btn-primary h-8 px-4"
         >
           <Check className="w-4 h-4" />
           <span>Behalten</span>

frontend/src/features/workspace/WorkspaceView.tsx

@@ -51,7 +51,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
   const [showIconPicker, setShowIconPicker] = useState(false);
 
-  // Folder management
+  // Folder state
   const [customFolders, setCustomFolders] = useState<string[]>(() => {
     try {
       const stored = localStorage.getItem('mindsift_workspace_folders');
@@ -109,7 +109,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return tag ? tag.replace('folder:', '') : '';
   };
 
-  // Compute all available folders (persisted custom folders + tags on documents)
+  // Compute all unique folder paths
   const allFolderPaths = useMemo(() => {
     const set = new Set<string>(customFolders);
     docs.forEach((doc) => {
@@ -126,7 +126,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     return Array.from(set).sort((a, b) => a.localeCompare(b));
   }, [customFolders, docs]);
 
-  // Ensure newly discovered folders start expanded so users see their files
+  // Keep folders expanded by default
   useEffect(() => {
     setExpandedFolders((prev) => {
       const next = new Set(prev);
@@ -215,7 +215,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       try {
         localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
       } catch {
-        // local storage fallback
+        // fallback
       }
     }
     setExpandedFolders((prev) => {
@@ -239,10 +239,10 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
     try {
       localStorage.setItem('mindsift_workspace_folders', JSON.stringify(updated));
     } catch {
-      // local storage fallback
+      // fallback
     }
 
-    // Keep docs safe: remove folder prefix so they revert to root
+    // Keep docs safe: drop folder prefix so they fall back to root
     docs.forEach((d) => {
       const f = getDocFolder(d);
       if (f === folderPath || f.startsWith(folderPath + '/')) {
@@ -392,8 +392,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         style={{ paddingLeft: `${depth * 14 + 10}px` }}
         className={`w-full text-left py-1.5 pr-2 transition-colors flex items-center justify-between gap-2 border-l-2 ${
           active
-            ? 'bg-[#282a2f] border-l-[#1d8cf8] text-white'
-            : 'border-l-transparent text-zinc-300 hover:bg-[#282a2f] hover:text-white'
+            ? 'tree-node-active'
+            : 'border-l-transparent text-zinc-300 hover:bg-panel-elevated hover:text-white'
         }`}
       >
         <div className="flex items-center gap-1.5 min-w-0">
@@ -402,7 +402,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           </span>
           <span className="text-xs truncate font-normal">{doc.title || 'Ohne Titel'}</span>
         </div>
-        {doc.isPinned && <Pin className="w-3 h-3 text-[#1d8cf8] flex-shrink-0" />}
+        {doc.isPinned && <Pin className="w-3 h-3 text-accent flex-shrink-0" />}
       </button>
     );
   };
@@ -420,7 +420,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         <div
           onClick={() => toggleFolder(node.path)}
           style={{ paddingLeft: `${node.depth * 14 + 8}px` }}
-          className="group flex items-center justify-between py-1.5 pr-2 hover:bg-[#282a2f] cursor-pointer transition-colors text-xs text-zinc-300"
+          className="group flex items-center justify-between py-1.5 pr-2 hover:bg-panel-elevated cursor-pointer transition-colors text-xs text-zinc-300"
         >
           <div className="flex items-center gap-1.5 min-w-0">
             <span className="text-zinc-500 hover:text-zinc-300">
@@ -431,7 +431,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               )}
             </span>
             {isExpanded ? (
-              <FolderOpen className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0" />
+              <FolderOpen className="w-3.5 h-3.5 text-accent flex-shrink-0" />
             ) : (
               <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
             )}
@@ -447,7 +447,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 e.stopPropagation();
                 handleCreateDoc(node.path);
               }}
-              className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
+              className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
               title="Neue Datei in diesem Ordner"
             >
               <FilePlus className="w-3 h-3" />
@@ -458,7 +458,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 e.stopPropagation();
                 handleStartCreateFolder(node.path);
               }}
-              className="p-1 hover:bg-[#32353b] text-zinc-400 hover:text-white"
+              className="p-1 hover:bg-panel-hover text-zinc-400 hover:text-white"
               title="Neuer Unterordner"
             >
               <FolderPlus className="w-3 h-3" />
@@ -478,7 +478,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         {isCreatingSubfolder && (
           <div
             style={{ paddingLeft: `${(node.depth + 1) * 14 + 8}px` }}
-            className="py-1 pr-2 flex items-center gap-1.5 bg-[#16171a]"
+            className="py-1 pr-2 flex items-center gap-1.5 bg-canvas"
           >
             <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
             <input
@@ -491,12 +491,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 if (e.key === 'Escape') setIsCreatingFolder(false);
               }}
               placeholder="Unterordnername…"
-              className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
+              className="flex-1 h-6 px-1.5 input-field"
             />
             <button
               type="button"
               onClick={handleConfirmCreateFolder}
-              className="p-1 text-[#1d8cf8] hover:text-white"
+              className="p-1 text-accent hover:text-white"
               title="Bestätigen"
             >
               <Check className="w-3.5 h-3.5" />
@@ -536,9 +536,9 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
   return (
     <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
       {/* Left Document & Folder Explorer Tree */}
-      <div className="lg:col-span-4 bg-[#222428] border border-white/[0.08] flex flex-col self-start">
+      <div className="lg:col-span-4 panel-surface flex flex-col self-start">
         {/* Top Explorer Action Bar */}
-        <div className="p-2 border-b border-white/[0.08] space-y-2">
+        <div className="p-2 panel-header space-y-2">
           {/* Quick Search */}
           <div className="relative">
             <Search className="w-3.5 h-3.5 text-zinc-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
@@ -547,7 +547,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Dateien durchsuchen…"
-              className="w-full h-7 pl-7 pr-2 bg-[#16171a] text-xs text-white placeholder-zinc-500 border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
+              className="w-full h-7 pl-7 pr-2 input-field"
             />
           </div>
 
@@ -556,7 +556,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             <button
               type="button"
               onClick={() => handleCreateDoc(null)}
-              className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
+              className="flex-1 btn-action"
               title="Neue Datei erstellen"
             >
               <FilePlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -566,7 +566,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             <button
               type="button"
               onClick={() => handleStartCreateFolder(null)}
-              className="flex-1 h-7 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-zinc-300 hover:text-white text-xs font-medium flex items-center justify-center gap-1.5 transition-colors"
+              className="flex-1 btn-action"
               title="Neuen Ordner erstellen"
             >
               <FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
@@ -577,7 +577,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
         {/* Root Folder Creation Input */}
         {isCreatingFolder && newFolderParent === null && (
-          <div className="p-2 border-b border-white/[0.08] bg-[#16171a] flex items-center gap-1.5">
+          <div className="p-2 panel-header bg-canvas flex items-center gap-1.5">
             <Folder className="w-3.5 h-3.5 text-zinc-400 flex-shrink-0" />
             <input
               type="text"
@@ -589,12 +589,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 if (e.key === 'Escape') setIsCreatingFolder(false);
               }}
               placeholder="Neuer Ordnername…"
-              className="flex-1 h-6 px-1.5 bg-[#222428] text-xs text-white border border-white/20 focus:outline-none focus:border-[#1d8cf8]"
+              className="flex-1 h-6 px-1.5 input-field"
             />
             <button
               type="button"
               onClick={handleConfirmCreateFolder}
-              className="p-1 text-[#1d8cf8] hover:text-white"
+              className="p-1 text-accent hover:text-white"
               title="Bestätigen"
             >
               <Check className="w-3.5 h-3.5" />
@@ -612,7 +612,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
         {/* Empty State */}
         {isEmpty ? (
-          <div className="p-6 my-3 mx-2 border border-dashed border-white/10 bg-[#16171a]/50 text-center">
+          <div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center">
             <Folder className="w-7 h-7 text-zinc-600 mx-auto mb-2" />
             <h5 className="text-xs font-semibold text-zinc-300 mb-1">Keine Dateien vorhanden</h5>
             <p className="text-[11px] text-zinc-500 mb-3 max-w-xs mx-auto leading-relaxed">
@@ -622,7 +622,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => handleCreateDoc(null)}
-                className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
+                className="btn-action"
               >
                 <FilePlus className="w-3.5 h-3.5 text-zinc-400" />
                 <span>Neue Datei</span>
@@ -630,7 +630,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => handleStartCreateFolder(null)}
-                className="h-7 px-2.5 border border-white/10 bg-[#222428] hover:bg-[#2c2f35] text-zinc-200 text-xs flex items-center gap-1.5 font-medium transition-colors"
+                className="btn-action"
               >
                 <FolderPlus className="w-3.5 h-3.5 text-zinc-400" />
                 <span>Neuer Ordner</span>
@@ -654,11 +654,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* Right Block Editor */}
       <div className="lg:col-span-8">
         {selectedDoc ? (
-          <div className="p-4 bg-[#222428] border border-white/[0.08]">
+          <div className="p-4 panel-surface">
             {/* Document Top Action Bar */}
-            <div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 border-b border-white/[0.06]">
+            <div className="flex flex-wrap items-center justify-between gap-3 pb-3 mb-3 panel-header">
               <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-400">
-                <span className="px-2 py-0.5 bg-[#16171a] text-[#1d8cf8] border border-white/[0.06] flex items-center gap-1 font-medium">
+                <span className="badge-accent">
                   <Check className="w-3 h-3" />
                   {saveState === 'saving' ? 'Speichert…' : 'Gespeichert'}
                 </span>
@@ -669,7 +669,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   <select
                     value={getDocFolder(selectedDoc)}
                     onChange={(e) => handleChangeDocFolder(e.target.value)}
-                    className="bg-[#16171a] border border-white/[0.08] text-zinc-300 text-xs px-2 py-0.5 focus:outline-none focus:border-[#1d8cf8]"
+                    className="input-field px-2 py-0.5"
                   >
                     <option value="">(Kein Ordner / Root)</option>
                     {allFolderPaths.map((fp) => (
@@ -689,11 +689,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   onClick={() =>
                     persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned })
                   }
-                  className={`h-7 px-2.5 border text-xs flex items-center gap-1.5 transition-colors ${
-                    selectedDoc.isPinned
-                      ? 'bg-[#1d8cf8]/20 text-[#1d8cf8] border-[#1d8cf8]/40'
-                      : 'bg-[#16171a] hover:bg-[#282a2f] border-white/[0.08] text-zinc-300 hover:text-white'
-                  }`}
+                  className={selectedDoc.isPinned ? 'btn-action text-accent border-accent/40' : 'btn-action'}
                 >
                   <Pin className="w-3.5 h-3.5" />
                   <span>{selectedDoc.isPinned ? 'Angepinnt' : 'Anpinnen'}</span>
@@ -702,16 +698,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 <button
                   type="button"
                   onClick={handleExportMarkdown}
-                  className="h-7 px-2.5 bg-[#16171a] hover:bg-[#282a2f] border border-white/[0.08] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                  className="btn-action"
                 >
-                  <Download className="w-3.5 h-3.5 text-[#1d8cf8]" />
+                  <Download className="w-3.5 h-3.5 text-accent" />
                   <span>Markdown (.md)</span>
                 </button>
 
                 <button
                   type="button"
                   onClick={() => handleDeleteDoc(selectedDoc.id)}
-                  className="w-7 h-7 bg-[#16171a] hover:bg-red-500/20 border border-white/[0.08] text-zinc-400 hover:text-red-400 flex items-center justify-center transition-colors"
+                  className="btn-icon btn-icon-danger"
                   title="Dokument löschen"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
@@ -724,14 +720,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => setShowIconPicker((prev) => !prev)}
-                className="w-10 h-10 bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.08] text-xl flex items-center justify-center flex-shrink-0 transition-colors"
+                className="w-10 h-10 panel-surface hover:bg-panel-elevated text-xl flex items-center justify-center flex-shrink-0 transition-colors"
                 title="Icon ändern"
               >
                 {selectedDoc.icon}
               </button>
 
               {showIconPicker && (
-                <div className="absolute top-12 left-0 z-20 p-2.5 bg-[#222428] border border-white/[0.12] flex flex-wrap gap-1 w-64 shadow-xl">
+                <div className="absolute top-12 left-0 z-20 p-2.5 panel-surface flex flex-wrap gap-1 w-64 shadow-xl">
                   {ICONS.map((ic) => (
                     <button
                       key={ic}
@@ -740,7 +736,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         persistDocument({ ...selectedDoc, icon: ic });
                         setShowIconPicker(false);
                       }}
-                      className="w-8 h-8 hover:bg-[#2b2d33] text-base flex items-center justify-center transition-colors"
+                      className="w-8 h-8 hover:bg-panel-elevated text-base flex items-center justify-center transition-colors"
                     >
                       {ic}
                     </button>
@@ -779,7 +775,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Abschnitts-Überschrift…"
-                        className="w-full bg-transparent text-base font-semibold text-[#1d8cf8] focus:outline-none pt-2 pb-1"
+                        className="w-full bg-transparent text-base font-semibold text-accent focus:outline-none pt-2 pb-1"
                       />
                     )}
 
@@ -799,7 +795,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           type="checkbox"
                           checked={!!block.checked}
                           onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
-                          className="w-3.5 h-3.5 accent-[#1d8cf8] cursor-pointer"
+                          className="w-3.5 h-3.5 accent-accent cursor-pointer"
                         />
                         <input
                           type="text"
@@ -815,7 +811,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                     {block.type === 'bullet' && (
                       <div className="flex items-center gap-2.5 py-0.5">
-                        <span className="w-1.5 h-1.5 bg-[#1d8cf8] flex-shrink-0" />
+                        <span className="w-1.5 h-1.5 bg-accent flex-shrink-0" />
                         <input
                           type="text"
                           value={block.content}
@@ -827,8 +823,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'callout' && (
-                      <div className="p-2.5 bg-[#16171a] border border-[#1d8cf8]/40 flex items-start gap-2">
-                        <Sparkles className="w-3.5 h-3.5 text-[#1d8cf8] flex-shrink-0 mt-0.5" />
+                      <div className="p-2.5 bg-canvas border border-accent/40 flex items-start gap-2">
+                        <Sparkles className="w-3.5 h-3.5 text-accent flex-shrink-0 mt-0.5" />
                         <textarea
                           rows={2}
                           value={block.content}
@@ -840,7 +836,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'code' && (
-                      <div className="p-2.5 bg-[#16171a] border border-white/[0.08] font-mono text-xs text-zinc-200">
+                      <div className="p-2.5 bg-canvas border border-border font-mono text-xs text-zinc-200">
                         <textarea
                           rows={Math.max(2, block.content.split('\n').length)}
                           value={block.content}
@@ -857,7 +853,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, -1)}
-                      className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
+                      className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
                       title="Nach oben"
                     >
                       <ArrowUp className="w-3 h-3" />
@@ -865,7 +861,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, 1)}
-                      className="p-1 hover:bg-[#282a2f] text-zinc-400 hover:text-white transition-colors"
+                      className="p-1 hover:bg-panel-elevated text-zinc-400 hover:text-white transition-colors"
                       title="Nach unten"
                     >
                       <ArrowDown className="w-3 h-3" />
@@ -884,68 +880,68 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
 
             {/* Add Block Toolbar */}
-            <div className="mt-4 pt-3 border-t border-white/[0.06] flex flex-wrap items-center gap-1.5">
+            <div className="mt-4 pt-3 border-t border-border flex flex-wrap items-center gap-1.5">
               <span className="text-xs text-zinc-400 mr-1">+ Block:</span>
 
               <button
                 type="button"
                 onClick={() => addBlock('paragraph')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <AlignLeft className="w-3 h-3 text-[#1d8cf8]" /> Text
+                <AlignLeft className="w-3 h-3 text-accent" /> Text
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h2')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <Heading2 className="w-3 h-3 text-[#1d8cf8]" /> Überschrift
+                <Heading2 className="w-3 h-3 text-accent" /> Überschrift
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('todo')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <CheckSquare className="w-3 h-3 text-[#1d8cf8]" /> To-Do
+                <CheckSquare className="w-3 h-3 text-accent" /> To-Do
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('bullet')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <List className="w-3 h-3 text-[#1d8cf8]" /> Liste
+                <List className="w-3 h-3 text-accent" /> Liste
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('callout')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <Sparkles className="w-3 h-3 text-[#1d8cf8]" /> Callout
+                <Sparkles className="w-3 h-3 text-accent" /> Callout
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('code')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <Code className="w-3 h-3 text-[#1d8cf8]" /> Code
+                <Code className="w-3 h-3 text-accent" /> Code
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h1')}
-                className="h-6 px-2 border border-white/[0.08] bg-[#16171a] hover:bg-[#282a2f] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
+                className="btn-action h-6 px-2 text-xs"
               >
-                <Heading1 className="w-3 h-3 text-[#1d8cf8]" /> H1
+                <Heading1 className="w-3 h-3 text-accent" /> H1
               </button>
             </div>
           </div>
         ) : (
-          <div className="p-8 bg-[#222428] border border-white/[0.08] text-center text-zinc-400 text-xs">
+          <div className="p-8 panel-surface text-center text-zinc-400 text-xs">
             Wähle links eine Datei im Datei-Explorer aus oder erstelle eine neue Datei.
           </div>
         )}

frontend/src/index.css

@@ -2,29 +2,44 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ==========================================================================
+   MINDFSIFT DESIGN SYSTEM - ZENTRALE STEUERUNG
+   Hier können Farben, Blauton, Kontraste und Rundungen zentral angepasst werden!
+   ========================================================================== */
+
 :root {
-  /* Template Dark Palette */
-  --bg-canvas: #16171a;
-  --bg-surface: #222428;
-  --bg-surface-elevated: #282a2f;
-  --bg-surface-hover: #32353b;
+  /* --- 1. AKZENTFARBE (Blauton hier regeln) --- */
+  --accent-primary: #1d8cf8;               /* Haupt-Akzentblau */
+  --accent-hover: #3b9cfc;                 /* Hellere Nuance beim Hover */
+  --accent-dim: rgba(29, 140, 248, 0.14);   /* Dezenter Hintergrund für Badges */
+  --accent-border: rgba(29, 140, 248, 0.35);/* Rand für aktive Badges */
 
-  --border-subtle: rgba(255, 255, 255, 0.07);
-  --border-active-green: rgba(34, 197, 94, 0.65);
-  --border-focus: #1d8cf8;
+  /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
+  --bg-app: #16171a;                       /* Gesamte Canvas-Hintergrundfarbe */
+  --bg-panel: #222428;                     /* Karten, Sidebar, Header, Modals */
+  --bg-panel-elevated: #282a2f;            /* Ausgewählte Menüpunkte, Toolbars, Hover */
+  --bg-panel-hover: #32353b;               /* Stärkerer Hover-Effekt */
+  --bg-input: #16171a;                     /* Eingabefelder und Quick-Inputs */
 
-  --color-primary: #1d8cf8;
-  --color-primary-hover: #3b9cfc;
-  --color-on-primary: #ffffff;
+  /* --- 3. RAHMEN & TRENNLINIEN --- */
+  --border-color: rgba(255, 255, 255, 0.08); /* Subtile Linien & Kanten */
+  --border-subtle: rgba(255, 255, 255, 0.05);
 
+  /* --- 4. TEXTFARBEN --- */
+  --text-main: #ffffff;                    /* Haupttext */
+  --text-muted: #a1a1aa;                   /* Sekundärtext (Grau) */
+  --text-faint: #71717a;                   /* Platzhalter & Hilfetexte */
+
+  /* --- 5. STATUS- UND SIGNALFARBEN --- */
   --color-success: #22c55e;
   --color-danger: #ef4444;
   --color-warning: #f97316;
-  --color-purple: #a855f7;
 
-  --text-primary: #ffffff;
-  --text-secondary: #a1a1aa;
-  --text-tertiary: #71717a;
+  /* --- 6. RUNDUNGEN (Zentral konfigurierbar) --- */
+  --radius-card: 0px;                      /* Karten & Panels (0px = eckig) */
+  --radius-btn: 0px;                       /* Standard-Buttons & Tabs */
+  --radius-input: 0px;                     /* Textfelder für Optionen & Eigenschaften */
+  --radius-pill: 9999px;                   /* Runde Elemente (z.B. Quick-Capture) */
 }
 
 * {
@@ -33,16 +48,16 @@
 }
 
 body {
-  background-color: var(--bg-canvas);
-  color: var(--text-primary);
+  background-color: var(--bg-app);
+  color: var(--text-main);
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
 }
 
-/* Subtle clean scrollbar */
+/* Subtiler monochromer Scrollbar */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -51,18 +66,168 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.12);
-  border-radius: 9999px;
+  border-radius: var(--radius-btn);
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.22);
 }
 
-.border-subtle {
-  border: 1px solid var(--border-subtle);
-}
+/* ==========================================================================
+   WIEDERVERWENDBARE SEMANTISCHE KLASSEN
+   ========================================================================== */
 
-.card-surface {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
+@layer components {
+  /* Haupt-Karten, Sidebars und Container */
+  .panel-surface {
+    background-color: var(--bg-panel);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-card);
+  }
+
+  .panel-header {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  /* Monochromer, eckiger Standard-Aktionsbutton */
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: 1.75rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-btn);
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    transition: all 120ms ease;
+    cursor: pointer;
+  }
+  .btn-action:hover {
+    background-color: var(--bg-panel-elevated);
+    color: var(--text-main);
+  }
+
+  /* Primärer Akzent-Button */
+  .btn-primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: 1.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    background-color: var(--accent-primary);
+    border-radius: var(--radius-btn);
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 500;
+    transition: all 120ms ease;
+    cursor: pointer;
+  }
+  .btn-primary:hover {
+    background-color: var(--accent-hover);
+  }
+
+  /* Kleiner eckiger Icon-Button */
+  .btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-btn);
+    color: var(--text-muted);
+    transition: all 120ms ease;
+    cursor: pointer;
+  }
+  .btn-icon:hover {
+    background-color: var(--bg-panel-elevated);
+    color: var(--text-main);
+  }
+
+  .btn-icon-danger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-btn);
+    color: var(--text-muted);
+    transition: all 120ms ease;
+    cursor: pointer;
+  }
+  .btn-icon-danger:hover {
+    background-color: rgba(239, 68, 68, 0.15);
+    color: var(--color-danger);
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  /* Zentrales Texteingabefeld */
+  .input-field {
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-input);
+    color: var(--text-main);
+    font-size: 0.75rem;
+    transition: border-color 120ms ease;
+  }
+  .input-field:focus {
+    outline: none;
+    border-color: var(--accent-primary);
+  }
+  .input-field::placeholder {
+    color: var(--text-faint);
+  }
+
+  /* Header Tabs */
+  .tab-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.875rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    border-bottom: 2px solid transparent;
+    transition: all 120ms ease;
+    cursor: pointer;
+  }
+  .tab-btn:hover {
+    color: var(--text-main);
+    background-color: var(--bg-panel-elevated);
+  }
+  .tab-btn-active {
+    color: var(--accent-primary);
+    border-bottom-color: var(--accent-primary);
+    background-color: var(--bg-panel-elevated);
+  }
+
+  /* Status Badge */
+  .badge-accent {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    background-color: var(--accent-dim);
+    border: 1px solid var(--accent-border);
+    color: var(--accent-primary);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* File Tree Item */
+  .tree-node-active {
+    background-color: var(--bg-panel-elevated);
+    border-left: 2px solid var(--accent-primary);
+    color: var(--text-main);
+  }
 }

frontend/tailwind.config.js

@@ -5,35 +5,43 @@ export default {
   theme: {
     extend: {
       colors: {
-        canvas: '#16171a',
-        surface: {
-          DEFAULT: '#222428',
-          elevated: '#282a2f',
-          hover: '#32353b',
-          border: 'rgba(255, 255, 255, 0.07)',
+        canvas: 'var(--bg-app)',
+        panel: {
+          DEFAULT: 'var(--bg-panel)',
+          elevated: 'var(--bg-panel-elevated)',
+          hover: 'var(--bg-panel-hover)',
         },
-        brand: {
-          DEFAULT: '#1d8cf8',
-          hover: '#3b9cfc',
-          dark: '#0066cc',
+        surface: {
+          DEFAULT: 'var(--bg-panel)',
+          elevated: 'var(--bg-panel-elevated)',
+          hover: 'var(--bg-panel-hover)',
+          border: 'var(--border-color)',
         },
         accent: {
-          green: '#22c55e',
-          orange: '#f97316',
-          purple: '#a855f7',
-          red: '#ef4444',
-          yellow: '#eab308',
+          DEFAULT: 'var(--accent-primary)',
+          hover: 'var(--accent-hover)',
+          dim: 'var(--accent-dim)',
+          border: 'var(--accent-border)',
         },
+        brand: {
+          DEFAULT: 'var(--accent-primary)',
+          hover: 'var(--accent-hover)',
+          dark: 'var(--accent-primary)',
+        },
+      },
+      borderColor: {
+        DEFAULT: 'var(--border-color)',
+        subtle: 'var(--border-subtle)',
+      },
+      borderRadius: {
+        card: 'var(--radius-card)',
+        btn: 'var(--radius-btn)',
+        input: 'var(--radius-input)',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
         mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
       },
-      boxShadow: {
-        soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
-        card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
-        glowBlue: '0 0 20px -3px rgba(29, 140, 248, 0.35)',
-      },
     },
   },
   plugins: [],