vibecarbon 0.8.0 → 0.9.0

package/carbon/src/client/components/PricingSection.tsx

@@ -201,13 +201,9 @@ export function PricingSection() {
           </motion.div>
           <h2 className="mb-4 text-3xl font-black tracking-tight md:text-5xl">
             {t('landing.pricing.headline1')}{' '}
-            <span className="bg-gradient-to-r from-muted-foreground to-foreground bg-clip-text text-transparent">
-              {t('landing.pricing.headlineSketch')}
-            </span>{' '}
+            <span className="text-foreground">{t('landing.pricing.headlineSketch')}</span>{' '}
             {t('landing.pricing.headline2')}{' '}
-            <span className="bg-gradient-to-r from-primary to-secondary-accent bg-clip-text text-transparent">
-              {t('landing.pricing.headlineScale')}
-            </span>
+            <span className="text-primary">{t('landing.pricing.headlineScale')}</span>
           </h2>
           <p className="text-lg text-muted-foreground">{t('landing.pricing.subheading')}</p>
         </motion.div>

package/carbon/src/client/components/TechStackSection.tsx

@@ -60,9 +60,7 @@ export function TechStackSection() {
           </motion.div>
           <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">
             {t('landing.techStack.headline')}{' '}
-            <span className="bg-gradient-to-r from-primary via-cyan-400 to-secondary-accent bg-clip-text text-transparent">
-              {t('landing.techStack.headlineHighlight')}
-            </span>
+            <span className="text-primary">{t('landing.techStack.headlineHighlight')}</span>
           </h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             {t('landing.techStack.subheading')}

package/carbon/src/client/components/effects/FilmGrainOverlay.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 
 interface FilmGrainOverlayProps {
@@ -8,11 +9,15 @@ interface FilmGrainOverlayProps {
 /**
  * Film grain overlay for anodized metal/industrial feel
  * Uses SVG noise filter for subtle texture
+ * Dark mode only — grain reads as dirt on light surfaces
  */
 export function FilmGrainOverlay({ opacity = 0.03, animated = false }: FilmGrainOverlayProps) {
   const prefersReducedMotion = useReducedMotion();
+  const { resolvedTheme } = useTheme();
   const shouldAnimate = animated && !prefersReducedMotion;
 
+  if (resolvedTheme !== 'dark') return null;
+
   return (
     <div
       className="fixed inset-0 pointer-events-none z-[9999]"

package/carbon/src/client/components/ui/button.tsx

@@ -18,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:brightness-125 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          'border-transparent hover:bg-white/10 hover:text-foreground hover:brightness-125 aria-expanded:bg-muted aria-expanded:text-foreground',
+          'border-transparent hover:bg-foreground/8 hover:text-foreground dark:hover:brightness-125 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
           'border-transparent bg-destructive/10 hover:bg-destructive/25 hover:brightness-115 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40',
         link: 'border-transparent text-primary underline-offset-4 hover:underline hover:brightness-115',

package/carbon/src/client/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        'bg-card text-card-foreground gap-6 overflow-hidden rounded-[var(--radius-card)] py-6 text-sm ring-1 ring-border has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-[var(--radius-card)] *:[img:last-child]:rounded-b-[var(--radius-card)] group/card flex flex-col backdrop-blur-sm',
+        'bg-card text-card-foreground gap-6 overflow-hidden rounded-[var(--radius-card)] py-6 text-sm ring-1 ring-border shadow-card has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-[var(--radius-card)] *:[img:last-child]:rounded-b-[var(--radius-card)] group/card flex flex-col',
         className
       )}
       {...props}

package/carbon/src/client/components/ui/dialog.tsx

@@ -47,7 +47,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          'bg-card text-card-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-border grid max-w-[calc(100%-2rem)] gap-6 rounded-[var(--radius-card)] p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-border grid max-w-[calc(100%-2rem)] gap-6 rounded-[var(--radius-card)] p-6 text-sm ring-1 shadow-pop duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
           className
         )}
         {...props}

package/carbon/src/client/components/ui/dropdown-menu.tsx

@@ -38,7 +38,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-48 rounded-md p-1 shadow-lg duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-48 rounded-md p-1 shadow-pop duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
             className
           )}
           {...props}
@@ -132,7 +132,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-lg duration-100 w-auto',
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-pop duration-100 w-auto',
         className
       )}
       align={align}

package/carbon/src/client/components/ui/popover.tsx

@@ -32,7 +32,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden',
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-pop ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden',
             className
           )}
           {...props}

package/carbon/src/client/components/ui/select.tsx

@@ -78,7 +78,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-pop ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
             className
           )}
           {...props}

package/carbon/src/client/components/ui/sidebar.tsx

@@ -245,7 +245,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col gap-6 p-6"
+          className="bg-sidebar backdrop-blur-md dark:backdrop-blur-none group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col gap-6 p-6"
         >
           {children}
         </div>

package/carbon/src/client/index.css

@@ -32,146 +32,169 @@ body {
 
 @custom-variant dark (&:is(.dark *));
 
-/* Theme: Teal with Glassmorphism */
-/* Primary: Bright Teal, Secondary Accent: Magenta */
-/* Typography: Noto Sans, JetBrains Mono (code) */
+/* Theme: Refined Depth (dark) / Light Glass (light) */
+/* Primary: Teal, Secondary Accent: Magenta — single interactive accent,
+   semantic colors reserved for status, glass applied selectively (.glass) */
+/* Typography: Noto Sans (body + display), JetBrains Mono (code/data) */
 
 :root {
   /* ============================================
      CUSTOMIZE YOUR BRAND - Edit these values
      ============================================ */
-  --primary: oklch(0.82 0.14 192);           /* Brand primary (teal) */
-  --primary-dim: oklch(0.55 0.12 192);       /* Dimmed variant */
-  --primary-foreground: oklch(0.98 0.01 181);
-  --secondary-accent: oklch(0.45 0.2 350);   /* Brand accent (magenta) */
+  --primary: oklch(0.52 0.124 192);          /* Brand primary (deep teal, AA on light surfaces) */
+  --primary-dim: oklch(0.42 0.1 192);        /* Dimmed variant */
+  --primary-foreground: oklch(0.99 0.005 192);
+  --secondary-accent: oklch(0.47 0.2 350);   /* Brand accent (magenta) */
   --secondary-accent-foreground: oklch(0.99 0 0);
-  --destructive: oklch(0.525 0.223 3.958);   /* pink-700 */
+  --destructive: oklch(0.5 0.21 3.958);
   --info: var(--primary);
-  --warning: oklch(0.769 0.188 70.08);
-  --success: oklch(0.704 0.14 181);
+  --warning: oklch(0.62 0.13 75);
+  --success: oklch(0.5 0.12 181);
   --radius: 0.625rem;                        /* Border radius base */
   --radius-card: var(--radius-xl);           /* Cards, dialogs, panels */
 
   /* Glow effects (derived from brand colors) */
-  --glow-primary: oklch(0.82 0.14 192 / 0.25);
-  --glow-accent: oklch(0.58 0.24 350 / 0.25);
+  --glow-primary: oklch(0.52 0.124 192 / 0.12);
+  --glow-accent: oklch(0.47 0.2 350 / 0.1);
 
-  /* Light mode gradient (not visible by default) */
-  --gradient-start: oklch(1 0 0);
-  --gradient-end: oklch(0.98 0 0);
+  /* Canvas - pale cool gradient + faint ambient wash */
+  --gradient-start: oklch(0.985 0.005 220);
+  --gradient-end: oklch(0.945 0.014 215);
+  --canvas-wash: oklch(0.52 0.124 192 / 0.05);
 
   /* ============================================
      SURFACE COLORS - Rarely need customization
      ============================================ */
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  /* Transparent background to show canvas (both modes) */
+  --background: transparent;
+  --foreground: oklch(0.17 0.025 250);
+
+  /* Standard cards - quiet near-opaque surfaces (glass is opt-in via .glass) */
+  --card: oklch(0.995 0.004 210 / 0.92);
+  --card-foreground: oklch(0.17 0.025 250);
 
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  /* Glass surfaces - alpha gradient, light source top-left */
+  --glass-from: oklch(1 0 0 / 0.78);
+  --glass-to: oklch(0.97 0.01 215 / 0.58);
+  --glass-edge: oklch(1 0 0 / 0.65);
 
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
+  /* Popovers/dropdowns - SOLID (float over arbitrary content) */
+  --popover: oklch(0.99 0.004 210);
+  --popover-foreground: oklch(0.17 0.025 250);
 
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.93 0.012 220 / 0.8);
+  --secondary-foreground: oklch(0.25 0.025 245);
 
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
+  --muted: oklch(0.94 0.01 220 / 0.7);
+  --muted-foreground: oklch(0.44 0.025 240);
 
-  /* Accent matches primary for bold menu accent */
-  --accent: var(--primary);
-  --accent-foreground: var(--primary-foreground);
+  /* Accent - subtle primary tint for hover states */
+  --accent: oklch(0.52 0.124 192 / 0.1);
+  --accent-foreground: oklch(0.3 0.08 192);
+
+  /* Hairline borders */
+  --border: oklch(0.45 0.03 230 / 0.16);
+  --input: oklch(0.5 0.03 230 / 0.3);
+  --ring: var(--primary);
 
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
+  /* Elevation shadows - soft diffuse, cool-tinted */
+  --shadow-card: 0 1px 2px oklch(0.3 0.04 240 / 0.05), 0 10px 30px -10px oklch(0.3 0.05 240 / 0.12);
+  --shadow-pop: 0 4px 12px oklch(0.3 0.04 240 / 0.08), 0 16px 40px -12px oklch(0.3 0.05 240 / 0.18);
 
-  /* Chart colors - vibrant multi-hue palette */
+  /* Chart colors - brand pair first, then supporting hues */
   --chart-1: var(--primary);
-  --chart-2: var(--warning);
-  --chart-3: var(--destructive);
-  --chart-4: var(--success);
-  --chart-5: oklch(0.65 0.22 290);
-
-  /* Sidebar - Maia defaults with brand primary */
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --chart-2: var(--secondary-accent);
+  --chart-3: oklch(0.5 0.17 275);
+  --chart-4: oklch(0.62 0.13 75);
+  --chart-5: oklch(0.54 0.11 155);
+
+  /* Sidebar - light glass rail */
+  --sidebar: oklch(0.975 0.007 212 / 0.55);
+  --sidebar-foreground: oklch(0.22 0.025 248);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--primary);
-  --sidebar-accent-foreground: var(--primary-foreground);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --sidebar-accent: oklch(0.52 0.124 192 / 0.12);
+  --sidebar-accent-foreground: oklch(0.3 0.08 192);
+  --sidebar-border: oklch(0.45 0.03 230 / 0.12);
+  --sidebar-ring: var(--primary);
 }
 
 .dark {
-  /* Primary - brighter dim variant in dark mode */
+  /* Primary - bright teal on dark, brighter dim variant */
   --primary: oklch(0.82 0.14 192);
   --primary-dim: oklch(0.65 0.12 192);
-  --primary-foreground: oklch(0.08 0 0);
+  --primary-foreground: oklch(0.1 0.02 220);
 
   /* Secondary accent (magenta) - brighter in dark mode */
   --secondary-accent: oklch(0.65 0.26 350);
   --secondary-accent-foreground: oklch(0.99 0 0);
 
-  /* Glow colors */
-  --glow-primary: oklch(0.82 0.14 192 / 0.5);
-  --glow-accent: oklch(0.65 0.26 350 / 0.5);
+  /* Glow colors - restrained, focal points only */
+  --glow-primary: oklch(0.82 0.14 192 / 0.28);
+  --glow-accent: oklch(0.65 0.26 350 / 0.25);
 
-  /* Body gradient colors */
-  --gradient-start: oklch(0.12 0.02 265);
-  --gradient-end: oklch(0.17 0.03 260);
+  /* Canvas - deep teal-tinted near-black + faint ambient wash */
+  --gradient-start: oklch(0.105 0.018 252);
+  --gradient-end: oklch(0.145 0.028 228);
+  --canvas-wash: oklch(0.82 0.14 192 / 0.09);
 
-  /* Transparent background to show gradient */
+  /* Transparent background to show canvas */
   --background: transparent;
-  --foreground: oklch(0.98 0 0);
+  --foreground: oklch(0.96 0.005 210);
+
+  /* Standard cards - quiet near-opaque surfaces */
+  --card: oklch(0.19 0.024 242 / 0.78);
+  --card-foreground: oklch(0.96 0.005 210);
 
-  /* Card surfaces - with transparency */
-  --card: oklch(0.28 0.04 255 / 0.5);
-  --card-foreground: oklch(0.98 0 0);
+  /* Glass surfaces - alpha gradient, light source top-left */
+  --glass-from: oklch(0.25 0.028 238 / 0.6);
+  --glass-to: oklch(0.16 0.022 246 / 0.45);
+  --glass-edge: oklch(1 0 0 / 0.1);
 
-  /* Popovers/dropdowns - cool-tinted to match body gradient */
-  --popover: oklch(0.18 0.02 260);
-  --popover-foreground: oklch(0.985 0 0);
+  /* Popovers/dropdowns - SOLID, cool-tinted to match canvas */
+  --popover: oklch(0.175 0.022 242);
+  --popover-foreground: oklch(0.97 0 0);
 
-  /* Secondary - muted gray */
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.9 0 0);
+  --secondary: oklch(0.25 0.02 240);
+  --secondary-foreground: oklch(0.92 0.008 220);
 
-  /* Muted surfaces */
-  --muted: oklch(0.15 0 0);
-  --muted-foreground: oklch(0.707 0.022 261.325);
+  --muted: oklch(0.2 0.02 240 / 0.7);
+  --muted-foreground: oklch(0.71 0.02 228);
 
   /* Accent - subtle primary tint for hover states */
-  --accent: oklch(0.30 0.04 200 / 0.5);
-  --accent-foreground: oklch(0.98 0 0);
+  --accent: oklch(0.82 0.14 192 / 0.13);
+  --accent-foreground: oklch(0.96 0.005 210);
 
-  /* Destructive - vibrant red */
-  --destructive: oklch(0.525 0.223 3.958);
+  /* Status - lifted for dark-bg contrast */
+  --destructive: oklch(0.62 0.21 3.958);
   --info: var(--primary);
-  --warning: oklch(0.769 0.188 70.08);
+  --warning: oklch(0.77 0.188 70.08);
   --success: oklch(0.704 0.14 181);
 
-  /* Borders */
-  --border: oklch(0.33 0.025 195);
-  --input: oklch(1 0 0 / 15%);
+  /* Hairline borders - faint teal */
+  --border: oklch(0.9 0.03 200 / 0.12);
+  --input: oklch(1 0 0 / 0.12);
   --ring: var(--primary);
 
-  /* Chart colors - vibrant multi-hue palette */
+  /* Elevation shadows - inner top edge-light + deep soft drop */
+  --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 8px 24px -12px oklch(0 0 0 / 0.5);
+  --shadow-pop: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 16px 48px -16px oklch(0 0 0 / 0.65);
+
+  /* Chart colors - brand pair first, then supporting hues */
   --chart-1: var(--primary);
-  --chart-2: var(--warning);
-  --chart-3: var(--destructive);
-  --chart-4: var(--success);
-  --chart-5: oklch(0.65 0.22 290);
+  --chart-2: var(--secondary-accent);
+  --chart-3: oklch(0.72 0.15 275);
+  --chart-4: oklch(0.8 0.15 80);
+  --chart-5: oklch(0.76 0.12 155);
 
-  /* Sidebar */
+  /* Sidebar - transparent rail, canvas shows through */
   --sidebar: transparent;
-  --sidebar-foreground: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.96 0.005 210);
   --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: oklch(0.08 0 0);
-  --sidebar-accent: var(--primary);
-  --sidebar-accent-foreground: oklch(0.08 0 0);
-  --sidebar-border: transparent;
+  --sidebar-primary-foreground: oklch(0.1 0.02 220);
+  --sidebar-accent: oklch(0.82 0.14 192 / 0.13);
+  --sidebar-accent-foreground: oklch(0.96 0.005 210);
+  --sidebar-border: oklch(0.9 0.03 200 / 0.08);
   --sidebar-ring: var(--primary);
 }
 
@@ -179,6 +202,12 @@ body {
   /* Typography */
   --font-sans: "Noto Sans Variable", "Noto Sans", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  /* Display slot kept as an extension point; defaults to the body sans face. */
+  --font-display: var(--font-sans);
+
+  /* Elevation shadows (values cascade from :root/.dark) */
+  --shadow-card: var(--shadow-card);
+  --shadow-pop: var(--shadow-pop);
 
   /* Extended primary colors */
   --color-primary-dim: var(--primary-dim);
@@ -242,21 +271,31 @@ body {
   body {
     @apply font-sans bg-background text-foreground antialiased cursor-default;
   }
-  .dark body {
-    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  /* Canvas: gradient + faint ambient wash (the "light" glass surfaces catch).
+     Both modes — --background is transparent so this shows through. */
+  body {
+    background:
+      radial-gradient(120% 80% at 75% -20%, var(--canvas-wash), transparent 55%),
+      linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
     background-attachment: fixed;
   }
   html {
     @apply font-sans;
   }
 
-  /* Bold headlines */
+  /* Headlines: refined weights + balanced wrapping (display slot = body sans) */
   h1,
-  h2,
+  h2 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
   h3,
   h4 {
-    font-weight: 900;
-    letter-spacing: -0.02em;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    text-wrap: balance;
   }
 }
 
@@ -274,8 +313,19 @@ body {
    EFFECTS SYSTEM
    ============================================ */
 
-/* Film Grain Overlay */
-.film-grain::after {
+/* Glass surface — the ONLY glass treatment; applied selectively
+   (KPI strip, sidebar rail, marketing hero panels). Alpha gradient
+   mimics a top-left light source; border-top catches the light. */
+.glass {
+  background: linear-gradient(135deg, var(--glass-from), var(--glass-to));
+  backdrop-filter: blur(14px);
+  border: 1px solid var(--border);
+  border-top-color: var(--glass-edge);
+  box-shadow: var(--shadow-card);
+}
+
+/* Film Grain Overlay (dark mode only — reads as dirt on light surfaces) */
+.dark .film-grain::after {
   content: "";
   position: fixed;
   inset: 0;
@@ -287,30 +337,37 @@ body {
   background-repeat: repeat;
 }
 
-/* Glow utilities */
+/* Active nav — teal icon, the sidebar's single focal accent */
+[data-sidebar="menu-button"][data-active] svg {
+  color: var(--primary);
+  filter: drop-shadow(0 0 6px var(--glow-primary));
+}
+
+/* Glow utilities — restrained radii; reserved for focal points
+   (active nav, primary CTA, brand marks). Do not add new consumers. */
 .glow-teal {
-  box-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+  box-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary);
 }
 
 .glow-magenta {
-  box-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+  box-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent);
 }
 
 .glow-teal-subtle {
-  box-shadow: 0 0 15px var(--glow-primary);
+  box-shadow: 0 0 10px var(--glow-primary);
 }
 
 .glow-magenta-subtle {
-  box-shadow: 0 0 15px var(--glow-accent);
+  box-shadow: 0 0 10px var(--glow-accent);
 }
 
 /* Text glow */
 .text-glow-teal {
-  text-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-primary);
+  text-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary);
 }
 
 .text-glow-magenta {
-  text-shadow: 0 0 20px var(--glow-accent), 0 0 40px var(--glow-accent);
+  text-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent);
 }
 
 /* Border glow on hover */
@@ -319,11 +376,11 @@ body {
 }
 
 .border-glow-teal:hover {
-  box-shadow: 0 0 0 1px var(--primary), 0 0 15px var(--glow-primary);
+  box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--glow-primary);
 }
 
 .border-glow-magenta:hover {
-  box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 15px var(--glow-accent);
+  box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 10px var(--glow-accent);
 }
 
 /* Sparkle shimmer for premium badges */
@@ -336,6 +393,7 @@ body {
   background-size: 200% 100%;
   animation: shimmer 3s ease-in-out infinite;
 }
+@media (prefers-reduced-motion: reduce) { .badge-shimmer { animation: none; } }
 
 /* Marquee for LogoStrip */
 @keyframes marquee-scroll {
@@ -357,8 +415,9 @@ body {
 .hero-orb { animation: orb-pulse 6s ease-in-out infinite; }
 @media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } }
 
-/* Spotlight particle dots for glass containers */
-.spotlight-particles {
+/* Spotlight particle dots for glass containers (dark mode only — white dots
+   read as noise on light surfaces) */
+.dark .spotlight-particles {
   background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 1px, transparent 1px);
   background-size: 24px 24px;
   mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 80%);
@@ -458,4 +517,27 @@ body {
   :where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
     background-color: oklch(0.20 0.02 260 / 0.3);
   }
+}
+
+/* ============================================
+   REDUCED TRANSPARENCY - solidify glass surfaces
+   ============================================ */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --card: oklch(0.99 0.004 210);
+    --sidebar: oklch(0.975 0.007 212);
+    --glass-from: oklch(0.99 0.004 210);
+    --glass-to: oklch(0.97 0.008 212);
+  }
+  .dark {
+    --card: oklch(0.19 0.024 242);
+    --sidebar: oklch(0.13 0.02 245);
+    --glass-from: oklch(0.21 0.024 242);
+    --glass-to: oklch(0.17 0.022 244);
+  }
+  .glass,
+  [data-slot="sidebar-inner"] {
+    backdrop-filter: none;
+  }
 }

package/carbon/src/client/lib/theme.ts

@@ -1,25 +1,25 @@
 // Default values mirroring index.css
 export const DEFAULT_THEME = {
   light: {
-    gradientStart: 'oklch(1 0 0)',
-    gradientEnd: 'oklch(0.98 0 0)',
-    card: 'oklch(1 0 0)',
-    primary: 'oklch(0.82 0.14 192)',
-    primaryDim: 'oklch(0.55 0.12 192)',
-    primaryForeground: 'oklch(0.98 0.01 181)',
-    secondaryAccent: 'oklch(0.45 0.2 350)',
+    gradientStart: 'oklch(0.985 0.005 220)',
+    gradientEnd: 'oklch(0.945 0.014 215)',
+    card: 'oklch(0.995 0.004 210 / 0.92)',
+    primary: 'oklch(0.52 0.124 192)',
+    primaryDim: 'oklch(0.42 0.1 192)',
+    primaryForeground: 'oklch(0.99 0.005 192)',
+    secondaryAccent: 'oklch(0.47 0.2 350)',
     secondaryAccentForeground: 'oklch(0.99 0 0)',
-    destructive: 'oklch(0.525 0.223 3.958)',
-    warning: 'oklch(0.769 0.188 70.08)',
-    success: 'oklch(0.704 0.14 181)',
+    destructive: 'oklch(0.5 0.21 3.958)',
+    warning: 'oklch(0.62 0.13 75)',
+    success: 'oklch(0.5 0.12 181)',
   },
   dark: {
-    gradientStart: 'oklch(0.12 0.02 265)',
-    gradientEnd: 'oklch(0.17 0.03 260)',
-    card: 'oklch(0.28 0.04 255 / 0.5)',
+    gradientStart: 'oklch(0.105 0.018 252)',
+    gradientEnd: 'oklch(0.145 0.028 228)',
+    card: 'oklch(0.19 0.024 242 / 0.78)',
     primary: 'oklch(0.82 0.14 192)',
     primaryDim: 'oklch(0.65 0.12 192)',
-    primaryForeground: 'oklch(0.08 0 0)',
+    primaryForeground: 'oklch(0.1 0.02 220)',
     secondaryAccent: 'oklch(0.65 0.26 350)',
     secondaryAccentForeground: 'oklch(0.99 0 0)',
   },

package/carbon/src/client/locales/en.json

@@ -274,7 +274,7 @@
     "hero": {
       "badge": "Fully Automated · Self-Hosted",
       "headline1": "Professional Grade",
-      "subheading": "Full-stack SaaS starter kit with automated everything — built for AI-driven development.",
+      "subheading": "Full-stack SaaS starter with the most easy-to-use DevOps CLI ever. Built for AI-driven development.",
       "getUpdates": "Get Updates"
     },
     "logoStrip": {
@@ -285,15 +285,15 @@
       "subheading": "Provision, deploy, and scale from the CLI",
       "create": {
         "label": "Create",
-        "description": "Full-stack app with auth, database, API, and Kubernetes manifests — ready to go."
+        "description": "Full-stack SaaS template with everything you need build, deploy, and maintain advanced applications."
       },
       "develop": {
         "label": "Develop",
-        "description": "Spin up your entire dev environment: database, auth, API, and hot-reloading frontend."
+        "description": "Spin up a dev environment for building your app using AI, complete with security guardrails and a hot-reloading frontend."
       },
       "deploy": {
         "label": "Deploy",
-        "description": "Provision a VPS or Kubernetes cluster with SSL, HA, backups, and CI/CD in one command."
+        "description": "Deploy on Hetzner with Docker Compose or Kubernetes. Complete with backups, auto-scaling, high-availability, and more advanced features with simple commands."
       }
     },
     "techStack": {