feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

memento-note/components/hierarchical-notebook-selector.tsx

@@ -111,7 +111,7 @@ export function HierarchicalNotebookSelector({
                   if (!searchQuery) setIsOpen(false)
                 }}
                 className={`flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all group
-                  ${isSelected ? 'bg-memento-blue/15 text-memento-blue font-bold dark:bg-memento-blue/20' : 'hover:bg-muted dark:hover:bg-white/5 text-ink'}`}
+                  ${isSelected ? 'bg-brand-accent/15 text-brand-accent font-bold dark:bg-brand-accent/20' : 'hover:bg-muted dark:hover:bg-white/5 text-ink'}`}
               >
                 <div className="w-4 flex items-center justify-center">
                   {hasChildren ? (
@@ -124,7 +124,7 @@ export function HierarchicalNotebookSelector({
                   ) : null}
                 </div>
 
-                <div className={`p-1 rounded ${isSelected ? 'bg-memento-blue/25 dark:bg-memento-blue/30' : 'bg-muted/50 dark:bg-white/5 group-hover:bg-white/40'}`}>
+                <div className={`p-1 rounded ${isSelected ? 'bg-brand-accent/25 dark:bg-brand-accent/30' : 'bg-muted/50 dark:bg-white/5 group-hover:bg-white/40'}`}>
                   {isExpanded && hasChildren ? <FolderOpen size={13} /> : <Folder size={13} />}
                 </div>
 
@@ -157,9 +157,9 @@ export function HierarchicalNotebookSelector({
       <div
         ref={triggerRef}
         onClick={() => setIsOpen(prev => !prev)}
-        className={`w-full bg-card dark:bg-white/5 border border-border/80 rounded-xl outline-none focus:ring-4 ring-memento-blue/10 focus:border-memento-blue/40 transition-all cursor-pointer text-ink flex items-center gap-3 ${size === 'sm' ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm'}`}
+        className={`w-full bg-card dark:bg-white/5 border border-border/80 rounded-xl outline-none focus:ring-4 ring-brand-accent/10 focus:border-brand-accent/40 transition-all cursor-pointer text-ink flex items-center gap-3 ${size === 'sm' ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm'}`}
       >
-        <Folder size={size === 'sm' ? 14 : 16} className="text-memento-blue/70 shrink-0" />
+        <Folder size={size === 'sm' ? 14 : 16} className="text-brand-accent/70 shrink-0" />
         <div className="flex-1 flex items-center gap-1 min-w-0">
           {path.length > 0 ? (
             <div className="flex items-center gap-1.5 truncate">
@@ -201,7 +201,7 @@ export function HierarchicalNotebookSelector({
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                     placeholder={placeholder}
-                    className="w-full bg-card border border-border rounded-lg pl-9 pr-4 py-2 text-xs outline-none focus:border-memento-blue transition-colors"
+                    className="w-full bg-card border border-border rounded-lg pl-9 pr-4 py-2 text-xs outline-none focus:border-brand-accent transition-colors"
                   />
                 </div>
               </div>
@@ -216,7 +216,7 @@ export function HierarchicalNotebookSelector({
                 </span>
                 <button
                   onClick={() => setIsOpen(false)}
-                  className="text-[10px] font-bold text-memento-blue hover:underline"
+                  className="text-[10px] font-bold text-brand-accent hover:underline"
                 >
                   Close
                 </button>