stagent 0.1.0

package/src/app/globals.css

@@ -0,0 +1,733 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  /* Semantic status colors */
+  --color-status-running: var(--status-running);
+  --color-status-completed: var(--status-completed);
+  --color-status-failed: var(--status-failed);
+  --color-status-warning: var(--status-warning);
+  /* Semantic priority colors */
+  --color-priority-critical: var(--priority-critical);
+  --color-priority-high: var(--priority-high);
+  --color-priority-medium: var(--priority-medium);
+  --color-priority-low: var(--priority-low);
+  /* Semantic connection/auth colors */
+  --color-success: var(--status-completed);
+  --color-warning: var(--status-warning);
+  --color-info: var(--status-running);
+  /* Complexity colors */
+  --color-complexity-simple: var(--complexity-simple);
+  --color-complexity-moderate: var(--complexity-moderate);
+  --color-complexity-complex: var(--complexity-complex);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.98 0.005 260);
+  --foreground: oklch(0.15 0.02 260);
+  --card: rgba(255, 255, 255, 0.6);
+  --card-foreground: oklch(0.15 0.02 260);
+  --popover: rgba(255, 255, 255, 0.6);
+  --popover-foreground: oklch(0.15 0.02 260);
+  --primary: oklch(0.55 0.18 260);
+  --primary-foreground: oklch(0.98 0.005 260);
+  --secondary: oklch(0.93 0.01 260);
+  --secondary-foreground: oklch(0.25 0.03 260);
+  --muted: oklch(0.94 0.008 260);
+  --muted-foreground: oklch(0.45 0.03 260);
+  --surface-1: rgba(255, 255, 255, 0.92);
+  --surface-2: rgba(255, 255, 255, 0.82);
+  --surface-3: rgba(255, 255, 255, 0.72);
+  --surface-foreground: oklch(0.18 0.02 260);
+  --accent: oklch(0.93 0.01 260);
+  --accent-foreground: oklch(0.25 0.03 260);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.005 260);
+  --border: var(--glass-border);
+  --input: rgba(255, 255, 255, 0.4);
+  --ring: oklch(0.55 0.18 260);
+  --chart-1: oklch(0.55 0.22 260);
+  --chart-2: oklch(0.6 0.19 170);
+  --chart-3: oklch(0.55 0.19 45);
+  --chart-4: oklch(0.6 0.22 300);
+  --chart-5: oklch(0.65 0.19 30);
+  --sidebar: rgba(255, 255, 255, 0.65);
+  --sidebar-foreground: oklch(0.15 0.02 260);
+  --sidebar-primary: oklch(0.55 0.18 260);
+  --sidebar-primary-foreground: oklch(0.98 0.005 260);
+  --sidebar-accent: oklch(0.93 0.01 260);
+  --sidebar-accent-foreground: oklch(0.25 0.03 260);
+  --sidebar-border: var(--glass-border-subtle);
+  --sidebar-ring: oklch(0.55 0.18 260);
+  /* Semantic status tokens */
+  --status-running: oklch(0.55 0.18 260);
+  --status-completed: oklch(0.6 0.15 170);
+  --status-failed: oklch(0.55 0.2 25);
+  --status-warning: oklch(0.7 0.15 75);
+  /* Priority tokens */
+  --priority-critical: oklch(0.55 0.2 25);
+  --priority-high: oklch(0.7 0.15 55);
+  --priority-medium: oklch(0.55 0.18 260);
+  --priority-low: oklch(0.6 0.02 260);
+  /* Complexity tokens */
+  --complexity-simple: oklch(0.6 0.15 170);
+  --complexity-moderate: oklch(0.7 0.15 75);
+  --complexity-complex: oklch(0.55 0.2 25);
+
+  /* Glass backgrounds */
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.75);
+  --glass-bg-light: rgba(255, 255, 255, 0.4);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.25);
+
+  /* Glass borders — hue-tinted for soft edges */
+  --glass-border: oklch(0.8 0.02 260 / 0.25);
+  --glass-border-strong: oklch(0.75 0.03 260 / 0.35);
+  --glass-border-subtle: oklch(0.85 0.015 260 / 0.15);
+
+  /* Glass shadows — colored, not gray */
+  --glass-shadow: 0 8px 32px oklch(0.55 0.05 260 / 0.1);
+  --glass-shadow-lg: 0 12px 48px oklch(0.55 0.05 260 / 0.15);
+  --glass-shadow-sm: 0 4px 16px oklch(0.55 0.05 260 / 0.08);
+
+  /* Inner glow (top-edge highlight) — reduced to not compete with borders */
+  --glass-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+  --glass-inner-glow-subtle: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
+
+  /* Glass modal background */
+  --glass-bg-modal: oklch(0.97 0.008 260 / 0.65);
+
+  /* Blur levels */
+  --blur-glass-sm: 8px;
+  --blur-glass-md: 16px;
+  --blur-glass-lg: 24px;
+  --blur-glass-xl: 40px;
+
+  /* Pastel gradient presets */
+  --gradient-morning-sky: linear-gradient(
+    135deg,
+    oklch(0.94 0.04 85) 0%,
+    oklch(0.93 0.035 60) 50%,
+    oklch(0.94 0.03 40) 100%
+  );
+  --gradient-ocean-mist: linear-gradient(
+    135deg,
+    oklch(0.92 0.04 200) 0%,
+    oklch(0.93 0.035 170) 50%,
+    oklch(0.94 0.03 155) 100%
+  );
+  --gradient-forest-dawn: linear-gradient(
+    135deg,
+    oklch(0.93 0.03 155) 0%,
+    oklch(0.93 0.025 140) 50%,
+    oklch(0.94 0.03 135) 100%
+  );
+  --gradient-sunset-glow: linear-gradient(
+    135deg,
+    oklch(0.93 0.04 60) 0%,
+    oklch(0.92 0.045 30) 50%,
+    oklch(0.93 0.04 10) 100%
+  );
+  --gradient-twilight: linear-gradient(
+    135deg,
+    oklch(0.91 0.04 290) 0%,
+    oklch(0.92 0.035 260) 50%,
+    oklch(0.93 0.03 260) 100%
+  );
+  --gradient-neutral: linear-gradient(
+    135deg,
+    oklch(0.96 0.015 80) 0%,
+    oklch(0.95 0.012 60) 50%,
+    oklch(0.96 0.01 90) 100%
+  );
+}
+
+.dark {
+  /* Background — deep black with navy undertone */
+  --background: oklch(0.09 0.02 265);
+  --foreground: oklch(0.93 0.015 270);
+
+  /* Cards — navy-tinted translucency */
+  --card: oklch(0.16 0.025 265 / 0.6);
+  --card-foreground: oklch(0.93 0.015 270);
+  --popover: oklch(0.14 0.025 265 / 0.5);
+  --popover-foreground: oklch(0.93 0.015 270);
+
+  /* Primary — blue, stays mostly the same */
+  --primary: oklch(0.65 0.18 260);
+  --primary-foreground: oklch(0.09 0.02 265);
+
+  /* Secondary — velvet-shifted */
+  --secondary: oklch(0.18 0.035 310);
+  --secondary-foreground: oklch(0.93 0.015 270);
+
+  /* Muted — navy mid-tone */
+  --muted: oklch(0.18 0.03 290);
+  --muted-foreground: oklch(0.6 0.03 270);
+  --surface-1: oklch(0.16 0.02 268 / 0.96);
+  --surface-2: oklch(0.14 0.018 272 / 0.9);
+  --surface-3: oklch(0.12 0.02 278 / 0.84);
+  --surface-foreground: oklch(0.93 0.015 270);
+
+  /* Accent — navy, distinct from secondary velvet */
+  --accent: oklch(0.20 0.04 285);
+  --accent-foreground: oklch(0.93 0.015 270);
+
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.005 260);
+  --border: var(--glass-border);
+  --input: oklch(0.14 0.03 265 / 0.4);
+  --ring: oklch(0.65 0.18 260);
+
+  --chart-1: oklch(0.65 0.22 260);
+  --chart-2: oklch(0.65 0.19 170);
+  --chart-3: oklch(0.65 0.19 45);
+  --chart-4: oklch(0.65 0.22 300);
+  --chart-5: oklch(0.7 0.19 30);
+
+  /* Sidebar — slightly lighter velvet-black */
+  --sidebar: oklch(0.11 0.025 290 / 0.6);
+  --sidebar-foreground: oklch(0.93 0.015 270);
+  --sidebar-primary: oklch(0.65 0.18 260);
+  --sidebar-primary-foreground: oklch(0.09 0.02 265);
+  --sidebar-accent: oklch(0.20 0.04 300);
+  --sidebar-accent-foreground: oklch(0.93 0.015 270);
+  --sidebar-border: var(--glass-border-subtle);
+  --sidebar-ring: oklch(0.65 0.18 260);
+  /* Semantic status tokens */
+  --status-running: oklch(0.65 0.18 260);
+  --status-completed: oklch(0.65 0.15 170);
+  --status-failed: oklch(0.65 0.2 25);
+  --status-warning: oklch(0.75 0.15 75);
+  /* Priority tokens */
+  --priority-critical: oklch(0.65 0.2 25);
+  --priority-high: oklch(0.75 0.15 55);
+  --priority-medium: oklch(0.65 0.18 260);
+  --priority-low: oklch(0.6 0.02 260);
+  /* Complexity tokens */
+  --complexity-simple: oklch(0.65 0.15 170);
+  --complexity-moderate: oklch(0.75 0.15 75);
+  --complexity-complex: oklch(0.65 0.2 25);
+
+  /* Dark mode glass overrides — navy-tinted instead of colorless white */
+  --glass-bg: oklch(0.18 0.025 265 / 0.45);
+  --glass-bg-heavy: oklch(0.22 0.03 265 / 0.55);
+  --glass-bg-light: oklch(0.16 0.02 265 / 0.25);
+  --glass-bg-subtle: oklch(0.14 0.015 265 / 0.15);
+
+  /* Glass borders — navy-tinted for cohesion */
+  --glass-border: oklch(0.4 0.04 265 / 0.3);
+  --glass-border-strong: oklch(0.45 0.05 270 / 0.4);
+  --glass-border-subtle: oklch(0.35 0.03 285 / 0.18);
+
+  /* Glass shadows — deeper with navy tint */
+  --glass-shadow: 0 8px 32px oklch(0.05 0.03 265 / 0.5);
+  --glass-shadow-lg: 0 12px 48px oklch(0.05 0.03 265 / 0.6);
+  --glass-shadow-sm: 0 4px 16px oklch(0.05 0.03 265 / 0.35);
+
+  /* Inner glow — faint navy highlight */
+  --glass-inner-glow: inset 0 1px 0 0 oklch(0.5 0.04 270 / 0.15);
+  --glass-inner-glow-subtle: inset 0 1px 0 0 oklch(0.5 0.04 270 / 0.1);
+
+  /* Modal — deep navy glass */
+  --glass-bg-modal: oklch(0.12 0.03 285 / 0.75);
+
+  /* Dark mode gradient presets — distinct identities using black/velvet/blue/navy palette */
+  /* Dashboard/Home — deep black → midnight blue */
+  --gradient-morning-sky: linear-gradient(
+    135deg,
+    oklch(0.10 0.02 260) 0%,
+    oklch(0.12 0.035 260) 50%,
+    oklch(0.10 0.025 270) 100%
+  );
+  /* Projects/Workflows — deep blue → blue-navy */
+  --gradient-ocean-mist: linear-gradient(
+    135deg,
+    oklch(0.11 0.04 260) 0%,
+    oklch(0.12 0.045 265) 50%,
+    oklch(0.11 0.035 265) 100%
+  );
+  /* Monitor — black → deep navy */
+  --gradient-forest-dawn: linear-gradient(
+    135deg,
+    oklch(0.09 0.02 270) 0%,
+    oklch(0.11 0.035 285) 50%,
+    oklch(0.10 0.03 290) 100%
+  );
+  /* Inbox — velvet → warm navy */
+  --gradient-sunset-glow: linear-gradient(
+    135deg,
+    oklch(0.12 0.04 320) 0%,
+    oklch(0.11 0.045 305) 50%,
+    oklch(0.12 0.035 290) 100%
+  );
+  /* Documents — deep navy → indigo */
+  --gradient-twilight: linear-gradient(
+    135deg,
+    oklch(0.11 0.05 290) 0%,
+    oklch(0.10 0.045 275) 50%,
+    oklch(0.11 0.04 260) 100%
+  );
+  /* Settings — neutral black with subtle velvet warmth */
+  --gradient-neutral: linear-gradient(
+    135deg,
+    oklch(0.10 0.015 290) 0%,
+    oklch(0.095 0.02 300) 50%,
+    oklch(0.10 0.015 265) 100%
+  );
+}
+
+/* =============================================================
+   PHASE 2: Glass Utility Classes, Data-Slot Selectors, Animations
+   ============================================================= */
+
+/* --- Composite glass classes --- */
+.glass-card {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: blur(var(--blur-glass-md));
+  backdrop-filter: blur(var(--blur-glass-md));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow), var(--glass-inner-glow);
+}
+
+.glass-card-heavy {
+  background: var(--glass-bg-heavy);
+  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
+  backdrop-filter: blur(var(--blur-glass-lg));
+  border: 1px solid var(--glass-border-strong);
+  box-shadow: var(--glass-shadow-lg), var(--glass-inner-glow);
+}
+
+.glass-card-light {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border: 1px solid var(--glass-border-subtle);
+  box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow-subtle);
+}
+
+.logo-glass-bg {
+  background: oklch(0.15 0.04 260);
+  box-shadow: inset 0 1px 0 0 oklch(0.3 0.04 260 / 0.3), var(--glass-shadow-sm);
+}
+.dark .logo-glass-bg {
+  background: oklch(0.12 0.03 260);
+  box-shadow: inset 0 1px 0 0 oklch(0.3 0.04 260 / 0.15), var(--glass-shadow-sm);
+}
+
+.glass-sidebar {
+  background: var(--glass-bg-heavy);
+  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
+  backdrop-filter: blur(var(--blur-glass-lg));
+  border-color: var(--glass-border-subtle) !important;
+  box-shadow: inset -1px 0 0 0 oklch(1 0 0 / 0.15), var(--glass-shadow-sm) !important;
+}
+
+.glass-sidebar [data-sidebar="sidebar"] {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--surface-1) 90%, transparent) 0%,
+      color-mix(in srgb, var(--surface-2) 94%, transparent) 58%,
+      color-mix(in srgb, var(--surface-3) 88%, transparent) 100%
+    );
+  border-right: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
+  box-shadow:
+    inset -1px 0 0 0 oklch(1 0 0 / 0.16),
+    12px 0 32px oklch(0.12 0.02 260 / 0.05);
+}
+
+.glass-sidebar [data-sidebar="header"] {
+  border-bottom: 1px solid color-mix(in oklab, var(--border) 68%, transparent);
+}
+
+.glass-sidebar [data-sidebar="footer"] {
+  border-top: 1px solid color-mix(in oklab, var(--border) 68%, transparent);
+}
+
+.glass-input {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border: 1px solid var(--glass-border-subtle);
+}
+
+/* --- Data-slot selectors (auto-glass shadcn components) --- */
+[data-slot="card"][data-slot="card"] {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: blur(var(--blur-glass-md));
+  backdrop-filter: blur(var(--blur-glass-md));
+  border-color: var(--glass-border);
+  box-shadow: var(--glass-shadow), var(--glass-inner-glow);
+  will-change: backdrop-filter;
+}
+
+[data-slot="card"][data-slot="card"]:hover {
+  background: var(--glass-bg-heavy);
+  box-shadow: var(--glass-shadow-lg), var(--glass-inner-glow);
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+[data-sidebar="sidebar"] {
+  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
+  backdrop-filter: blur(var(--blur-glass-lg));
+}
+
+[data-slot="badge"] {
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+}
+
+[data-slot="input"],
+[data-slot="textarea"] {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border-color: var(--glass-border-subtle);
+}
+
+[data-slot="select-trigger"] {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border-color: var(--glass-border-subtle);
+}
+
+[data-slot="slider"] {
+  --slider-track-bg: var(--glass-bg-light);
+}
+
+[data-slot="slider-track"] {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+}
+
+[data-slot="slider-range"] {
+  background: var(--primary);
+}
+
+[data-slot="slider-thumb"] {
+  background: var(--glass-bg-heavy);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border-color: var(--primary);
+  box-shadow: var(--glass-shadow-sm);
+}
+
+/* Temperature slider gradient track */
+.slider-temperature [data-slot="slider-range"] {
+  background: linear-gradient(90deg, oklch(0.6 0.18 260), oklch(0.7 0.15 55));
+}
+
+[data-slot="popover-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"] {
+  background: var(--glass-bg-heavy);
+  -webkit-backdrop-filter: blur(var(--blur-glass-lg));
+  backdrop-filter: blur(var(--blur-glass-lg));
+  border-color: var(--glass-border);
+  box-shadow: var(--glass-shadow-lg);
+}
+
+[data-slot="sheet-content"],
+[data-slot="dialog-content"] {
+  background: var(--glass-bg-modal);
+  -webkit-backdrop-filter: blur(var(--blur-glass-xl));
+  backdrop-filter: blur(var(--blur-glass-xl));
+  border-color: var(--glass-border);
+  box-shadow: var(--glass-shadow-lg), var(--glass-inner-glow);
+}
+
+/* Tinted overlays with subtle blur */
+[data-slot="sheet-overlay"],
+[data-slot="dialog-overlay"] {
+  background: oklch(0.3 0.03 260 / 0.4);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+.dark [data-slot="sheet-overlay"],
+.dark [data-slot="dialog-overlay"] {
+  background: oklch(0.05 0.03 285 / 0.65);
+}
+
+/* Glass borders for table rows — doubled selector for cascade priority over TW4 utilities */
+[data-slot="table-row"][data-slot="table-row"] {
+  border-color: var(--glass-border-subtle);
+}
+
+[data-slot="table-header"] [data-slot="table-row"] {
+  border-color: var(--glass-border);
+}
+
+[data-slot="table-footer"] {
+  border-color: var(--glass-border);
+}
+
+/* 3D groove separators */
+[data-slot="separator"][data-orientation="horizontal"] {
+  background: linear-gradient(to bottom, oklch(0.7 0.02 260 / 0.12), oklch(1 0.01 260 / 0.25));
+  height: 2px;
+}
+[data-slot="separator"][data-orientation="vertical"] {
+  background: linear-gradient(to right, oklch(0.7 0.02 260 / 0.12), oklch(1 0.01 260 / 0.25));
+  width: 2px;
+}
+.dark [data-slot="separator"][data-orientation="horizontal"] {
+  background: linear-gradient(to bottom, oklch(0.06 0.02 265 / 0.35), oklch(0.25 0.03 270 / 0.15));
+}
+.dark [data-slot="separator"][data-orientation="vertical"] {
+  background: linear-gradient(to right, oklch(0.06 0.02 265 / 0.35), oklch(0.25 0.03 270 / 0.15));
+}
+
+/* Glass buttons — translucent CTAs */
+[data-slot="button"][data-variant="default"] {
+  background: oklch(0.55 0.18 260 / 0.85);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  box-shadow: var(--glass-shadow-sm), inset 0 1px 0 0 oklch(0.7 0.1 260 / 0.3);
+  border: 1px solid oklch(0.5 0.15 260 / 0.3);
+}
+[data-slot="button"][data-variant="default"]:hover {
+  background: oklch(0.55 0.18 260 / 0.95);
+  box-shadow: var(--glass-shadow), inset 0 1px 0 0 oklch(0.7 0.1 260 / 0.4);
+}
+
+[data-slot="button"][data-variant="outline"] {
+  background: var(--glass-bg-light);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border-color: var(--glass-border);
+  box-shadow: var(--glass-inner-glow-subtle);
+}
+[data-slot="button"][data-variant="outline"]:hover {
+  background: var(--glass-bg);
+  box-shadow: var(--glass-shadow-sm), var(--glass-inner-glow-subtle);
+}
+
+[data-slot="button"][data-variant="secondary"] {
+  background: var(--glass-bg-subtle);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  border: 1px solid var(--glass-border-subtle);
+  box-shadow: var(--glass-inner-glow-subtle);
+}
+[data-slot="button"][data-variant="secondary"]:hover {
+  background: var(--glass-bg-light);
+}
+
+[data-slot="button"][data-variant="destructive"] {
+  background: oklch(0.55 0.2 25 / 0.85);
+  -webkit-backdrop-filter: blur(var(--blur-glass-sm));
+  backdrop-filter: blur(var(--blur-glass-sm));
+  box-shadow: 0 4px 16px oklch(0.55 0.15 25 / 0.15), inset 0 1px 0 0 oklch(0.7 0.1 25 / 0.3);
+  border: 1px solid oklch(0.5 0.15 25 / 0.3);
+}
+[data-slot="button"][data-variant="destructive"]:hover {
+  background: oklch(0.55 0.2 25 / 0.95);
+}
+
+/* Dark mode button overrides */
+.dark [data-slot="button"][data-variant="default"] {
+  background: oklch(0.55 0.18 255 / 0.8);
+  box-shadow: var(--glass-shadow-sm), inset 0 1px 0 0 oklch(0.7 0.1 260 / 0.15);
+  border: 1px solid oklch(0.6 0.12 260 / 0.25);
+}
+.dark [data-slot="button"][data-variant="default"]:hover {
+  background: oklch(0.58 0.18 255 / 0.9);
+}
+.dark [data-slot="button"][data-variant="destructive"] {
+  background: oklch(0.55 0.2 25 / 0.8);
+  border: 1px solid oklch(0.6 0.12 25 / 0.25);
+}
+
+/* --- Gradient utility classes --- */
+.gradient-morning-sky {
+  background: var(--gradient-morning-sky);
+}
+.gradient-ocean-mist {
+  background: var(--gradient-ocean-mist);
+}
+.gradient-forest-dawn {
+  background: var(--gradient-forest-dawn);
+}
+.gradient-sunset-glow {
+  background: var(--gradient-sunset-glow);
+}
+.gradient-twilight {
+  background: var(--gradient-twilight);
+}
+.gradient-neutral {
+  background: var(--gradient-neutral);
+}
+
+/* --- Solid surface utilities for dense operational screens --- */
+.surface-page {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--surface-1) 88%, transparent),
+    color-mix(in srgb, var(--surface-2) 96%, transparent)
+  );
+}
+
+.surface-page-shell {
+  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
+  box-shadow:
+    0 24px 56px oklch(0.12 0.02 260 / 0.09),
+    inset 0 1px 0 0 oklch(1 0 0 / 0.22);
+}
+
+.surface-toolbar {
+  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
+  color: var(--surface-foreground);
+  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
+  box-shadow: 0 10px 24px oklch(0.12 0.02 260 / 0.07);
+}
+
+[data-slot="card"].surface-card,
+.surface-card {
+  background: var(--surface-1);
+  color: var(--surface-foreground);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border-color: color-mix(in oklab, var(--border) 92%, transparent);
+  box-shadow: 0 12px 28px oklch(0.12 0.02 260 / 0.08);
+}
+
+[data-slot="card"].surface-card-muted,
+.surface-card-muted {
+  background: var(--surface-2);
+  color: var(--surface-foreground);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  border-color: color-mix(in oklab, var(--border) 80%, transparent);
+  box-shadow: 0 6px 18px oklch(0.12 0.02 260 / 0.05);
+}
+
+.surface-panel {
+  background: var(--surface-1);
+  color: var(--surface-foreground);
+  border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
+  box-shadow: 0 12px 28px oklch(0.12 0.02 260 / 0.08);
+}
+
+.surface-control {
+  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
+  color: var(--surface-foreground);
+  border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
+  box-shadow: 0 6px 18px oklch(0.12 0.02 260 / 0.08);
+}
+
+.surface-scroll {
+  background:
+    linear-gradient(
+      to right,
+      color-mix(in srgb, var(--surface-1) 88%, transparent),
+      color-mix(in srgb, var(--surface-1) 72%, transparent)
+    );
+  border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
+}
+
+/* --- Glass shimmer animation --- */
+@keyframes glass-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.glass-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-shimmer:hover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.15) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: glass-shimmer 1.5s ease forwards;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.dark .glass-shimmer:hover::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    oklch(0.5 0.04 270 / 0.08) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+}
+
+html,
+body {
+  background: var(--background);
+}
+
+body {
+  color: var(--foreground);
+}
+
+.dark .glass-sidebar [data-sidebar="sidebar"] {
+  box-shadow:
+    inset -1px 0 0 0 oklch(0.58 0.03 270 / 0.08),
+    12px 0 32px oklch(0.03 0.02 265 / 0.32);
+}
+
+.dark .surface-page-shell {
+  box-shadow:
+    0 24px 56px oklch(0.03 0.02 265 / 0.44),
+    inset 0 1px 0 0 oklch(0.58 0.03 270 / 0.08);
+}
+
+.dark .surface-toolbar {
+  box-shadow: 0 10px 24px oklch(0.03 0.02 265 / 0.32);
+}