Updated

src/components/layout/Header.tsx

@@ -10,7 +10,7 @@ export const Header: React.FC<HeaderProps> = ({ title, actions }) => {
   const { toggleSidebar } = useUIStore()
 
   return (
-    <header className="sticky top-0 z-20 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
+    <header className="sticky top-0 z-20 border-b border-orange-300/60 dark:border-slate-800/60 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md">
       <div className="flex items-center justify-between px-6 py-4">
         <div className="flex items-center gap-4">
           <button

src/components/layout/Sidebar.tsx

@@ -31,17 +31,24 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
       {/* Sidebar */}
       <aside
         className={cn(
-          'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-slate-200 bg-white transition-transform dark:border-slate-800 dark:bg-slate-900 lg:translate-x-0',
+          // Light mode: warm orange/amber gradient
+          'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-orange-300/60',
+          'bg-gradient-to-b from-orange-100 via-amber-100 to-yellow-100',
+          // Dark mode: modern deep gradient (slate-950 -> indigo-950 -> slate-900)
+          'dark:from-slate-950 dark:via-indigo-950 dark:to-slate-900 dark:border-slate-800/60',
+          'transition-transform lg:translate-x-0',
           !isOpen && '-translate-x-full lg:translate-x-0',
         )}
         aria-label="Primary navigation"
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-800">
-          <h1 className="text-xl font-bold text-primary-600">OpenDocs</h1>
+        <div className="flex items-center justify-between p-6 border-b border-orange-300/60 dark:border-slate-800/60">
+          <h1 className="text-xl font-bold bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 bg-clip-text text-transparent">
+            OpenDocs
+          </h1>
           <button
             onClick={onClose}
-            className="lg:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg"
+            className="lg:hidden p-2 hover:bg-orange-300/60 dark:hover:bg-slate-800/60 rounded-lg text-slate-700 dark:text-slate-200"
             aria-label="Close navigation"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -60,20 +67,21 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
                   onClick={onClose}
                   className={({ isActive }) =>
                     cn(
-                      'flex items-center justify-between rounded-lg px-4 py-3 transition-colors',
-                      'hover:bg-slate-100 dark:hover:bg-slate-800',
-                      isActive
-                        ? 'bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-200'
-                        : 'text-slate-700 dark:text-slate-300',
+                      'flex items-center justify-between rounded-lg px-4 py-3 transition-all duration-200',
+                      // Inactive: subtle text + hover
+                      !isActive && 'text-slate-700 dark:text-slate-300 hover:bg-orange-300/60 dark:hover:bg-slate-800/60',
+                      // Active: light mode = warm orange/amber gradient, dark mode = blue/indigo gradient
+                      isActive &&
+                        'bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 text-white shadow-lg shadow-orange-500/30 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 dark:shadow-blue-500/30',
                     )
                   }
                 >
                   <div className="flex items-center gap-3">
                     <span className="w-5 h-5">{item.icon}</span>
-                    <span>{item.label}</span>
+                    <span className="font-medium">{item.label}</span>
                   </div>
                   {item.badge && (
-                    <span className="px-2 py-1 text-xs font-semibold text-white bg-primary-600 rounded-full">
+                    <span className="px-2 py-1 text-xs font-semibold text-white bg-white/20 rounded-full backdrop-blur">
                       {item.badge}
                     </span>
                   )}
@@ -84,9 +92,11 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
         </nav>
 
         {/* Footer */}
-        <div className="border-t border-slate-200 dark:border-slate-800 p-4 space-y-3">
+        <div className="border-t border-orange-300/60 dark:border-slate-800/60 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">Theme</span>
+            <span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+              Theme
+            </span>
             <ThemeSwitcher />
           </div>
         </div>

src/components/tools/AdjustPreview.tsx

@@ -65,7 +65,7 @@ export const AdjustPreview: React.FC<AdjustPreviewProps> = ({ file, values }) =>
   }, [ready, showOriginal, values])
 
   return (
-    <div className="rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900">
+    <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm p-3 dark:border-slate-700">
       <div className="mb-2 flex items-center justify-between gap-2">
         <p className="text-sm font-semibold">Live preview</p>
         <div className="flex items-center gap-3">

src/components/tools/AlbumEditor.tsx

@@ -339,7 +339,7 @@ export const AlbumEditor = forwardRef<AlbumEditorHandle, AlbumEditorProps>(({ fi
         </p>
       </aside>
 
-      <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/40">
+      <div className="rounded-xl border border-slate-200 bg-white/70 dark:bg-slate-800/40 backdrop-blur-sm p-4 dark:border-slate-700">
         <div className="mb-3 flex items-center justify-between">
           <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-200">Live preview</h3>
           <span className="text-xs text-slate-500 dark:text-slate-400">

src/components/tools/ImageEditor.tsx

@@ -255,7 +255,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
   const outHeight = rotCanvas ? Math.round((crop.height / 100) * rotCanvas.height) : 0
 
   return (
-    <div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50">
+    <div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-800/50 backdrop-blur-sm p-4 dark:border-slate-700">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <p className="text-sm font-semibold text-slate-700 dark:text-slate-200">Crop &amp; rotate editor</p>
         <div className="flex flex-wrap items-center gap-2">
@@ -299,7 +299,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
               </div>
               {/* Movable / resizable crop box */}
               <div
-                className="absolute cursor-move border-2 border-primary-500"
+                className="absolute cursor-move border-2 border-orange-500 dark:border-primary-500"
                 style={{ left: `${crop.x}%`, top: `${crop.y}%`, width: `${crop.width}%`, height: `${crop.height}%` }}
                 onPointerDown={startDrag('move')}
               >
@@ -313,7 +313,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
                   <div
                     key={handle}
                     onPointerDown={startDrag(handle)}
-                    className={`absolute h-4 w-4 rounded-full border-2 border-white bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
+                    className={`absolute h-4 w-4 rounded-full border-2 border-white bg-orange-600 dark:bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
                   />
                 ))}
                 <div className="pointer-events-none absolute -top-7 left-0 whitespace-nowrap rounded bg-slate-900/85 px-2 py-0.5 text-xs text-white">

src/components/tools/OutputPreview.tsx

@@ -114,7 +114,7 @@ export const OutputPreview: React.FC<OutputPreviewProps> = ({ outputs, onClear }
         {outputs.map((output, index) => (
           <div
             key={`${output.name}-${index}`}
-            className="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800"
+            className="rounded-lg border border-slate-200 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm p-4 dark:border-slate-700"
           >
             <div className="mb-3 flex justify-center overflow-hidden">
               {renderPreview(output)}

src/components/tools/ToolRunner.tsx

@@ -24,7 +24,7 @@ const isVisible = (gate: { field: string; equals: string } | undefined, values:
 
 const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (value: string) => void }> = ({ field, value, onChange }) => {
   const sharedClass =
-    'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-primary-500'
+    'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-primary-500'
   if (field.type === 'select') {
     return (
       <select name={field.name} value={value} onChange={(event) => onChange(event.target.value)} className={sharedClass}>
@@ -84,7 +84,7 @@ const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (val
           max={field.max}
           step={field.step}
           onChange={(event) => onChange(event.target.value)}
-          className="min-w-0 flex-1 cursor-pointer accent-primary-600"
+          className="min-w-0 flex-1 cursor-pointer accent-orange-600 dark:accent-primary-600"
         />
         <span className="w-14 shrink-0 rounded-md bg-slate-100 py-0.5 text-center text-xs font-semibold tabular-nums text-slate-700 dark:bg-slate-800 dark:text-slate-300">
           {value}
@@ -296,7 +296,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
             {outputs ? (
               <OutputPreview outputs={outputs} onClear={handleClear} />
             ) : (
-              <div className="rounded-lg border-2 border-dashed border-slate-200 bg-slate-50 p-8 text-center dark:border-slate-700 dark:bg-slate-900">
+              <div className="rounded-lg border-2 border-dashed border-orange-200 bg-white/50 dark:border-slate-700 dark:bg-slate-900/50 p-8 text-center backdrop-blur-sm">
                 <p className="font-semibold">Output appears here</p>
                 <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                   Your files are processed entirely in this browser — nothing is uploaded anywhere.
@@ -308,7 +308,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
               <div className="mt-4">
                 <div className="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
                   <div
-                    className="h-full rounded-full bg-primary-600 transition-all duration-300"
+                    className="h-full rounded-full bg-orange-600 dark:bg-primary-600 transition-all duration-300"
                     style={{ width: `${progress}%` }}
                   />
                 </div>

src/components/ui/Badge.tsx

@@ -10,7 +10,7 @@ export const Badge: React.FC<BadgeProps> = ({ className, variant = 'neutral', ..
     neutral: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
     success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200',
     warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200',
-    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-200',
+    primary: 'bg-orange-100 text-orange-800 dark:bg-primary-950 dark:text-primary-200',
   }
 
   return (

src/components/ui/Button.tsx

@@ -13,7 +13,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       'inline-flex items-center justify-center font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-950 disabled:opacity-50 disabled:cursor-not-allowed'
 
     const variants = {
-      primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
+      primary:
+        'bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500 dark:bg-primary-600 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-500',
       secondary: 'bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 hover:bg-slate-300 dark:hover:bg-slate-600 focus:ring-slate-500',
       danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
       ghost: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus:ring-slate-500',

src/components/ui/Card.tsx

@@ -7,7 +7,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ..
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm',
+      'rounded-lg border border-orange-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm shadow-sm',
       className,
     )}
     {...props}
@@ -18,7 +18,7 @@ Card.displayName = 'Card'
 
 export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-orange-200 dark:border-slate-700', className)} {...props} />
   ),
 )
 

src/components/ui/EditorToolbar.tsx

@@ -19,7 +19,7 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   onSave
 }) => {
   return (
-    <div className="flex flex-wrap gap-1 border-b border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-900">
+    <div className="flex flex-wrap gap-1 border-b border-orange-200 bg-white/70 dark:border-slate-700 dark:bg-slate-900/70 backdrop-blur-sm p-3">
       <div className="flex gap-1 border-r border-slate-200 pr-2 dark:border-slate-700">
         <button
           type="button"

src/components/ui/FileUpload.tsx

@@ -102,8 +102,8 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         className={cn(
           'relative flex min-h-[120px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 text-center transition-all duration-200',
           isDragging
-            ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
-            : 'border-slate-300 bg-slate-50 hover:border-slate-400 dark:border-slate-600 dark:bg-slate-800 dark:hover:border-slate-500',
+            ? 'border-orange-500 bg-orange-50 dark:border-primary-500 dark:bg-primary-900/20'
+            : 'border-slate-300 bg-slate-50 hover:border-orange-400 dark:border-slate-600 dark:bg-slate-800 dark:hover:border-slate-500',
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}

src/components/ui/Input.tsx

@@ -20,7 +20,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={type}
           ref={ref}
           className={cn(
-            'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white/80 dark:bg-slate-800 px-3 py-2 text-base placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent dark:focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
             error && 'border-red-500 focus:ring-red-500',
             className,
           )}

src/components/ui/ThemeSwitcher.tsx

@@ -11,7 +11,7 @@ export const ThemeSwitcher: React.FC = () => {
       className={cn(
         'relative inline-flex h-8 w-14 items-center rounded-full',
         'bg-slate-300 dark:bg-slate-600',
-        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950',
+        'focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-primary-500 dark:focus:ring-offset-slate-950',
       )}
       aria-label="Toggle theme"
     >

src/layouts/AppLayout.tsx

@@ -54,7 +54,7 @@ export const Layout: React.FC<LayoutProps> = ({
   ]
 
   return (
-    <div className="flex h-screen bg-slate-50 dark:bg-slate-950">
+    <div className="flex h-screen bg-gradient-to-br from-orange-100 via-amber-100 to-yellow-100 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950">
       <Sidebar
         items={sidebarItems.length > 0 ? sidebarItems : defaultSidebarItems}
         isOpen={sidebarOpen}

src/pages/DashboardPage.tsx

@@ -83,7 +83,7 @@ export const DashboardPage: React.FC = () => {
               <button
                 type="button"
                 onClick={handleCreateDocument}
-                className="rounded-lg border border-slate-200 p-4 text-left transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 text-left transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">New document</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -93,7 +93,7 @@ export const DashboardPage: React.FC = () => {
 
               <Link
                 to="/files"
-                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">Open files</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -103,7 +103,7 @@ export const DashboardPage: React.FC = () => {
 
               <Link
                 to="/tools"
-                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500"
+                className="rounded-lg border border-slate-200 p-4 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500"
               >
                 <span className="text-sm font-semibold text-slate-900 dark:text-white">View tools</span>
                 <span className="mt-2 block text-sm text-slate-600 dark:text-slate-400">
@@ -124,7 +124,7 @@ export const DashboardPage: React.FC = () => {
               <div className="space-y-3">
                 {recentDocuments.map((document) => (
                   <Link key={document.id} to={getEditorRoute(document.type, document.id)}>
-                    <div className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-primary-400 dark:border-slate-700 dark:hover:border-primary-500">
+                    <div className="rounded-lg border border-slate-200 p-3 transition-colors hover:border-orange-400 dark:border-slate-700 dark:hover:border-primary-500">
                       <p className="truncate text-sm font-semibold">{document.name}</p>
                       <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{formatFileSize(document.size)}</p>
                     </div>