feat: pagina Impostazioni redesign Quiet Luxury — sezioni tokenizzate + PoolManager tassonomie dual-mode

- impostazioni/page.tsx: sezione Analytics con input tariffa bordato (€/h, font-mono) + header uppercase
- TaxonomyManager: card sezione tokenizzata, griglie Offerte (2col) / Catalogo (3col)
- PoolManager: box bg-muted, badge conteggio mono, chip valori, add su Enter, delete cascade confermata
- DESIGN-SYSTEM.md: note pagina Impostazioni

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

src/components/admin/impostazioni/TaxonomyManager.tsx

@@ -25,26 +25,28 @@ function Section({
   subtitle,
   fields,
   pools,
+  gridClass,
 }: {
   icon: React.ReactNode;
   title: string;
   subtitle: string;
   fields: FieldDef[];
   pools: Record<string, string[]>;
+  gridClass: string;
 }) {
   return (
-    <div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
-      <div className="flex items-start gap-3 mb-5">
-        <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-[#1A463C]/8 text-[#1A463C]">
+    <section className="rounded-xl border border-border-light bg-card p-6 shadow-card">
+      <div className="mb-6 flex items-start gap-3">
+        <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border-light bg-muted text-muted-foreground">
           {icon}
         </div>
         <div>
-          <h2 className="text-base font-semibold text-[#1a1a1a] leading-tight">{title}</h2>
-          <p className="text-xs text-[#71717a] mt-0.5">{subtitle}</p>
+          <h2 className="text-xs font-bold uppercase tracking-wider text-foreground">{title}</h2>
+          <p className="mt-0.5 text-xs text-tertiary">{subtitle}</p>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <div className={`grid gap-6 border-t border-border-light pt-4 ${gridClass}`}>
         {fields.map((f) => (
           <PoolManager
             key={f.id}
@@ -55,28 +57,30 @@ function Section({
           />
         ))}
       </div>
-    </div>
+    </section>
   );
 }
 
 export function TaxonomyManager({ pools }: { pools: Record<string, string[]> }) {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <Section
-        icon={<Tag className="h-[18px] w-[18px]" />}
+        icon={<Tag className="h-5 w-5" />}
         title="Tassonomie Offerte"
         subtitle="Valori dei campi Categoria, Ticket, Tipo e Obiettivo dell'editor offerte."
         fields={OFFER_FIELDS}
         pools={pools}
+        gridClass="grid-cols-1 md:grid-cols-2"
       />
       <Section
-        icon={<BookOpen className="h-[18px] w-[18px]" />}
+        icon={<BookOpen className="h-5 w-5" />}
         title="Tassonomie Catalogo"
         subtitle="Valori dei campi Fase, Offerta e Pacchetto del catalogo servizi."
         fields={CATALOG_FIELDS}
         pools={pools}
+        gridClass="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       />
-      <p className="text-xs text-[#a1a1aa] leading-relaxed">
+      <p className="max-w-4xl px-2 text-xs leading-relaxed text-tertiary">
         I valori si sincronizzano ovunque: creandone uno dall&apos;editor offerte o dal catalogo
         comparirà qui automaticamente. Eliminando un valore da qui viene rimosso ovunque sia usato.
       </p>