Updates UI styling with orange accents and blurred backgrounds

- Changes card and section borders from slate to orange.
- Applies translucent white backgrounds with backdrop blur for a frosted glass effect.
- Adjusts accent text color to orange for consistency.

Author: akash098p

src/pages/ToolsPage.tsx

@@ -16,14 +16,14 @@ const groupDescriptions: Partial<Record<ToolGroup, string>> = {
 const ToolCard: React.FC<{ tool: ToolDefinition }> = ({ tool }) => (
   <Link
     to={`/tools/${tool.id}`}
-    className="group rounded-lg border border-slate-200 bg-white p-5 transition-colors hover:border-primary-400 dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-500"
+    className="group rounded-lg border-2 border-slate-200 bg-white/70 dark:border-slate-700 dark:bg-slate-900/70 backdrop-blur-sm p-5 transition-colors hover:border-goldenrod-400 dark:hover:border-primary-500"
   >
     <div className="flex items-start gap-4">
       <img src={tool.icon} alt="" className="h-11 w-11 shrink-0 rounded-lg" />
       <div className="min-w-0">
         <p className="truncate font-semibold text-slate-900 dark:text-white">{tool.name}</p>
         <p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-400">{tool.description}</p>
-        <span className="mt-3 inline-block text-sm font-medium text-primary-600 group-hover:underline dark:text-primary-400">
+        <span className="mt-3 inline-block text-sm font-medium text-orange-600 group-hover:underline dark:text-primary-400">
           Open tool →
         </span>
       </div>
@@ -35,7 +35,7 @@ export const ToolsPage: React.FC = () => {
   return (
     <Layout title="Tools">
       <div className="space-y-8">
-        <section className="rounded-lg border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <section className="rounded-lg border border-orange-200 bg-white/70 backdrop-blur-sm p-6 dark:border-slate-800 dark:bg-slate-900/70">
           <Badge variant="success">100% client-side</Badge>
           <h2 className="mt-3 text-2xl font-bold text-slate-950 dark:text-white">Image &amp; PDF tools</h2>
           <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600 dark:text-slate-300">

src/pages/WorkspacePage.tsx

@@ -8,7 +8,7 @@ export const WorkspacePage: React.FC = () => {
   return (
     <Layout title="Workspace">
       <div className="space-y-6">
-        <section className="rounded-lg border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
+        <section className="rounded-lg border border-orange-200 bg-white/70 backdrop-blur-sm p-6 dark:border-slate-800 dark:bg-slate-900/70">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
             <div>
               <Badge variant="success">All features unlocked and free</Badge>