Make ambient background global and lighten card colors

- Moved ambient from DashboardPage to AppLayout so all pages get the
  drifting gradient effect, not just the dashboard
- Lightened card colors: --card 5% → 8%, --card-elevated 7% → 11%,
  popover and FullCalendar backgrounds updated to match
- Renamed DashboardAmbient → AmbientBackground in layout/
- Glassmorphism class renamed dashboard-glass → ambient-glass,
  applied at AppLayout content wrapper level

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

frontend/src/components/dashboard/DashboardPage.tsx

@@ -16,7 +16,6 @@ import DayBriefing from './DayBriefing';
 import CountdownWidget from './CountdownWidget';
 import TrackedProjectsWidget from './TrackedProjectsWidget';
 import AlertBanner from './AlertBanner';
-import DashboardAmbient from './DashboardAmbient';
 import EventForm from '../calendar/EventForm';
 import TodoForm from '../todos/TodoForm';
 import ReminderForm from '../reminders/ReminderForm';
@@ -165,10 +164,9 @@ export default function DashboardPage() {
     : null;
 
   return (
-    <div className="flex flex-col h-full relative dashboard-glass">
+    <div className="flex flex-col h-full">
-      <DashboardAmbient />
       {/* Header — greeting + date + quick add */}
-      <div className="relative z-10 px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
+      <div className="px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
         <div>
           <h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
             {getGreeting(settings?.preferred_name || undefined)}
@@ -239,7 +237,7 @@ export default function DashboardPage() {
         </div>
       </div>
 
-      <div className="relative z-10 flex-1 overflow-y-auto px-4 md:px-6 pb-6">
+      <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
         <div className="space-y-3 sm:space-y-5 animate-content-reveal">
           {/* Week Timeline */}
           {upcomingData && (

frontend/src/components/layout/AmbientBackground.tsx

@@ -1,13 +1,14 @@
 /**
- * Ambient background effect for the dashboard.
+ * Global ambient background effect.
  *
- * Uses CSS radial gradients on a full-size div with animated position shifting.
+ * Uses CSS radial gradients with animated position shifting to create
- * The accent color is read from CSS custom properties so it works with any theme.
+ * a living, breathing atmosphere behind all page content.
+ * The accent color is read from CSS custom properties so it adapts to any theme.
  *
  * Also renders a noise texture for tactile depth and a radial vignette
  * to darken edges and draw focus to center content.
  */
-export default function DashboardAmbient() {
+export default function AmbientBackground() {
   return (
     <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
       {/* Animated gradient orbs — oversized so drift never clips at visible edges */}

frontend/src/components/layout/AppLayout.tsx

@@ -7,6 +7,7 @@ import { LockProvider } from '@/hooks/useLock';
 import { NotificationProvider } from '@/hooks/useNotifications';
 import { Button } from '@/components/ui/button';
 import Sidebar from './Sidebar';
+import AmbientBackground from './AmbientBackground';
 import LockOverlay from './LockOverlay';
 import NotificationToaster from '@/components/notifications/NotificationToaster';
 
@@ -33,15 +34,16 @@ export default function AppLayout() {
               mobileOpen={mobileOpen}
               onMobileClose={() => setMobileOpen(false)}
             />
-            <div className="flex-1 flex flex-col overflow-hidden">
+            <div className="flex-1 flex flex-col overflow-hidden relative ambient-glass">
+              <AmbientBackground />
               {/* Mobile header */}
-              <div className="flex md:hidden items-center h-14 border-b bg-card px-4">
+              <div className="relative z-10 flex md:hidden items-center h-14 border-b bg-card px-4">
                 <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)}>
                   <Menu className="h-5 w-5" />
                 </Button>
                 <h1 className="text-lg font-bold text-accent ml-3">UMBRA</h1>
               </div>
-              <main className="flex-1 overflow-y-auto mobile-scale">
+              <main className="relative z-10 flex-1 overflow-y-auto mobile-scale">
                 <Outlet />
               </main>
             </div>

frontend/src/index.css

@@ -6,10 +6,10 @@
   :root {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 5%;
+    --card: 0 0% 8%;
     --card-foreground: 0 0% 98%;
-    --card-elevated: 0 0% 7%;
+    --card-elevated: 0 0% 11%;
-    --popover: 0 0% 5%;
+    --popover: 0 0% 8%;
     --popover-foreground: 0 0% 98%;
     --primary: var(--accent-h) var(--accent-s) var(--accent-l);
     --primary-foreground: 0 0% 98%;
@@ -94,7 +94,7 @@
   --fc-event-border-color: hsl(var(--accent-color));
   --fc-event-text-color: hsl(0 0% 98%);
   --fc-page-bg-color: hsl(0 0% 3.9%);
-  --fc-neutral-bg-color: hsl(0 0% 5%);
+  --fc-neutral-bg-color: hsl(0 0% 8%);
   --fc-neutral-text-color: hsl(0 0% 98%);
   --fc-list-event-hover-bg-color: hsl(0 0% 10%);
   --fc-today-bg-color: hsl(var(--accent-color) / 0.08);
@@ -144,7 +144,7 @@
 }
 
 .fc .fc-col-header-cell {
-  background-color: hsl(0 0% 5%);
+  background-color: hsl(0 0% 8%);
   border-color: var(--fc-border-color);
 }
 
@@ -195,7 +195,7 @@
 
 /* ── FullCalendar "+more" popover fixes ── */
 .fc .fc-more-popover {
-  background-color: hsl(0 0% 5%);
+  background-color: hsl(0 0% 8%);
   border-color: hsl(0 0% 14.9%);
   border-radius: 0.5rem;
   min-width: 220px;
@@ -203,7 +203,7 @@
 }
 
 .fc .fc-more-popover .fc-popover-header {
-  background-color: hsl(0 0% 7%);
+  background-color: hsl(0 0% 11%);
   color: hsl(0 0% 98%);
   padding: 8px 12px;
   border-radius: 0.5rem 0.5rem 0 0;
@@ -457,9 +457,9 @@ form[data-submitted] input:invalid + button {
 
 /* ── Dashboard ambient layers ── */
 
-/* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */
+/* Glassmorphism — cards become semi-transparent to let ambient show through */
-.dashboard-glass .bg-card {
+.ambient-glass .bg-card {
-  background-color: hsl(0 0% 5% / 0.65) !important;
+  background-color: hsl(0 0% 8% / 0.65) !important;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }