style: align light palette to Quiet Luxury reference

- Page background now #F8F9FA (was white); tokens matched to reference:
  foreground slate-900, muted slate-50/slate-500, border slate-200,
  card pure white, tertiary slate-400, border-light slate-100
- Sidebar colors matched to mock: emerald-200/70 inactive, white/8 active
  with emerald-400 active icon, emerald-50 logo, red-300 logout, right border
- Content wrapped in max-w-[1400px] centered container (px-8 lg:px-10)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/globals.css

@@ -16,9 +16,9 @@
    them to Tailwind color utilities (bg-background, text-primary…).
    ========================================================= */
 :root {
-  /* Base */
-  --background: #ffffff;
-  --foreground: #1a1a1a;
+  /* Base — sfondo generale app #F8F9FA (color-bg-light), testo slate-900 */
+  --background: #F8F9FA;
+  --foreground: #0F172A;
 
   /* Brand primary — verde scuro iamcavalli */
   --primary: #1A463C;
@@ -28,29 +28,29 @@
   --accent: #DEF168;
   --accent-foreground: #1A463C;
 
-  /* Secondary — grigio neutro */
-  --secondary: #f4f4f5;
-  --secondary-foreground: #1a1a1a;
+  /* Secondary — grigio neutro (slate-100) */
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0F172A;
 
-  /* Muted — per testi e sfondi secondari */
-  --muted: #f9f9f9;
-  --muted-foreground: #71717a;
+  /* Muted — sfondi secondari (slate-50) / testo slate-500 */
+  --muted: #f8fafc;
+  --muted-foreground: #64748B;
 
   /* Destructive */
   --destructive: #ef4444;
   --destructive-foreground: #ffffff;
 
-  /* Card */
-  --card: #ffffff;
-  --card-foreground: #1a1a1a;
+  /* Card — bianco puro (color-bg-card) */
+  --card: #FFFFFF;
+  --card-foreground: #0F172A;
 
   /* Popover */
-  --popover: #ffffff;
-  --popover-foreground: #1a1a1a;
+  --popover: #FFFFFF;
+  --popover-foreground: #0F172A;
 
-  /* Border / Input / Ring */
-  --border: #e5e7eb;
-  --input: #e5e7eb;
+  /* Border (slate-200 = border-card) / Input / Ring */
+  --border: #e2e8f0;
+  --input: #e2e8f0;
   --ring: #1A463C;
 
   /* Semantic — stato task/pagamenti */
@@ -58,10 +58,10 @@
   --warning: #ca8a04;
   --info: #2563eb;
 
-  /* Legacy — usati inline nei componenti esistenti */
-  --tertiary: #999999;
-  --bg-subtle: #f9f9f9;
-  --border-light: #e5e5e5;
+  /* Legacy — text-light slate-400, border-soft slate-100 */
+  --tertiary: #94A3B8;
+  --bg-subtle: #f8fafc;
+  --border-light: #f1f5f9;
 
   --radius: 0.5rem;
 }

src/components/admin/AdminShell.tsx

@@ -58,7 +58,9 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
           </div>
         </header>
 
-        <main className="flex-1 px-8 py-8 overflow-y-auto">{children}</main>
+        <main className="flex-1 overflow-y-auto">
+          <div className="max-w-[1400px] w-full mx-auto px-8 py-8 lg:px-10">{children}</div>
+        </main>
       </div>
     </div>
   );

src/components/admin/AdminSidebar.tsx

@@ -41,7 +41,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
   return (
     <aside
       className={cn(
-        "shrink-0 min-h-screen bg-[#1A463C] flex flex-col overflow-hidden",
+        "shrink-0 min-h-screen bg-[#1A463C] border-r border-emerald-950/20 flex flex-col overflow-hidden",
         "transition-[width] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)]",
         collapsed ? "w-16" : "w-[200px]"
       )}
@@ -54,7 +54,7 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
         )}
       >
         {!collapsed && (
-          <span className="font-bold text-white tracking-tight text-sm whitespace-nowrap">
+          <span className="font-bold text-emerald-50 tracking-tight text-sm whitespace-nowrap">
             iamcavalli
           </span>
         )}
@@ -70,14 +70,18 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
               href={href}
               title={collapsed ? label : undefined}
               className={cn(
-                "flex items-center py-2 rounded-md text-sm transition-colors",
+                "flex items-center py-2.5 rounded-lg text-sm transition-all duration-200",
                 rowClass,
                 active
-                  ? "bg-white/15 text-white font-medium"
-                  : "text-white/65 hover:text-white hover:bg-white/10"
+                  ? "bg-white/[0.08] text-white font-medium shadow-sm"
+                  : "text-emerald-200/70 hover:text-white hover:bg-white/5"
               )}
             >
-              <Icon size={16} strokeWidth={1.8} className="shrink-0" />
+              <Icon
+                size={16}
+                strokeWidth={1.8}
+                className={cn("shrink-0", active && "text-emerald-400")}
+              />
               {!collapsed && <span className="whitespace-nowrap">{label}</span>}
             </Link>
           );
@@ -92,14 +96,15 @@ export function AdminSidebar({ collapsed = false }: { collapsed?: boolean }) {
             collapsed ? "justify-center px-0" : "justify-between px-3"
           )}
         >
-          {!collapsed && <span className="text-xs text-white/50">Tema</span>}
+          {!collapsed && <span className="text-xs text-emerald-200/50">Tema</span>}
           <ThemeToggle />
         </div>
         <button
           onClick={() => signOut({ callbackUrl: "/admin/login" })}
           title={collapsed ? "Esci" : undefined}
           className={cn(
-            "flex items-center py-2 w-full rounded-md text-sm text-white/65 hover:text-white hover:bg-white/10 transition-colors",
+            "flex items-center py-2.5 w-full rounded-lg text-sm transition-all duration-200",
+            "text-red-300/80 hover:text-red-200 hover:bg-red-950/20",
             rowClass
           )}
         >