feat: implement layout components, shared input UI, and define global color theme

app/globals.css

@@ -3,49 +3,43 @@
 @import "tailwindcss/utilities";
 
 @layer base {
-  :root {
+  :root, .dark {
-    --background: oklch(1 0 0);
+    --background: #676278;
-    --foreground: oklch(0.145 0 0);
+    --background-dark: #605C71;
-    --card: oklch(1 0 0);
+    --foreground: #FBF9FE;
-    --card-foreground: oklch(0.145 0 0);
+    
-    --popover: oklch(1 0 0);
+    --card: #2B2538;
-    --popover-foreground: oklch(0.145 0 0);
+    --card-foreground: #FBF9FE;
-    --primary: oklch(0.205 0 0);
+    
-    --primary-foreground: oklch(0.985 0 0);
+    --popover: #2B2538;
-    --secondary: oklch(0.97 0 0);
+    --popover-foreground: #FBF9FE;
-    --secondary-foreground: oklch(0.205 0 0);
+    
-    --muted: oklch(0.97 0 0);
+    --primary: #6C5BB0;
-    --muted-foreground: oklch(0.556 0 0);
+    --primary-foreground: #FBF9FE;
-    --accent: oklch(0.97 0 0);
+    --primary-hover: #594D9F;
-    --accent-foreground: oklch(0.205 0 0);
+    --primary-pressed: #493D90;
-    --destructive: oklch(0.577 0.245 27.325);
+    
-    --destructive-foreground: oklch(0.985 0 0);
+    --secondary: #1F172B;
-    --border: oklch(0.922 0 0);
+    --secondary-foreground: #C0B8D6;
-    --input: oklch(0.922 0 0);
+    
-    --ring: oklch(0.708 0 0);
+    --muted: #3B3448;
+    --muted-foreground: #8F89A5;
+    
+    --accent: #3B3448;
+    --accent-foreground: #FBF9FE;
+    
+    --destructive: #d8644a;
+    --destructive-foreground: #FBF9FE;
+    
+    --border: #473F55;
+    --input: #473F55;
+    --input-bg: #150E21;
+    --overlay: #150E21;
+    
+    --ring: #594D9F;
+    
     --radius: 0.625rem;
   }
-  .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-  }
 }
 
 @layer base {
@@ -53,6 +47,9 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
+    background: linear-gradient(to bottom right, var(--background), var(--background-dark));
+    background-attachment: fixed;
+    min-height: 100vh;
   }
 }

components/layout/header.tsx

@@ -4,13 +4,13 @@ import { User } from "lucide-react";
 
 export function Header() {
   return (
-    <header className="h-16 border-b border-border bg-background flex items-center justify-between px-6 shrink-0">
+    <header className="h-16 border-b border-border/40 bg-background/40 backdrop-blur-md flex items-center justify-between px-6 shrink-0 sticky top-0 z-10">
       <div className="text-sm text-muted-foreground font-medium">
         Kişisel Odak Alanı
       </div>
       <div className="flex items-center gap-3">
         <div className="text-sm font-medium">Lokal Kullanıcı</div>
-        <div className="flex items-center justify-center h-9 w-9 bg-muted text-muted-foreground rounded-full">
+        <div className="flex items-center justify-center h-9 w-9 bg-secondary text-secondary-foreground rounded-full border border-border/50">
           <User className="h-5 w-5" />
         </div>
       </div>

components/layout/sidebar.tsx

@@ -24,7 +24,7 @@ export function Sidebar() {
   const pathname = usePathname();
 
   return (
-    <aside className="w-64 border-r border-border bg-card min-h-screen flex flex-col shrink-0">
+    <aside className="w-64 border-r border-border bg-secondary min-h-screen flex flex-col shrink-0">
       <div className="h-16 flex items-center px-6 border-b border-border text-primary">
         <BrainCircuit className="h-6 w-6 mr-2" />
         <h2 className="text-xl font-bold tracking-tight">MindSpace</h2>

components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-input-bg px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm",
         className
       )}
       {...props}

tailwind.config.ts

@@ -18,12 +18,17 @@ const config: Config = {
         sky: "#4f7fbf",
         border: "var(--border)",
         input: "var(--input)",
+        "input-bg": "var(--input-bg)",
         ring: "var(--ring)",
         background: "var(--background)",
+        "background-dark": "var(--background-dark)",
         foreground: "var(--foreground)",
+        overlay: "var(--overlay)",
         primary: {
           DEFAULT: "var(--primary)",
           foreground: "var(--primary-foreground)",
+          hover: "var(--primary-hover)",
+          pressed: "var(--primary-pressed)",
         },
         secondary: {
           DEFAULT: "var(--secondary)",