diff --git a/apps/web/src/__tests__/contrast.test.ts b/apps/web/src/__tests__/contrast.test.ts
index 1ab18cefa..34e697781 100644
--- a/apps/web/src/__tests__/contrast.test.ts
+++ b/apps/web/src/__tests__/contrast.test.ts
@@ -58,7 +58,7 @@ describe('Contrast Ratio Utilities', () => {
     });
 
     it('should pass for white on dark background (normal text)', () => {
-      const ratio = getContrastRatio([255, 255, 255], [11, 12, 16]); // kodo-void
+      const ratio = getContrastRatio([255, 255, 255], [11, 12, 16]); // sumi-bg-base
       expect(meetsWCAGAA(ratio, false)).toBe(true);
       expect(ratio).toBeGreaterThan(4.5);
     });
diff --git a/apps/web/src/components/BulkModeBanner.tsx b/apps/web/src/components/BulkModeBanner.tsx
index a4eb72031..780384072 100644
--- a/apps/web/src/components/BulkModeBanner.tsx
+++ b/apps/web/src/components/BulkModeBanner.tsx
@@ -72,7 +72,7 @@ export function BulkModeBanner({
       className={cn(
         'w-full bg-muted/10 border-b border-border/30 text-muted-foreground',
         'px-4 py-4 flex items-center justify-between gap-4',
-        'transition-all duration-[var(--duration-normal)]',
+        'transition-all duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
@@ -86,7 +86,7 @@ export function BulkModeBanner({
         variant="ghost"
         size="sm"
         onClick={onClose}
-        className="text-muted-foreground hover:text-white hover:bg-white/5 h-auto py-1 px-2 flex-shrink-0"
+        className="text-muted-foreground hover:text-foreground hover:bg-white/5 h-auto py-1 px-2 flex-shrink-0"
         aria-label="Fermer le mode sélection"
       >
         <X className="w-4 h-4" />
diff --git a/apps/web/src/components/OfflineIndicator.stories.tsx b/apps/web/src/components/OfflineIndicator.stories.tsx
index caf9dfe6e..6fd4454f9 100644
--- a/apps/web/src/components/OfflineIndicator.stories.tsx
+++ b/apps/web/src/components/OfflineIndicator.stories.tsx
@@ -15,7 +15,7 @@ const OfflineIndicatorMock = ({ variant }: { variant: 'offline' | 'syncing' | 'h
 
     if (variant === 'offline') {
         return (
-            <div className="bg-destructive/90 backdrop-blur-sm text-white px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-destructive rounded">
+            <div className="bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-destructive rounded">
                 <WifiOff className="w-4 h-4" />
                 <span>
                     Mode hors ligne
diff --git a/apps/web/src/components/OfflineIndicator.tsx b/apps/web/src/components/OfflineIndicator.tsx
index ea7e49bf7..9401149b0 100644
--- a/apps/web/src/components/OfflineIndicator.tsx
+++ b/apps/web/src/components/OfflineIndicator.tsx
@@ -100,7 +100,7 @@ export function OfflineIndicator() {
   if (!isOnline || hasNetworkError) {
     return (
       <>
-        <div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-white px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-destructive">
+        <div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-destructive">
           <WifiOff className="w-4 h-4" />
           <span>
             Mode hors ligne
diff --git a/apps/web/src/components/OfflineQueueManager.tsx b/apps/web/src/components/OfflineQueueManager.tsx
index 91036e7fe..06e4bae5c 100644
--- a/apps/web/src/components/OfflineQueueManager.tsx
+++ b/apps/web/src/components/OfflineQueueManager.tsx
@@ -157,7 +157,7 @@ export function OfflineQueueManager({
                   <div className="flex-1 min-w-0">
                     {/* Request Method and URL */}
                     <div className="flex items-center gap-2 mb-2">
-                      <span className="font-mono text-sm font-semibold text-white truncate">
+                      <span className="font-mono text-sm font-semibold text-foreground truncate">
                         {formatRequest(request)}
                       </span>
                     </div>
diff --git a/apps/web/src/components/Onboarding.tsx b/apps/web/src/components/Onboarding.tsx
index 4e6dd1ad7..fafe9f136 100644
--- a/apps/web/src/components/Onboarding.tsx
+++ b/apps/web/src/components/Onboarding.tsx
@@ -163,7 +163,7 @@ export function Onboarding({
     >
       <div className="space-y-4">
         <div>
-          <h3 className="text-xl font-semibold text-white mb-2">
+          <h3 className="text-xl font-semibold text-foreground mb-2">
             {step.title}
           </h3>
           <p className="text-muted-foreground text-sm leading-relaxed">
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardNodeHealthCard.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardNodeHealthCard.tsx
index 1006f4a2f..321741ad2 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardNodeHealthCard.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardNodeHealthCard.tsx
@@ -21,7 +21,7 @@ export function AdminDashboardNodeHealthCard() {
             key={i}
             className="flex justify-between items-center py-2 border-b border-white/5 last:border-0 group"
           >
-            <span className="text-xs font-mono text-muted-foreground group-hover:text-white transition-colors uppercase">
+            <span className="text-xs font-mono text-muted-foreground group-hover:text-foreground transition-colors uppercase">
               {m.l}
             </span>
             <span
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardProtocolsCard.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardProtocolsCard.tsx
index 3cc7b9c98..a9d6b79b2 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardProtocolsCard.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardProtocolsCard.tsx
@@ -29,7 +29,7 @@ const PROTOCOLS = [
   {
     id: 'logs',
     label: 'SEC LOGS',
-    icon: <Eye className="w-5 h-5 text-white" />,
+    icon: <Eye className="w-5 h-5 text-foreground" />,
     color: 'primary',
   },
 ];
@@ -62,7 +62,7 @@ export function AdminDashboardProtocolsCard({
             <div className="transition-transform group-hover:-translate-y-1 relative z-10">
               {act.icon}
             </div>
-            <span className="text-xs font-mono tracking-widest text-muted-foreground group-hover:text-white relative z-10">
+            <span className="text-xs font-mono tracking-widest text-muted-foreground group-hover:text-foreground relative z-10">
               {act.label}
             </span>
           </button>
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx
index 790246dce..4992245fa 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardStatCard.tsx
@@ -59,7 +59,7 @@ export function AdminDashboardStatCard({
           </span>
         )}
       </div>
-      <div className="text-3xl font-heading font-bold text-white mb-1 relative z-10">
+      <div className="text-3xl font-heading font-bold text-foreground mb-1 relative z-10">
         {typeof value === 'number' ? (
           <AnimatedNumber value={value} />
         ) : (
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTrafficCard.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTrafficCard.tsx
index c6660fd6d..936ccbcc2 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTrafficCard.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTrafficCard.tsx
@@ -14,7 +14,7 @@ export function AdminDashboardTrafficCard() {
     >
       <div className="flex justify-between items-center mb-6 relative z-10">
         <div>
-          <h3 className="text-lg font-bold text-white flex items-center gap-3">
+          <h3 className="text-lg font-bold text-foreground flex items-center gap-3">
             <Server className="w-5 h-5 text-primary" /> Traffic Flux
           </h3>
           <p className="text-xs text-muted-foreground font-mono mt-1">
diff --git a/apps/web/src/components/admin/modals/BanUserModal.tsx b/apps/web/src/components/admin/modals/BanUserModal.tsx
index a6297d5a4..efd87b0c2 100644
--- a/apps/web/src/components/admin/modals/BanUserModal.tsx
+++ b/apps/web/src/components/admin/modals/BanUserModal.tsx
@@ -30,14 +30,14 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
             <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
         <div className="p-6 space-y-4">
           <p className="text-foreground text-sm">
             You are about to suspend{' '}
-            <span className="font-bold text-white">{username}</span>. This will
+            <span className="font-bold text-foreground">{username}</span>. This will
             restrict their access to the platform.
           </p>
 
@@ -46,7 +46,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               Reason
             </label>
             <select
-              className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
+              className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm"
               value={reason}
               onChange={(e) => setReason(e.target.value)}
             >
@@ -64,7 +64,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               Details (Internal Note)
             </label>
             <textarea
-              className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm resize-none h-24"
+              className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm resize-none h-24"
               placeholder="Provide context for this ban..."
               value={details}
               onChange={(e) => setDetails(e.target.value)}
@@ -75,7 +75,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
             <div className="flex items-center gap-4">
               <Calendar className="w-5 h-5 text-muted-foreground" />
               <div>
-                <div className="text-sm font-bold text-white">Ban Duration</div>
+                <div className="text-sm font-bold text-foreground">Ban Duration</div>
                 <div className="text-xs text-muted-foreground">
                   {isPermanent ? 'Permanent Ban' : `${duration} Days`}
                 </div>
@@ -83,7 +83,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
             </div>
             <div className="flex items-center gap-2">
               <span
-                className={`text-xs ${!isPermanent ? 'text-white' : 'text-muted-foreground'}`}
+                className={`text-xs ${!isPermanent ? 'text-foreground' : 'text-muted-foreground'}`}
               >
                 Temp
               </span>
@@ -111,7 +111,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               <input
                 type="number"
                 min="1"
-                className="w-full bg-background border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
+                className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none text-sm"
                 value={duration}
                 onChange={(e) => setDuration(e.target.value)}
               />
@@ -125,7 +125,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
           </Button>
           <Button
             variant="primary"
-            className="bg-destructive hover:bg-destructive border-destructive text-white"
+            className="bg-destructive hover:bg-destructive border-destructive text-foreground"
             onClick={() =>
               onConfirm(
                 reason,
diff --git a/apps/web/src/components/commerce/CartItem.tsx b/apps/web/src/components/commerce/CartItem.tsx
index a548cb6c6..9b0dad490 100644
--- a/apps/web/src/components/commerce/CartItem.tsx
+++ b/apps/web/src/components/commerce/CartItem.tsx
@@ -27,14 +27,14 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
       <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-muted">
         <img
           src={product.coverUrl}
-          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-slow)]"
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-slow)]"
           alt={product.title}
         />
       </div>
 
       {/* Info */}
       <div className="flex-1 w-full text-center md:text-left">
-        <h4 className="font-bold text-white text-lg">{product.title}</h4>
+        <h4 className="font-bold text-foreground text-lg">{product.title}</h4>
         <p className="text-muted-foreground text-sm mb-2">{product.author}</p>
         <div className="flex items-center justify-center md:justify-start gap-2 text-xs">
           <span className="px-2 py-1 bg-card border border-border rounded flex items-center gap-1">
@@ -48,7 +48,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
 
       {/* Price & Actions */}
       <div className="flex flex-row md:flex-col items-center gap-4 md:gap-2 w-full md:w-auto justify-between">
-        <div className="text-xl font-mono font-bold text-white">
+        <div className="text-xl font-mono font-bold text-foreground">
           ${price.toFixed(2)}
         </div>
         <Button
diff --git a/apps/web/src/components/commerce/OrderSummary.tsx b/apps/web/src/components/commerce/OrderSummary.tsx
index 74670e729..c513cb7ad 100644
--- a/apps/web/src/components/commerce/OrderSummary.tsx
+++ b/apps/web/src/components/commerce/OrderSummary.tsx
@@ -42,14 +42,14 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
       <Card variant="glass" className="p-8 bg-black/40 border-white/5 relative overflow-hidden group">
         <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
 
-        <h3 className="font-bold text-white mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3">
+        <h3 className="font-bold text-foreground mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3">
           <CreditCard className="w-4 h-4 text-primary" /> Checkout Summary
         </h3>
 
         <div className="space-y-5 text-sm mb-8">
           <div className="flex justify-between text-muted-foreground font-mono uppercase text-xs">
             <span>Transaction Base</span>
-            <span className="text-white font-bold">
+            <span className="text-foreground font-bold">
               {formatPrice(subtotal)}
             </span>
           </div>
@@ -65,7 +65,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
 
           <div className="flex justify-between text-muted-foreground font-mono uppercase text-xs">
             <span>Regulatory Levy ({(taxRate * 100).toFixed(0)}%)</span>
-            <span className="text-white font-bold">
+            <span className="text-foreground font-bold">
               {formatPrice(taxAmount)}
             </span>
           </div>
@@ -74,7 +74,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
         <div className="border-t border-white/5 pt-6 mb-8">
           <div className="flex justify-between items-end">
             <span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">Total Liability</span>
-            <span className="text-3xl font-heading font-bold text-white shadow-glow-cyan">
+            <span className="text-3xl font-heading font-bold text-foreground shadow-glow-cyan">
               {formatPrice(total)}
             </span>
           </div>
@@ -97,7 +97,7 @@ export const OrderSummary: React.FC<OrderSummaryProps> = ({
           <ShieldCheck className="w-5 h-5 text-gold-500" />
         </div>
         <div>
-          <h4 className="font-bold text-white text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4>
+          <h4 className="font-bold text-foreground text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4>
           <p className="text-xs text-muted-foreground leading-relaxed font-mono uppercase">
             SECURE FLOW ENABLED. DATA PACKETS ARE ENCRYPTED VIA AES-256.
           </p>
diff --git a/apps/web/src/components/commerce/WishlistView.tsx b/apps/web/src/components/commerce/WishlistView.tsx
index 92f4f25c6..fde47d315 100644
--- a/apps/web/src/components/commerce/WishlistView.tsx
+++ b/apps/web/src/components/commerce/WishlistView.tsx
@@ -155,13 +155,13 @@ export const WishlistView: React.FC = () => {
           <motion.div key={product.id} variants={cardVariants}>
           <Card
             variant="default"
-            className="p-4 group hover:border-border/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-[var(--duration-normal)]"
+            className="p-4 group hover:border-border/50 hover:shadow-lg transition-all duration-[var(--sumi-duration-normal)]"
           >
             <div className="flex gap-4">
               <div className="relative w-24 h-24 bg-muted rounded-lg overflow-hidden flex-shrink-0">
                 <img
                   src={product.coverUrl}
-                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[var(--duration-slow)]"
+                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-[var(--sumi-duration-slow)]"
                 />
                 <div
                   className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
@@ -172,9 +172,9 @@ export const WishlistView: React.FC = () => {
                   }
                 >
                   {playingPreview === product.id ? (
-                    <Pause className="w-8 h-8 text-white" />
+                    <Pause className="w-8 h-8 text-foreground" />
                   ) : (
-                    <Play className="w-8 h-8 text-white fill-current" />
+                    <Play className="w-8 h-8 text-foreground fill-current" />
                   )}
                 </div>
                 {product.isHot && (
diff --git a/apps/web/src/components/commerce/modals/PromoCodeModal.tsx b/apps/web/src/components/commerce/modals/PromoCodeModal.tsx
index 9da192218..fc9912251 100644
--- a/apps/web/src/components/commerce/modals/PromoCodeModal.tsx
+++ b/apps/web/src/components/commerce/modals/PromoCodeModal.tsx
@@ -36,7 +36,7 @@ export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({
       ></div>
       <div className="relative w-full max-w-sm bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <Tag className="w-4 h-4 text-muted-foreground" /> Add Promo Code
           </h3>
           <button onClick={onClose}>
diff --git a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
index dd83d8b48..57841d7fb 100644
--- a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
+++ b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
@@ -29,11 +29,11 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
       ></div>
       <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <RefreshCcw className="w-4 h-4 text-warning" /> Request Refund
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -41,7 +41,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
           <p className="text-sm text-muted-foreground">
             Refund requests are subject to approval. Please provide details
             below for Order{' '}
-            <span className="font-mono text-white">#{orderId}</span>.
+            <span className="font-mono text-foreground">#{orderId}</span>.
           </p>
 
           <div>
@@ -49,7 +49,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
               Reason
             </label>
             <select
-              className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-white focus:border-primary outline-none"
+              className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-foreground focus:border-primary outline-none"
               value={reason}
               onChange={(e) => setReason(e.target.value)}
             >
@@ -65,7 +65,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
               Details
             </label>
             <textarea
-              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24"
+              className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24"
               placeholder="Please explain why you are requesting a refund..."
               value={details}
               onChange={(e) => setDetails(e.target.value)}
diff --git a/apps/web/src/components/dashboard/ActivityGraph.tsx b/apps/web/src/components/dashboard/ActivityGraph.tsx
index 8c26a8861..306aa9faa 100644
--- a/apps/web/src/components/dashboard/ActivityGraph.tsx
+++ b/apps/web/src/components/dashboard/ActivityGraph.tsx
@@ -55,7 +55,7 @@ export function ActivityGraph() {
               "px-3 py-1 text-xs font-medium rounded-md transition-all",
               period === 7
                 ? "bg-primary/20 text-primary shadow-sm"
-                : "text-muted-foreground hover:text-white"
+                : "text-muted-foreground hover:text-foreground"
             )}
           >
             7J
@@ -66,7 +66,7 @@ export function ActivityGraph() {
               "px-3 py-1 text-xs font-medium rounded-md transition-all",
               period === 30
                 ? "bg-primary/20 text-primary shadow-sm"
-                : "text-muted-foreground hover:text-white"
+                : "text-muted-foreground hover:text-foreground"
             )}
           >
             30J
@@ -97,7 +97,7 @@ export function ActivityGraph() {
               {/* Barre */}
               <div
                 className={cn(
-                  "w-full rounded-t-sm transition-all duration-[var(--duration-normal)] relative z-10",
+                  "w-full rounded-t-sm transition-all duration-[var(--sumi-duration-normal)] relative z-10",
                   isHovered ? "bg-primary opacity-100" : "bg-primary/30 opacity-70",
                   // Animation d'entrée
                   "animate-slideUp"
@@ -121,7 +121,7 @@ export function ActivityGraph() {
                 )}
               >
                 <div className="bg-card border border-border/50 px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
-                  <div className="text-xs font-bold text-white mb-0.5">{point.value} écoutes</div>
+                  <div className="text-xs font-bold text-foreground mb-0.5">{point.value} écoutes</div>
                   <div className="text-xs text-muted-foreground font-mono">{point.label}</div>
                 </div>
                 {/* Triangle du tooltip */}
diff --git a/apps/web/src/components/dashboard/StatCard.stories.tsx b/apps/web/src/components/dashboard/StatCard.stories.tsx
index fea4e2a80..f6f54e33d 100644
--- a/apps/web/src/components/dashboard/StatCard.stories.tsx
+++ b/apps/web/src/components/dashboard/StatCard.stories.tsx
@@ -22,7 +22,7 @@ export const Default: Story = {
     args: {
         label: 'Total Plays',
         value: '1.2M',
-        icon: <Music className="w-5 h-5 text-white" />,
+        icon: <Music className="w-5 h-5 text-foreground" />,
         trend: '+12.5',
         color: 'cyan',
         sparklineData: [40, 30, 45, 50, 60, 75, 80],
@@ -33,7 +33,7 @@ export const NegativeTrend: Story = {
     args: {
         label: 'Revenue',
         value: '$432.50',
-        icon: <DollarSign className="w-5 h-5 text-white" />,
+        icon: <DollarSign className="w-5 h-5 text-foreground" />,
         trend: '-5.2',
         color: 'red',
         sparklineData: [80, 75, 70, 65, 60, 55, 50],
@@ -44,7 +44,7 @@ export const NoTrend: Story = {
     args: {
         label: 'Followers',
         value: '5,432',
-        icon: <Users className="w-5 h-5 text-white" />,
+        icon: <Users className="w-5 h-5 text-foreground" />,
         color: 'magenta',
         sparklineData: [10, 20, 15, 25, 30, 40, 50],
     },
diff --git a/apps/web/src/components/dashboard/StatCard.tsx b/apps/web/src/components/dashboard/StatCard.tsx
index 03c7809d3..00f262249 100644
--- a/apps/web/src/components/dashboard/StatCard.tsx
+++ b/apps/web/src/components/dashboard/StatCard.tsx
@@ -20,7 +20,7 @@ export const StatCard: React.FC<StatCardProps> = ({
   color = 'cyan',
   sparklineData,
 }) => {
-  /* Semantic tokens (audit P3: unify kodo-* → primary/muted/success/warning/destructive) */
+  /* Semantic tokens (audit P3: now uses primary/muted/success/warning/destructive) */
   const colorMap = {
     cyan: 'text-primary',
     magenta: 'text-secondary',
diff --git a/apps/web/src/components/demo/DesignSystemDemo.tsx b/apps/web/src/components/demo/DesignSystemDemo.tsx
index 4d59b3acd..b9c6ddb5b 100644
--- a/apps/web/src/components/demo/DesignSystemDemo.tsx
+++ b/apps/web/src/components/demo/DesignSystemDemo.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 export const DesignSystemDemo: React.FC = () => {
     return (
-        <div className="p-8 text-white">
+        <div className="p-8 text-foreground">
             <h1 className="text-2xl font-bold mb-4">Design System Demo</h1>
             <p>Component under construction.</p>
         </div>
diff --git a/apps/web/src/components/developer/APIPlaygroundView.tsx b/apps/web/src/components/developer/APIPlaygroundView.tsx
index 8af97b3c8..fc9e86865 100644
--- a/apps/web/src/components/developer/APIPlaygroundView.tsx
+++ b/apps/web/src/components/developer/APIPlaygroundView.tsx
@@ -48,13 +48,13 @@ export const APIPlaygroundView: React.FC = () => {
 
   return (
     <div className="space-y-6 animate-fadeIn pb-20">
-      <h2 className="text-2xl font-bold text-white mb-6">API PLAYGROUND</h2>
+      <h2 className="text-2xl font-bold text-foreground mb-6">API PLAYGROUND</h2>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Request Builder */}
         <div className="space-y-4">
           <Card variant="default">
-            <h3 className="font-bold text-white mb-4">Request</h3>
+            <h3 className="font-bold text-foreground mb-4">Request</h3>
 
             <div className="space-y-4">
               <div>
@@ -62,7 +62,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Endpoint
                 </label>
                 <select
-                  className="w-full bg-card border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-sm"
+                  className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border outline-none font-mono text-sm"
                   value={selectedEndpoint.path}
                   onChange={(e) => {
                     const ep = ENDPOINTS.find((p) => p.path === e.target.value);
@@ -85,7 +85,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Body (JSON)
                 </label>
                 <textarea
-                  className="w-full bg-card border border-border rounded p-4 text-white focus:border-border outline-none font-mono text-xs h-48 resize-none"
+                  className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-border outline-none font-mono text-xs h-48 resize-none"
                   value={params}
                   onChange={(e) => setParams(e.target.value)}
                 />
@@ -116,7 +116,7 @@ export const APIPlaygroundView: React.FC = () => {
         <div className="space-y-4 h-full">
           <Card variant="glass" className="h-full flex flex-col">
             <div className="flex justify-between items-center mb-4">
-              <h3 className="font-bold text-white">Response</h3>
+              <h3 className="font-bold text-foreground">Response</h3>
               {response && (
                 <div className="flex gap-2">
                   <span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded">
@@ -136,7 +136,7 @@ export const APIPlaygroundView: React.FC = () => {
                     {response}
                   </pre>
                   <button
-                    className="absolute top-2 right-2 p-2 bg-muted rounded text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="absolute top-2 right-2 p-2 bg-muted rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
                     onClick={() => {
                       navigator.clipboard.writeText(response);
                       addToast('Copied JSON');
diff --git a/apps/web/src/components/developer/SwaggerUI.tsx b/apps/web/src/components/developer/SwaggerUI.tsx
index 1838f9359..e0736a239 100644
--- a/apps/web/src/components/developer/SwaggerUI.tsx
+++ b/apps/web/src/components/developer/SwaggerUI.tsx
@@ -149,7 +149,7 @@ export function SwaggerUIDoc({ specUrl, spec, useIframe = false }: SwaggerUIProp
     return (
       <div className="flex flex-col items-center justify-center p-12 min-h-layout-page">
         <AlertCircle className="w-16 h-16 text-destructive mb-4" />
-        <h3 className="text-xl font-bold text-white mb-2">
+        <h3 className="text-xl font-bold text-foreground mb-2">
           Failed to Load API Documentation
         </h3>
         <p className="text-sm text-muted-foreground mb-4 text-center max-w-md">
diff --git a/apps/web/src/components/developer/WebhooksView.tsx b/apps/web/src/components/developer/WebhooksView.tsx
index 6096ebb2a..84bb2c2f0 100644
--- a/apps/web/src/components/developer/WebhooksView.tsx
+++ b/apps/web/src/components/developer/WebhooksView.tsx
@@ -60,7 +60,7 @@ export const WebhooksView: React.FC = () => {
     <div className="space-y-6 pb-20 container mx-auto px-4 py-8 max-w-5xl">
       <div className="flex items-end justify-between">
         <div>
-          <h2 className="text-3xl font-heading font-bold text-white mb-1">Webhooks</h2>
+          <h2 className="text-3xl font-heading font-bold text-foreground mb-1">Webhooks</h2>
           <p className="text-muted-foreground font-mono text-xs flex items-center gap-2">
             <Terminal className="w-3 h-3" /> EVENT SUBSCRIPTION PROTOCOL
           </p>
@@ -69,7 +69,7 @@ export const WebhooksView: React.FC = () => {
 
       <Card variant="glass" className="p-6 border-primary/20 bg-black/40 relative overflow-hidden group">
         <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-50 group-hover:opacity-100 transition-opacity" />
-        <h3 className="font-bold text-white mb-4 flex items-center gap-2 text-sm uppercase tracking-widest">
+        <h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-widest">
           <Plus className="w-4 h-4 text-primary" /> Register Endpoint
         </h3>
         <div className="flex gap-4">
@@ -109,13 +109,13 @@ export const WebhooksView: React.FC = () => {
                     <div className={cn("text-xs font-bold px-2 py-0.5 rounded border uppercase tracking-wider", hook.status === 'active' ? 'border-success/30 text-success bg-success/10' : 'border-destructive/30 text-destructive bg-destructive/10')}>
                       {hook.status}
                     </div>
-                    <span className="font-mono text-white text-sm break-all">{hook.url}</span>
+                    <span className="font-mono text-foreground text-sm break-all">{hook.url}</span>
                   </div>
 
                   <div className="flex flex-wrap gap-4 text-xs text-muted-foreground items-center">
                     <div className="flex gap-2">
                       <span className="text-primary/70">events:</span>
-                      {hook.events.map(e => <span key={e} className="text-white bg-white/5 px-1 rounded">{e}</span>)}
+                      {hook.events.map(e => <span key={e} className="text-foreground bg-white/5 px-1 rounded">{e}</span>)}
                     </div>
                     <div className="w-1 h-1 rounded-full bg-white/20" />
                     <div className="flex items-center gap-1">
diff --git a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
index b4d398840..61174ba26 100644
--- a/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
+++ b/apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
@@ -156,7 +156,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
                       className={cn(
                         "flex items-center justify-between p-4 rounded-xl border cursor-pointer transition-all duration-[var(--duration-fast)] group relative overflow-hidden",
                         selectedScopes.includes(scope.id)
-                          ? "bg-primary/10 border-primary/50 shadow-card-glow-cyan"
+                          ? "bg-primary/10 border-primary/50"
                           : "bg-background/30 border-border/50 hover:border-border hover:bg-foreground/5"
                       )}
                     >
@@ -196,7 +196,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
             <div className="text-center space-y-8 py-4">
               <div className="relative w-20 h-20 mx-auto">
                 <div className="absolute inset-0 bg-success/20 rounded-full animate-ping opacity-50"></div>
-                <div className="relative w-full h-full bg-gradient-to-br from-success/20 to-primary/20 rounded-full flex items-center justify-center border border-success/30 shadow-card-glow-cyan">
+                <div className="relative w-full h-full bg-gradient-to-br from-success/20 to-primary/20 rounded-full flex items-center justify-center border border-success/30">
                   <Check className="w-10 h-10 text-success drop-shadow-lg" />
                 </div>
               </div>
@@ -228,7 +228,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
                   variant="ghost"
                   size="icon"
                   onClick={(e) => copyKey(e)}
-                  className="h-10 w-10 text-muted-foreground hover:text-foreground hover:bg-foreground/10 rounded-lg hover:scale-105 transition-all flex-none"
+                  className="h-10 w-10 text-muted-foreground hover:text-foreground hover:bg-foreground/10 rounded-lg transition-all flex-none"
                   title="Copy to clipboard"
                 >
                   {copied ? (
@@ -263,7 +263,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
                 }}
                 disabled={isGenerating || !name.trim() || selectedScopes.length === 0}
                 type="button"
-                className="bg-primary hover:bg-primary/80 text-black font-semibold shadow-button-primary-glow hover:shadow-button-primary-glow-hover transition-all duration-[var(--duration-normal)]"
+                className="bg-primary hover:bg-primary/80 text-black font-semibold shadow-sm transition-all duration-[var(--sumi-duration-normal)]"
               >
                 {isGenerating ? (
                   <>
@@ -278,7 +278,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           ) : (
             <Button
               onClick={onClose}
-              className="bg-primary hover:bg-primary/80 text-black font-semibold min-w-24 shadow-button-primary-glow hover:shadow-button-primary-glow-hover transition-all duration-[var(--duration-normal)]"
+              className="bg-primary hover:bg-primary/80 text-black font-semibold min-w-24 shadow-sm transition-all duration-[var(--sumi-duration-normal)]"
             >
               Done
             </Button>
diff --git a/apps/web/src/components/education/CourseCard.tsx b/apps/web/src/components/education/CourseCard.tsx
index 2b1f04e3b..dcafe7604 100644
--- a/apps/web/src/components/education/CourseCard.tsx
+++ b/apps/web/src/components/education/CourseCard.tsx
@@ -27,14 +27,14 @@ const CourseCardComponent: React.FC<CourseCardProps> = ({
   return (
     <Card
       variant="default"
-      className="group p-0 overflow-hidden cursor-pointer hover:border-border/80 hover:-translate-y-1 hover:shadow-xl transition-all duration-[var(--duration-normal)] flex flex-col h-full"
+      className="group p-0 overflow-hidden cursor-pointer hover:border-border/80 hover:shadow-xl transition-all duration-[var(--sumi-duration-normal)] flex flex-col h-full"
       onClick={() => onClick(course)}
     >
       {/* Cover */}
       <div className="relative aspect-video bg-card overflow-hidden">
         <OptimizedImage
           src={course.thumbnailUrl}
-          className="w-full h-full object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-[var(--duration-normal)]"
+          className="w-full h-full object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-[var(--sumi-duration-normal)]"
           alt={course.title}
         />
         <div className="absolute inset-0 bg-background/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
diff --git a/apps/web/src/components/education/MyCoursesView.tsx b/apps/web/src/components/education/MyCoursesView.tsx
index bfbb3a6d5..59c4660d2 100644
--- a/apps/web/src/components/education/MyCoursesView.tsx
+++ b/apps/web/src/components/education/MyCoursesView.tsx
@@ -93,7 +93,7 @@ export const MyCoursesView: React.FC<MyCoursesViewProps> = ({ onContinue }) => {
               className="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform"
             />
             <div className="absolute inset-0 flex items-center justify-center">
-              <PlayCircle className="w-12 h-12 text-white fill-current drop-shadow-lg" />
+              <PlayCircle className="w-12 h-12 text-foreground fill-current drop-shadow-lg" />
             </div>
           </div>
           <div className="flex-1 text-center md:text-left">
diff --git a/apps/web/src/components/education/course-detail-view/CourseDetailViewHeader.tsx b/apps/web/src/components/education/course-detail-view/CourseDetailViewHeader.tsx
index 37c4fb5b9..32e350e0e 100644
--- a/apps/web/src/components/education/course-detail-view/CourseDetailViewHeader.tsx
+++ b/apps/web/src/components/education/course-detail-view/CourseDetailViewHeader.tsx
@@ -21,7 +21,7 @@ export function CourseDetailViewHeader({
         <Button
           variant="ghost"
           onClick={onBack}
-          className="pl-0 text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]"
+          className="pl-0 text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
         >
           ← Back to Courses
         </Button>
diff --git a/apps/web/src/components/education/course-detail-view/CourseDetailViewSidebar.tsx b/apps/web/src/components/education/course-detail-view/CourseDetailViewSidebar.tsx
index 84d0e96c5..d105c911f 100644
--- a/apps/web/src/components/education/course-detail-view/CourseDetailViewSidebar.tsx
+++ b/apps/web/src/components/education/course-detail-view/CourseDetailViewSidebar.tsx
@@ -43,7 +43,7 @@ export function CourseDetailViewSidebar({
                 <PlayCircle className="w-8 h-8 text-black fill-current" />
               </div>
             </div>
-            <div className="absolute bottom-4 text-center w-full text-white font-bold text-sm drop-shadow-md">
+            <div className="absolute bottom-4 text-center w-full text-foreground font-bold text-sm drop-shadow-md">
               Preview Course
             </div>
           </div>
diff --git a/apps/web/src/components/education/course-detail-view/CourseDetailViewTabs.tsx b/apps/web/src/components/education/course-detail-view/CourseDetailViewTabs.tsx
index bf89185d0..f3428af2e 100644
--- a/apps/web/src/components/education/course-detail-view/CourseDetailViewTabs.tsx
+++ b/apps/web/src/components/education/course-detail-view/CourseDetailViewTabs.tsx
@@ -47,7 +47,7 @@ export function CourseDetailViewTabs({
             key={tab}
             type="button"
             onClick={() => onTabChange(tab)}
-            className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)] ${activeTab === tab ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
+            className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)] ${activeTab === tab ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'}`}
           >
             {tab}
           </button>
@@ -111,7 +111,7 @@ export function CourseDetailViewTabs({
                 className="p-4 flex justify-between items-center cursor-pointer hover:bg-white/5 transition-colors w-full text-left"
                 onClick={() => onToggleModule(module.id)}
               >
-                <h4 className="font-bold text-white flex items-center gap-4">
+                <h4 className="font-bold text-foreground flex items-center gap-4">
                   {expandedModule === module.id || expandedModule === 'all' ? (
                     <ChevronUp className="w-4 h-4" />
                   ) : (
@@ -129,7 +129,7 @@ export function CourseDetailViewTabs({
                   {module.lessons.map((lesson) => (
                     <div
                       key={lesson.id}
-                      className="p-4 pl-8 flex justify-between items-center hover:bg-muted/50 border-b border-border last:border-0 transition-colors duration-[var(--duration-normal)]"
+                      className="p-4 pl-8 flex justify-between items-center hover:bg-muted/50 border-b border-border last:border-0 transition-colors duration-[var(--sumi-duration-normal)]"
                     >
                       <div className="flex items-center gap-4 text-sm text-foreground">
                         {lesson.type === 'video' ? (
diff --git a/apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx b/apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx
index 10404f96b..e5aa271c6 100644
--- a/apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx
+++ b/apps/web/src/components/education/course-learning-view/CourseLearningViewPlayer.tsx
@@ -34,7 +34,7 @@ export function CourseLearningViewPlayer({
     return (
       <div className="bg-black aspect-video w-full flex items-center justify-center relative">
         <div className="text-center">
-          <PlayCircle className="w-16 h-16 text-white opacity-50 mx-auto mb-4" />
+          <PlayCircle className="w-16 h-16 text-foreground opacity-50 mx-auto mb-4" />
           <p className="text-muted-foreground">Video Player Placeholder</p>
           <p className="text-xs text-muted-foreground mt-2">{lesson.title}</p>
         </div>
diff --git a/apps/web/src/components/education/course-learning-view/CourseLearningViewSidebar.tsx b/apps/web/src/components/education/course-learning-view/CourseLearningViewSidebar.tsx
index cb883ccf3..347745bc9 100644
--- a/apps/web/src/components/education/course-learning-view/CourseLearningViewSidebar.tsx
+++ b/apps/web/src/components/education/course-learning-view/CourseLearningViewSidebar.tsx
@@ -37,7 +37,7 @@ export function CourseLearningViewSidebar({
                     key={lesson.id}
                     type="button"
                     onClick={() => onSelectLesson(lesson.id)}
-                    className={`flex items-start gap-4 p-4 cursor-pointer border-l-2 transition-all duration-[var(--duration-normal)] hover:bg-muted/50 w-full text-left ${isActive ? 'bg-primary/10 border-primary' : 'border-transparent'}`}
+                    className={`flex items-start gap-4 p-4 cursor-pointer border-l-2 transition-all duration-[var(--sumi-duration-normal)] hover:bg-muted/50 w-full text-left ${isActive ? 'bg-primary/10 border-primary' : 'border-transparent'}`}
                   >
                     <div className="mt-0.5">
                       {isCompleted ? (
diff --git a/apps/web/src/components/education/course-learning-view/CourseLearningViewTabs.tsx b/apps/web/src/components/education/course-learning-view/CourseLearningViewTabs.tsx
index d22591917..e05126a0f 100644
--- a/apps/web/src/components/education/course-learning-view/CourseLearningViewTabs.tsx
+++ b/apps/web/src/components/education/course-learning-view/CourseLearningViewTabs.tsx
@@ -59,7 +59,7 @@ export function CourseLearningViewTabs({
             type="button"
             onClick={() => onTabChange(tab)}
             className={cn(
-              'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)]',
+              'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)]',
               activeTab === tab
                 ? 'border-primary text-foreground'
                 : 'border-transparent text-muted-foreground hover:text-foreground',
@@ -86,7 +86,7 @@ export function CourseLearningViewTabs({
       {activeTab === 'notes' && (
         <div>
           <textarea
-            className="w-full h-40 bg-muted border border-border rounded-xl p-4 text-foreground resize-none focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
+            className="w-full h-40 bg-muted border border-border rounded-xl p-4 text-foreground resize-none focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
             placeholder="Type your personal notes here..."
           />
           <Button variant="secondary" size="sm" className="mt-2">
diff --git a/apps/web/src/components/education/modals/QuizModal.tsx b/apps/web/src/components/education/modals/QuizModal.tsx
index f56b54a4e..f01d71029 100644
--- a/apps/web/src/components/education/modals/QuizModal.tsx
+++ b/apps/web/src/components/education/modals/QuizModal.tsx
@@ -73,7 +73,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
             )}
           </div>
 
-          <h2 className="text-2xl font-bold text-white mb-2">
+          <h2 className="text-2xl font-bold text-foreground mb-2">
             {passed ? 'Assessment Passed!' : 'Try Again'}
           </h2>
           <p className="text-muted-foreground mb-6">
@@ -107,18 +107,18 @@ export const QuizModal: React.FC<QuizModalProps> = ({
       <div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
         {/* Header */}
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <HelpCircle className="w-5 h-5 text-muted-foreground" /> {quiz.title}
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
         {/* Progress */}
         <div className="h-1 bg-muted w-full">
           <div
-            className="h-full bg-primary transition-all duration-[var(--duration-normal)]"
+            className="h-full bg-primary transition-all duration-[var(--sumi-duration-normal)]"
             style={{
               width: `${((currentQuestionIndex + 1) / quiz.questions.length) * 100}%`,
             }}
@@ -130,7 +130,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
           <span className="text-xs font-bold text-muted-foreground uppercase mb-2 block">
             Question {currentQuestionIndex + 1} of {quiz.questions.length}
           </span>
-          <h2 className="text-xl font-bold text-white mb-6 leading-relaxed">
+          <h2 className="text-xl font-bold text-foreground mb-6 leading-relaxed">
             {currentQuestion.question}
           </h2>
 
@@ -141,7 +141,7 @@ export const QuizModal: React.FC<QuizModalProps> = ({
                 onClick={() => handleAnswerSelect(idx)}
                 className={`w-full text-left p-4 rounded-lg border transition-all ${
                   selectedAnswers[currentQuestionIndex] === idx
-                    ? 'bg-primary/10 border-primary text-white'
+                    ? 'bg-primary/10 border-primary text-foreground'
                     : 'bg-card border-border text-foreground hover:bg-white/5 hover:border-border'
                 }`}
               >
diff --git a/apps/web/src/components/feedback/Progress.tsx b/apps/web/src/components/feedback/Progress.tsx
index 9879f1519..124daea7b 100644
--- a/apps/web/src/components/feedback/Progress.tsx
+++ b/apps/web/src/components/feedback/Progress.tsx
@@ -70,7 +70,7 @@ export function Progress({
             strokeDashoffset={strokeDashoffset}
             strokeLinecap="round"
             className={cn(
-              'transition-all duration-[var(--duration-normal)] ease-in-out',
+              'transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
               !color && 'text-primary',
             )}
             style={color ? { stroke: color } : undefined}
@@ -109,7 +109,7 @@ export function Progress({
       >
         <div
           className={cn(
-            'h-full rounded-full transition-all duration-[var(--duration-normal)] ease-in-out',
+            'h-full rounded-full transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
             !color && 'bg-primary',
           )}
           style={{
diff --git a/apps/web/src/components/feedback/Toast.tsx b/apps/web/src/components/feedback/Toast.tsx
index e41a7ecba..829ea7fbf 100644
--- a/apps/web/src/components/feedback/Toast.tsx
+++ b/apps/web/src/components/feedback/Toast.tsx
@@ -73,7 +73,7 @@ export function ToastComponent({ toast, onDismiss }: ToastProps) {
     <Card
       variant="glass"
       className={cn(
-        'relative flex min-w-80 max-w-sm items-start gap-4 p-4 shadow-modal transition-all duration-[var(--duration-normal)] transform',
+        'relative flex min-w-80 max-w-sm items-start gap-4 p-4 shadow-modal transition-all duration-[var(--sumi-duration-normal)] transform',
         variantClass,
         isVisible && !isLeaving
           ? 'opacity-100 translate-x-0 translate-y-0 scale-100'
diff --git a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
index 9689f04a6..e6f160bf8 100644
--- a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
+++ b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
@@ -67,7 +67,7 @@ export function PasswordStrengthIndicator({
         <div className="flex-1 bg-muted/30 dark:bg-muted rounded-full h-2 overflow-hidden">
           <div
             className={cn(
-              'h-2 rounded-full transition-all duration-[var(--duration-normal)]',
+              'h-2 rounded-full transition-all duration-[var(--sumi-duration-normal)]',
               currentStrengthColor,
             )}
             style={{ width: `${(strength.score / 5) * 100}%` }}
diff --git a/apps/web/src/components/gamification/AchievementCard.tsx b/apps/web/src/components/gamification/AchievementCard.tsx
index addad79f1..e14b6ca11 100644
--- a/apps/web/src/components/gamification/AchievementCard.tsx
+++ b/apps/web/src/components/gamification/AchievementCard.tsx
@@ -21,7 +21,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
   return (
     <Card
       variant={isUnlocked ? 'elevated' : 'default'}
-      className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5 hover:-translate-y-1 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
+      className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5 hover:shadow-xl' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
     >
       {/* Shine sweep animation for unlocked achievements */}
       {isUnlocked && (
@@ -62,7 +62,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
           {/* Progress */}
           <div className="w-full bg-card h-1.5 rounded-full overflow-hidden">
             <div
-              className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
+              className={`h-full transition-all duration-[var(--sumi-duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
               style={{ width: `${percentage}%` }}
             ></div>
           </div>
diff --git a/apps/web/src/components/gamification/LeaderboardView.tsx b/apps/web/src/components/gamification/LeaderboardView.tsx
index 81f795662..a62939436 100644
--- a/apps/web/src/components/gamification/LeaderboardView.tsx
+++ b/apps/web/src/components/gamification/LeaderboardView.tsx
@@ -94,7 +94,7 @@ export const LeaderboardView: React.FC = () => {
                   return (
                     <div
                       key={entry.userId}
-                      className={`flex flex-col items-center transition-transform hover:-translate-y-1 ${i === 1 ? '-mt-12 order-2' : i === 0 ? 'order-1' : 'order-3'}`}
+                      className={`flex flex-col items-center transition-transform ${i === 1 ? '-mt-12 order-2' : i === 0 ? 'order-1' : 'order-3'}`}
                     >
                       <div className="relative mb-4">
                         <div
diff --git a/apps/web/src/components/gamification/XPBar.tsx b/apps/web/src/components/gamification/XPBar.tsx
index 060eb064e..da917299d 100644
--- a/apps/web/src/components/gamification/XPBar.tsx
+++ b/apps/web/src/components/gamification/XPBar.tsx
@@ -55,7 +55,7 @@ export const XPBar: React.FC<XPBarProps> = ({
 
         {/* Progress Fill */}
         <div
-          className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--duration-slow)] shadow-gold-glow relative"
+          className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--sumi-duration-slow)] shadow-gold-glow relative"
           style={{ width: `${percentage}%` }}
         >
           {/* Shimmer Effect */}
diff --git a/apps/web/src/components/inventory/AddEquipmentView.tsx b/apps/web/src/components/inventory/AddEquipmentView.tsx
index ed8688767..6b0acd29e 100644
--- a/apps/web/src/components/inventory/AddEquipmentView.tsx
+++ b/apps/web/src/components/inventory/AddEquipmentView.tsx
@@ -37,7 +37,7 @@ export const AddEquipmentView: React.FC = () => {
   return (
     <div className="animate-fadeIn max-w-4xl mx-auto pb-20">
       <div className="flex justify-between items-center mb-8">
-        <h2 className="text-2xl font-heading font-bold text-white">
+        <h2 className="text-2xl font-heading font-bold text-foreground">
           REGISTER EQUIPMENT
         </h2>
         <Button
@@ -53,10 +53,10 @@ export const AddEquipmentView: React.FC = () => {
         {/* Left: Media */}
         <div className="space-y-6">
           <Card variant="default">
-            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
+            <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
               <Camera className="w-4 h-4 text-muted-foreground" /> Photos
             </h3>
-            <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-border/50 cursor-pointer transition-colors group mb-4">
+            <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border/50 cursor-pointer transition-colors group mb-4">
               <Camera className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
               <span className="text-xs font-bold uppercase">Upload Photos</span>
             </div>
@@ -71,7 +71,7 @@ export const AddEquipmentView: React.FC = () => {
           </Card>
 
           <Card variant="default">
-            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
+            <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
               <FileText className="w-4 h-4 text-muted-foreground" /> Documents
             </h3>
             <FileUpload />
@@ -84,7 +84,7 @@ export const AddEquipmentView: React.FC = () => {
         {/* Right: Form */}
         <div className="lg:col-span-2 space-y-6">
           <Card variant="default">
-            <h3 className="font-bold text-white mb-6 border-b border-border pb-2">
+            <h3 className="font-bold text-foreground mb-6 border-b border-border pb-2">
               Basic Information
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -93,7 +93,7 @@ export const AddEquipmentView: React.FC = () => {
                   Category
                 </label>
                 <select
-                  className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none"
+                  className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none"
                   value={formData.category}
                   onChange={(e) => handleChange('category', e.target.value)}
                 >
@@ -135,7 +135,7 @@ export const AddEquipmentView: React.FC = () => {
           </Card>
 
           <Card variant="default">
-            <h3 className="font-bold text-white mb-6 border-b border-border pb-2">
+            <h3 className="font-bold text-foreground mb-6 border-b border-border pb-2">
               Purchase & Warranty
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
@@ -171,11 +171,11 @@ export const AddEquipmentView: React.FC = () => {
           </Card>
 
           <Card variant="default">
-            <h3 className="font-bold text-white mb-4 border-b border-border pb-2">
+            <h3 className="font-bold text-foreground mb-4 border-b border-border pb-2">
               Notes
             </h3>
             <textarea
-              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-25"
+              className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none min-h-25"
               placeholder="Condition notes, modifications, etc..."
               value={formData.notes}
               onChange={(e) => handleChange('notes', e.target.value)}
diff --git a/apps/web/src/components/inventory/EquipmentCard.tsx b/apps/web/src/components/inventory/EquipmentCard.tsx
index 9e72b0cf9..c2330d097 100644
--- a/apps/web/src/components/inventory/EquipmentCard.tsx
+++ b/apps/web/src/components/inventory/EquipmentCard.tsx
@@ -45,7 +45,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
           <Badge label={item.category} variant="terminal" className="mb-2" />
         </div>
 
-        <h3 className="font-bold text-white text-base truncate mb-1">
+        <h3 className="font-bold text-foreground text-base truncate mb-1">
           {item.name}
         </h3>
         <p className="text-warning text-xs font-mono uppercase mb-4">
@@ -56,7 +56,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
           <div className="flex items-center gap-1 text-muted-foreground">
             <Tag className="w-3 h-3" /> {item.condition}
           </div>
-          <div className="flex items-center gap-1 font-mono text-white font-bold">
+          <div className="flex items-center gap-1 font-mono text-foreground font-bold">
             <DollarSign className="w-3 h-3 text-muted-foreground" />{' '}
             {item.purchasePrice}
           </div>
diff --git a/apps/web/src/components/inventory/InventoryView.tsx b/apps/web/src/components/inventory/InventoryView.tsx
index c9d304e46..7449e9f43 100644
--- a/apps/web/src/components/inventory/InventoryView.tsx
+++ b/apps/web/src/components/inventory/InventoryView.tsx
@@ -53,7 +53,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
       {/* Header */}
       <div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
         <div>
-          <h2 className="text-2xl font-heading font-bold text-white mb-2">
+          <h2 className="text-2xl font-heading font-bold text-foreground mb-2">
             GEAR INVENTORY
           </h2>
           <p className="text-muted-foreground font-mono text-sm">
diff --git a/apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx b/apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx
index 826042d63..73b116853 100644
--- a/apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx
+++ b/apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx
@@ -25,7 +25,7 @@ export function EquipmentDetailViewGallery({
           <button
             type="button"
             onClick={onPrev}
-            className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+            className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
             aria-label="Image précédente"
           >
             <ChevronLeft className="w-6 h-6" />
@@ -33,7 +33,7 @@ export function EquipmentDetailViewGallery({
           <button
             type="button"
             onClick={onNext}
-            className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+            className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-black/50 hover:bg-black/80 text-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
             aria-label="Image suivante"
           >
             <ChevronRight className="w-6 h-6" />
diff --git a/apps/web/src/components/layout/AudioPlayer.tsx b/apps/web/src/components/layout/AudioPlayer.tsx
index 384b0d8e6..219c1024c 100644
--- a/apps/web/src/components/layout/AudioPlayer.tsx
+++ b/apps/web/src/components/layout/AudioPlayer.tsx
@@ -104,7 +104,7 @@ export const AudioPlayer: React.FC = () => {
                         className="w-12 h-12 rounded shadow-lg"
                       />
                       <div className="flex-1 min-w-0">
-                        <div className="text-sm font-bold text-white truncate">
+                        <div className="text-sm font-bold text-foreground truncate">
                           {currentTrack.title}
                         </div>
                         <div className="text-xs text-muted-foreground truncate">
@@ -137,7 +137,7 @@ export const AudioPlayer: React.FC = () => {
                         onDragEnd={onDragEnd}
                         className={`flex items-center gap-4 p-2 rounded-lg group transition-colors border border-transparent ${draggedItemIndex === i ? 'bg-primary/10 border-primary/50' : 'hover:bg-white/5 hover:border-white/5'}`}
                       >
-                        <div className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-white p-1">
+                        <div className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-1">
                           <GripVertical className="w-4 h-4" />
                         </div>
                         <div className="relative w-8 h-8 rounded overflow-hidden flex-shrink-0">
@@ -150,7 +150,7 @@ export const AudioPlayer: React.FC = () => {
                             className="absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center cursor-pointer"
                             onClick={() => playTrack(track)}
                           >
-                            <Play className="w-3 h-3 text-white fill-current" />
+                            <Play className="w-3 h-3 text-foreground fill-current" />
                           </div>
                         </div>
                         <div className="flex-1 min-w-0 select-none">
@@ -164,7 +164,7 @@ export const AudioPlayer: React.FC = () => {
 
                         <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity gap-1">
                           <button
-                            className="p-1.5 hover:text-white"
+                            className="p-1.5 hover:text-foreground"
                             title="Play Next"
                             onClick={(e) => {
                               e.stopPropagation();
@@ -220,7 +220,7 @@ export const AudioPlayer: React.FC = () => {
                         </div>
                       </div>
                       <button
-                        className="p-1.5 text-muted-foreground hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="p-1.5 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
                         onClick={() => {
                           addToQueue(track);
                           addToast('Added back to Queue');
diff --git a/apps/web/src/components/layout/DashboardLayout.stories.tsx b/apps/web/src/components/layout/DashboardLayout.stories.tsx
index 7474c088e..85236e07c 100644
--- a/apps/web/src/components/layout/DashboardLayout.stories.tsx
+++ b/apps/web/src/components/layout/DashboardLayout.stories.tsx
@@ -8,7 +8,7 @@ import { UserProfilePage } from '@/features/profile/pages/UserProfilePage';
 
 const placeholderContent = (
   <div className="space-y-4">
-    <h1 className="text-3xl font-bold text-white">Dashboard Content</h1>
+    <h1 className="text-3xl font-bold text-foreground">Dashboard Content</h1>
     <p className="text-gray-400">This is the main content area rendered within the layout.</p>
     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
       <div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 1</div>
diff --git a/apps/web/src/components/layout/Header.stories.tsx b/apps/web/src/components/layout/Header.stories.tsx
index 0163e1f62..a9641576c 100644
--- a/apps/web/src/components/layout/Header.stories.tsx
+++ b/apps/web/src/components/layout/Header.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
         (Story) => (
             <div className="h-screen bg-background">
                 <Story />
-                <div className="pt-24 px-8 text-white">
+                <div className="pt-24 px-8 text-foreground">
                     <h1>Page Content</h1>
                 </div>
             </div>
diff --git a/apps/web/src/components/layout/Layout.tsx b/apps/web/src/components/layout/Layout.tsx
index 5e95ec59f..19be07260 100644
--- a/apps/web/src/components/layout/Layout.tsx
+++ b/apps/web/src/components/layout/Layout.tsx
@@ -31,12 +31,12 @@ export function Layout({ children }: LayoutProps) {
 
       <Header />
 
-      <div className="flex relative z-10 transition-all duration-[var(--duration-slow)]">
+      <div className="flex relative z-10 transition-all duration-[var(--sumi-duration-slow)]">
         <Sidebar />
 
         <main
           className={cn(
-            'flex-1 min-h-layout-main transition-all duration-[var(--duration-normal)] ease-[var(--ease-in-out)] pb-20 lg:pb-0',
+            'flex-1 min-h-layout-main transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-in-out)] pb-20 lg:pb-0',
             sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed max-lg:ml-0',
           )}
         >
diff --git a/apps/web/src/components/layout/Sidebar.stories.tsx b/apps/web/src/components/layout/Sidebar.stories.tsx
index a830b695b..9d9caf9c3 100644
--- a/apps/web/src/components/layout/Sidebar.stories.tsx
+++ b/apps/web/src/components/layout/Sidebar.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
         (Story) => (
             <div className="flex h-screen bg-background">
                 <Story />
-                <div className="flex-1 p-8 text-white ml-20 lg:ml-72">
+                <div className="flex-1 p-8 text-foreground ml-20 lg:ml-72">
                     <h1>Main Content Area</h1>
                     <p>Resize the viewport to see responsive behavior.</p>
                 </div>
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index fb37abdb6..aaa1e2c15 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -154,7 +154,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
               {idx > 0 && (
                 <div
                   className={cn(
-                    'h-px bg-border/50 mx-3 my-1.5 transition-opacity duration-[var(--duration-normal)]',
+                    'h-px bg-border/50 mx-3 my-1.5 transition-opacity duration-[var(--sumi-duration-normal)]',
                     !sidebarOpen && 'mx-1'
                   )}
                   aria-hidden="true"
@@ -163,7 +163,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
 
               <h3
                 className={cn(
-                  'text-xs font-medium text-muted-foreground mb-2 px-3 transition-all duration-[var(--duration-normal)] uppercase tracking-wider',
+                  'text-xs font-medium text-muted-foreground mb-2 px-3 transition-all duration-[var(--sumi-duration-normal)] uppercase tracking-wider',
                   !sidebarOpen && 'opacity-0 h-0 overflow-hidden mb-0 px-0'
                 )}
                 id={`sidebar-section-${group.section.replace(/\s+/g, '-').toLowerCase()}`}
@@ -202,7 +202,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
 
                             <span
                               className={cn(
-                                'transition-all duration-[var(--duration-normal)] whitespace-nowrap truncate',
+                                'transition-all duration-[var(--sumi-duration-normal)] whitespace-nowrap truncate',
                                 sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                               )}
                             >
@@ -256,7 +256,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
               />
               <span
                 className={cn(
-                  'truncate transition-all duration-[var(--duration-normal)]',
+                  'truncate transition-all duration-[var(--sumi-duration-normal)]',
                   sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                 )}
               >
@@ -279,7 +279,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
               <LogOut className="w-4 h-4 shrink-0 transition-transform duration-[var(--duration-fast)] group-hover:scale-110" />
               <span
                 className={cn(
-                  'whitespace-nowrap transition-all duration-[var(--duration-normal)]',
+                  'whitespace-nowrap transition-all duration-[var(--sumi-duration-normal)]',
                   sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                 )}
               >
diff --git a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
index d400bce01..cbe156d29 100644
--- a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
+++ b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
@@ -54,7 +54,7 @@ export const AutoMetadataDetectionModal: React.FC<
               </div>
             </div>
             <div>
-              <h4 className="text-lg font-bold text-white animate-pulse">
+              <h4 className="text-lg font-bold text-foreground animate-pulse">
                 Analyzing Audio...
               </h4>
               <p className="text-sm text-muted-foreground mt-2">
@@ -71,7 +71,7 @@ export const AutoMetadataDetectionModal: React.FC<
                   <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                     Detected BPM
                   </div>
-                  <div className="text-2xl font-bold text-white">
+                  <div className="text-2xl font-bold text-foreground">
                     {result?.bpm}
                   </div>
                 </div>
@@ -87,7 +87,7 @@ export const AutoMetadataDetectionModal: React.FC<
                   <div className="text-xs text-muted-foreground uppercase font-bold mb-1">
                     Genre
                   </div>
-                  <div className="text-lg font-medium text-white">
+                  <div className="text-lg font-medium text-foreground">
                     {result?.genre}
                   </div>
                 </div>
diff --git a/apps/web/src/components/library/WatermarkSettingsModal.tsx b/apps/web/src/components/library/WatermarkSettingsModal.tsx
index b749e8b8f..228a4b420 100644
--- a/apps/web/src/components/library/WatermarkSettingsModal.tsx
+++ b/apps/web/src/components/library/WatermarkSettingsModal.tsx
@@ -41,14 +41,14 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
         {/* Left: Controls */}
         <div className="w-full md:w-1/2 p-6 border-r border-border bg-card">
           <div className="flex justify-between items-center mb-6">
-            <h3 className="font-bold text-white flex items-center gap-2">
+            <h3 className="font-bold text-foreground flex items-center gap-2">
               <Stamp className="w-4 h-4 text-destructive" /> Watermark
             </h3>
           </div>
 
           <div className="space-y-6">
             <label className="flex items-center justify-between cursor-pointer">
-              <span className="text-sm font-medium text-white">
+              <span className="text-sm font-medium text-foreground">
                 Enable Watermarking
               </span>
               <div
@@ -77,7 +77,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
                     <button
                       key={i}
                       onClick={() => setPosition(i)}
-                      className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-destructive border-destructive text-white' : 'bg-background border-border text-muted-foreground hover:border-border'}`}
+                      className={`h-10 rounded border text-xs uppercase font-bold transition-all ${position === i ? 'bg-destructive border-destructive text-foreground' : 'bg-background border-border text-muted-foreground hover:border-border'}`}
                     >
                       {/* Icon representation usually better, but text works for demo */}
                       <div
@@ -124,7 +124,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
 
         {/* Right: Preview */}
         <div className="w-full md:w-1/2 bg-black relative flex items-center justify-center overflow-hidden">
-          <div className="absolute top-4 right-4 z-10 bg-black/50 px-2 py-1 rounded text-xs text-white font-mono flex items-center gap-2">
+          <div className="absolute top-4 right-4 z-10 bg-black/50 px-2 py-1 rounded text-xs text-foreground font-mono flex items-center gap-2">
             <Eye className="w-3 h-3" /> PREVIEW
           </div>
 
@@ -159,7 +159,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
                 }`}
               >
                 <span
-                  className="text-white font-bold text-xl uppercase whitespace-nowrap transform -rotate-12 border-4 border-white/50 px-4 py-1"
+                  className="text-foreground font-bold text-xl uppercase whitespace-nowrap transform -rotate-12 border-4 border-white/50 px-4 py-1"
                   style={{ opacity: opacity / 100 }}
                 >
                   {text}
diff --git a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
index a372cc50d..12c377530 100644
--- a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
@@ -77,16 +77,16 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
       ></div>
       <div className="relative w-full max-w-md bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white">Add to Playlist</h3>
+          <h3 className="font-bold text-foreground">Add to Playlist</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
         <div className="p-4">
           <div className="relative mb-4">
             <input
-              className="w-full bg-background border border-border rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-border outline-none"
+              className="w-full bg-background border border-border rounded-lg py-2 pl-9 pr-4 text-foreground text-sm focus:border-border outline-none"
               placeholder="Find playlist"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -97,7 +97,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
 
           <Button
             variant="ghost"
-            className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-white group"
+            className="w-full justify-start border border-dashed border-border mb-4 hover:border-border/50 hover:text-foreground group"
             onClick={() => addToast('New Playlist Flow')}
           >
             <div className="w-8 h-8 bg-muted rounded flex items-center justify-center mr-3 group-hover:bg-white/5">
@@ -119,7 +119,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
                 />
                 <div className="flex-1 min-w-0">
                   <div
-                    className={`text-sm font-bold truncate ${selectedIds.includes(playlist.id) ? 'text-primary' : 'text-white'}`}
+                    className={`text-sm font-bold truncate ${selectedIds.includes(playlist.id) ? 'text-primary' : 'text-foreground'}`}
                   >
                     {playlist.title}
                   </div>
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index e6c2f9199..98a1b8a5b 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -47,7 +47,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
       }
     >
       <div className="flex flex-col md:flex-row gap-6">
-        <div className="w-40 h-40 bg-card border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white hover:border-border/50 cursor-pointer transition-colors flex-shrink-0">
+        <div className="w-40 h-40 bg-card border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border/50 cursor-pointer transition-colors flex-shrink-0">
           <ImageIcon className="w-8 h-8 mb-2" />
           <span className="text-xs font-bold uppercase">Cover</span>
         </div>
@@ -61,7 +61,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
           />
 
           <textarea
-            className="w-full bg-card border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24"
+            className="w-full bg-card border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-24"
             placeholder="Description (Optional)"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -79,7 +79,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                   <Lock className="w-4 h-4 text-warning" />
                 )}
                 <div className="text-sm">
-                  <div className="text-white font-bold">
+                  <div className="text-foreground font-bold">
                     {isPublic ? 'Public' : 'Private'}
                   </div>
                   <div className="text-xs text-muted-foreground">
@@ -107,7 +107,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                   className={`w-4 h-4 ${isCollaborative ? 'text-success' : 'text-muted-foreground'}`}
                 />
                 <div className="text-sm">
-                  <div className="text-white font-bold">Collaborative</div>
+                  <div className="text-foreground font-bold">Collaborative</div>
                   <div className="text-xs text-muted-foreground">
                     Friends can add tracks
                   </div>
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index 241837eae..9f7ecfd22 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -46,7 +46,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
           onClick={() => setShowDeleteConfirm(false)}
         ></div>
         <div className="relative w-full max-w-sm bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
-          <h3 className="text-xl font-bold text-white mb-2">
+          <h3 className="text-xl font-bold text-foreground mb-2">
             Delete "{playlist.title}"?
           </h3>
           <p className="text-sm text-muted-foreground mb-6">
@@ -77,9 +77,9 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
       ></div>
       <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white">Edit Details</h3>
+          <h3 className="font-bold text-foreground">Edit Details</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -90,7 +90,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
               className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
             />
             <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
-              <ImageIcon className="w-8 h-8 text-white" />
+              <ImageIcon className="w-8 h-8 text-foreground" />
             </div>
           </div>
 
@@ -102,7 +102,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
             />
 
             <textarea
-              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24"
+              className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-24"
               placeholder="Description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
@@ -120,7 +120,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
                     <Lock className="w-4 h-4 text-warning" />
                   )}
                   <div className="text-sm">
-                    <div className="text-white font-bold">
+                    <div className="text-foreground font-bold">
                       {isPublic ? 'Public' : 'Private'}
                     </div>
                   </div>
diff --git a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
index 0a7d3e25f..036bfdf0d 100644
--- a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
@@ -33,9 +33,9 @@ export const SaveQueueAsPlaylistModal: React.FC<
       ></div>
       <div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl animate-scaleIn">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white">Save Queue as Playlist</h3>
+          <h3 className="font-bold text-foreground">Save Queue as Playlist</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -59,7 +59,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
                 <Lock className="w-5 h-5 text-warning" />
               )}
               <div>
-                <div className="text-sm font-bold text-white">
+                <div className="text-sm font-bold text-foreground">
                   {isPublic ? 'Public Playlist' : 'Private Playlist'}
                 </div>
                 <div className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/live/LiveStreamDetailView.tsx b/apps/web/src/components/live/LiveStreamDetailView.tsx
index 435fa46ed..1f13adadf 100644
--- a/apps/web/src/components/live/LiveStreamDetailView.tsx
+++ b/apps/web/src/components/live/LiveStreamDetailView.tsx
@@ -63,7 +63,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
     if (!chatInput.trim()) return;
     setMessages([
       ...messages,
-      { id: Date.now(), user: 'You', text: chatInput, color: 'text-white' },
+      { id: Date.now(), user: 'You', text: chatInput, color: 'text-foreground' },
     ]);
     setChatInput('');
   };
@@ -88,7 +88,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
         <Button
           variant="ghost"
           size="sm"
-          className="bg-black/50 backdrop-blur pointer-events-auto text-white hover:bg-black/70"
+          className="bg-black/50 backdrop-blur pointer-events-auto text-foreground hover:bg-black/70"
           onClick={onBack}
         >
           <ArrowLeft className="w-4 h-4 mr-2" /> Back
@@ -118,7 +118,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                   />
                 </div>
                 <div>
-                  <h1 className="text-3xl font-bold text-white mb-1">
+                  <h1 className="text-3xl font-bold text-foreground mb-1">
                     {MOCK_STREAM.title}
                   </h1>
                   <div className="flex items-center gap-4 text-sm">
@@ -128,7 +128,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                     <span className="flex items-center gap-1 text-destructive font-bold animate-pulse">
                       <Radio className="w-3 h-3" /> LIVE
                     </span>
-                    <span className="flex items-center gap-1 text-white">
+                    <span className="flex items-center gap-1 text-foreground">
                       <Users className="w-3 h-3" />{' '}
                       {MOCK_STREAM.viewers.toLocaleString()}
                     </span>
@@ -138,7 +138,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
               <div className="flex gap-4">
                 <Button
                   variant="secondary"
-                  className="bg-black/50 backdrop-blur border-white/20 text-white"
+                  className="bg-black/50 backdrop-blur border-white/20 text-foreground"
                   icon={<Heart className="w-4 h-4" />}
                 >
                   Follow
@@ -154,7 +154,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="bg-black/50 backdrop-blur text-white"
+                  className="bg-black/50 backdrop-blur text-foreground"
                 >
                   <Share2 className="w-4 h-4" />
                 </Button>
@@ -166,8 +166,8 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
         {/* Chat Sidebar */}
         <div className="w-80 md:w-96 bg-muted border-l border-border flex flex-col z-20 shadow-2xl">
           <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-            <h3 className="font-bold text-white text-sm">LIVE CHAT</h3>
-            <Settings className="w-4 h-4 text-muted-foreground cursor-pointer hover:text-white" />
+            <h3 className="font-bold text-foreground text-sm">LIVE CHAT</h3>
+            <Settings className="w-4 h-4 text-muted-foreground cursor-pointer hover:text-foreground" />
           </div>
 
           <div className="flex-1 overflow-y-auto p-4 space-y-2 font-mono text-sm custom-scrollbar">
@@ -186,7 +186,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
           <div className="p-4 border-t border-border bg-card">
             <div className="relative">
               <input
-                className="w-full bg-background border border-border rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-border outline-none"
+                className="w-full bg-background border border-border rounded-full py-2.5 pl-4 pr-10 text-foreground text-sm focus:border-border outline-none"
                 placeholder="Send a message..."
                 value={chatInput}
                 onChange={(e) => setChatInput(e.target.value)}
@@ -207,7 +207,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="text-warning hover:text-white"
+                  className="text-warning hover:text-foreground"
                   title="Send Tip"
                   onClick={() => setShowTipModal(true)}
                 >
diff --git a/apps/web/src/components/live/modals/TipStreamerModal.tsx b/apps/web/src/components/live/modals/TipStreamerModal.tsx
index b2e1a6157..b7f962084 100644
--- a/apps/web/src/components/live/modals/TipStreamerModal.tsx
+++ b/apps/web/src/components/live/modals/TipStreamerModal.tsx
@@ -43,7 +43,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
             <DollarSign className="w-5 h-5" /> Support {streamerName}
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -58,7 +58,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
                 <button
                   key={val}
                   onClick={() => setAmount(val)}
-                  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-warning text-black border-warning' : 'bg-background border-border text-muted-foreground hover:text-white'}`}
+                  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-warning text-black border-warning' : 'bg-background border-border text-muted-foreground hover:text-foreground'}`}
                 >
                   ${val}
                 </button>
@@ -70,7 +70,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
               </span>
               <input
                 type="number"
-                className="w-full bg-card border border-border rounded pl-8 pr-4 py-2 text-white font-mono focus:border-warning outline-none"
+                className="w-full bg-card border border-border rounded pl-8 pr-4 py-2 text-foreground font-mono focus:border-warning outline-none"
                 value={amount}
                 onChange={(e) => setAmount(e.target.value)}
                 placeholder="Custom Amount"
@@ -84,7 +84,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
               Message (Optional)
             </label>
             <textarea
-              className="w-full bg-card border border-border rounded p-4 text-white focus:border-warning outline-none text-sm resize-none h-24"
+              className="w-full bg-card border border-border rounded p-4 text-foreground focus:border-warning outline-none text-sm resize-none h-24"
               placeholder={`Say something nice to ${streamerName}...`}
               value={message}
               onChange={(e) => setMessage(e.target.value)}
diff --git a/apps/web/src/components/marketplace/LicenceCard.tsx b/apps/web/src/components/marketplace/LicenceCard.tsx
index 5c449f6d8..806791ced 100644
--- a/apps/web/src/components/marketplace/LicenceCard.tsx
+++ b/apps/web/src/components/marketplace/LicenceCard.tsx
@@ -24,7 +24,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
     >
       <div className="flex justify-between items-start mb-4">
         <div>
-          <h4 className="font-bold text-white text-lg">{license.name}</h4>
+          <h4 className="font-bold text-foreground text-lg">{license.name}</h4>
           {license.isPopular && (
             <span className="text-xs text-black bg-warning px-2 py-0.5 rounded font-bold uppercase">
               Popular
diff --git a/apps/web/src/components/marketplace/ProductCard.tsx b/apps/web/src/components/marketplace/ProductCard.tsx
index f323c55c7..b5fff758c 100644
--- a/apps/web/src/components/marketplace/ProductCard.tsx
+++ b/apps/web/src/components/marketplace/ProductCard.tsx
@@ -34,14 +34,14 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
     >
     <Card
       variant="glass"
-      className="group p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-all duration-[var(--duration-normal)] cursor-pointer hover:-translate-y-1 hover:shadow-lg hover:border-white/10"
+      className="group p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl transition-all duration-[var(--sumi-duration-normal)] cursor-pointer hover:shadow-lg hover:border-white/10"
       onClick={() => onClick(product)}
     >
       {/* Image & Overlay */}
       <div className="relative aspect-square overflow-hidden bg-black">
         <OptimizedImage
           src={product.coverUrl || (product as any).cover_url || 'https://picsum.photos/400'}
-          className={`w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-normal)] ${isPlayingPreview ? 'scale-110 blur-sm opacity-50' : ''}`}
+          className={`w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-normal)] ${isPlayingPreview ? 'scale-110 blur-sm opacity-50' : ''}`}
           alt={product.title}
         />
 
@@ -64,7 +64,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
         </div>
 
         {/* Play Button Overlay */}
-        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)]">
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)]">
           <button
             onClick={(e) => {
               e.stopPropagation();
@@ -101,7 +101,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
       {/* Details */}
       <div className="p-6">
         <div className="flex justify-between items-start mb-1">
-          <h3 className="font-bold text-foreground text-base truncate pr-2 group-hover:text-white transition-colors">
+          <h3 className="font-bold text-foreground text-base truncate pr-2 group-hover:text-foreground transition-colors">
             {product.title}
           </h3>
         </div>
@@ -133,7 +133,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
           <Button
             variant="primary"
             size="sm"
-            className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--duration-normal)]"
+            className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--sumi-duration-normal)]"
             onClick={(e) => {
               e.stopPropagation();
               onAddToCart(product);
diff --git a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
index dd2f19650..90abbb07d 100644
--- a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
+++ b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
@@ -22,18 +22,18 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
       ></div>
       <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <ShieldCheck className="w-5 h-5 text-muted-foreground" /> License Agreement
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
         <div className="p-6 flex-1 overflow-y-auto">
           <div className="flex justify-between items-end mb-6">
             <div>
-              <h2 className="text-2xl font-bold text-white">
+              <h2 className="text-2xl font-bold text-foreground">
                 {license.name} License
               </h2>
               <p className="text-muted-foreground text-sm">
@@ -47,7 +47,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
 
           <div className="space-y-6">
             <div>
-              <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
+              <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-3 border-b border-border pb-1">
                 What You Get
               </h4>
               <ul className="space-y-2">
@@ -66,7 +66,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
             </div>
 
             <div>
-              <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
+              <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-3 border-b border-border pb-1">
                 Restrictions
               </h4>
               <ul className="space-y-2">
diff --git a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
index 5475f04a4..9e50501d3 100644
--- a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
+++ b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
@@ -54,7 +54,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
           <p className="text-muted-foreground text-sm mb-2">
             How was your experience with
           </p>
-          <h4 className="font-bold text-white text-lg">{productTitle}?</h4>
+          <h4 className="font-bold text-foreground text-lg">{productTitle}?</h4>
         </div>
 
         <div className="flex justify-center gap-2">
@@ -82,7 +82,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
             Your Review
           </label>
           <textarea
-            className="w-full bg-background border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-32"
+            className="w-full bg-background border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-32"
             placeholder="Share your thoughts on the quality, usability, and value..."
             value={comment}
             onChange={(e) => setComment(e.target.value)}
diff --git a/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx b/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx
index 378002692..ac367975e 100644
--- a/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx
+++ b/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx
@@ -44,7 +44,7 @@ export function ProductDetailViewGallery({
             )}
           </button>
           <div className="flex-1">
-            <div className="text-xs font-bold text-white mb-1">Audio Preview</div>
+            <div className="text-xs font-bold text-foreground mb-1">Audio Preview</div>
             <div className="h-1 bg-muted rounded-full overflow-hidden">
               <div className="h-full bg-primary w-1/3 animate-pulse" />
             </div>
@@ -58,7 +58,7 @@ export function ProductDetailViewGallery({
               key={i}
               type="button"
               onClick={() => onActiveImageChange(img)}
-              className={`w-20 h-20 rounded-xl overflow-hidden cursor-pointer border-2 transition-all duration-[var(--duration-normal)] flex-shrink-0 ${activeImage === img ? 'border-primary' : 'border-transparent opacity-60 hover:opacity-100'}`}
+              className={`w-20 h-20 rounded-xl overflow-hidden cursor-pointer border-2 transition-all duration-[var(--sumi-duration-normal)] flex-shrink-0 ${activeImage === img ? 'border-primary' : 'border-transparent opacity-60 hover:opacity-100'}`}
             >
               <img src={img} alt="" className="w-full h-full object-cover" />
             </button>
diff --git a/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx b/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx
index 06eba16ae..d32cf5994 100644
--- a/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx
+++ b/apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx
@@ -23,14 +23,14 @@ export function ProductDetailViewInfo({ product }: ProductDetailViewInfoProps) {
           <Button
             variant="ghost"
             size="icon"
-            className="border border-border text-muted-foreground hover:text-primary transition-colors duration-[var(--duration-normal)]"
+            className="border border-border text-muted-foreground hover:text-primary transition-colors duration-[var(--sumi-duration-normal)]"
           >
             <Heart className="w-5 h-5" />
           </Button>
           <Button
             variant="ghost"
             size="icon"
-            className="border border-border text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]"
+            className="border border-border text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
           >
             <Share2 className="w-5 h-5" />
           </Button>
diff --git a/apps/web/src/components/modals/CreatorModal.tsx b/apps/web/src/components/modals/CreatorModal.tsx
index 675d4d26d..507fbd79b 100644
--- a/apps/web/src/components/modals/CreatorModal.tsx
+++ b/apps/web/src/components/modals/CreatorModal.tsx
@@ -39,25 +39,25 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
         {/* Header */}
         <div className="flex justify-between items-center p-8 border-b border-border bg-card">
           <div className="flex items-center gap-4">
-            <h2 className="text-2xl font-heading font-bold text-white">
+            <h2 className="text-2xl font-heading font-bold text-foreground">
               CREATOR STUDIO
             </h2>
             <div className="flex bg-muted rounded-lg p-1">
               <button
                 onClick={() => setActiveTab('track')}
-                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-primary text-black' : 'text-muted-foreground hover:text-white'}`}
+                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-primary text-black' : 'text-muted-foreground hover:text-foreground'}`}
               >
                 <Music className="w-4 h-4" /> Track
               </button>
               <button
                 onClick={() => setActiveTab('product')}
-                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-destructive text-white' : 'text-muted-foreground hover:text-white'}`}
+                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-destructive text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
               >
                 <Package className="w-4 h-4" /> Product
               </button>
               <button
                 onClick={() => setActiveTab('course')}
-                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-warning text-black' : 'text-muted-foreground hover:text-white'}`}
+                className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-warning text-black' : 'text-muted-foreground hover:text-foreground'}`}
               >
                 <BookOpen className="w-4 h-4" /> Course
               </button>
@@ -130,7 +130,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
 
           {activeTab === 'product' && (
             <div className="text-center py-12">
-              <h3 className="text-xl font-bold text-white mb-2">
+              <h3 className="text-xl font-bold text-foreground mb-2">
                 Sell Your Sounds
               </h3>
               <p className="text-muted-foreground mb-6">
diff --git a/apps/web/src/components/notifications/NotificationBell.tsx b/apps/web/src/components/notifications/NotificationBell.tsx
index 84cb363ad..82b5f955c 100644
--- a/apps/web/src/components/notifications/NotificationBell.tsx
+++ b/apps/web/src/components/notifications/NotificationBell.tsx
@@ -53,7 +53,7 @@ export const NotificationBell: React.FC<NotificationBellProps> = ({
         <div className="absolute top-full right-0 mt-4 w-96 bg-muted border border-border rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ring-1 ring-white/5 flex flex-col max-h-layout-modal-sm">
           <div className="p-4 border-b border-border/50 flex justify-between items-center bg-card">
             <div>
-              <h3 className="font-bold text-white">Notifications</h3>
+              <h3 className="font-bold text-foreground">Notifications</h3>
               <p className="text-xs text-muted-foreground">{unreadCount} unread</p>
             </div>
             {unreadCount > 0 && (
diff --git a/apps/web/src/components/player/FullPlayer.tsx b/apps/web/src/components/player/FullPlayer.tsx
index 2de79d6fc..242135bab 100644
--- a/apps/web/src/components/player/FullPlayer.tsx
+++ b/apps/web/src/components/player/FullPlayer.tsx
@@ -53,12 +53,12 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
           variant="ghost"
           size="sm"
           onClick={onClose}
-          className="text-white/50 hover:text-white"
+          className="text-white/50 hover:text-foreground"
         >
           <Minimize2 className="w-6 h-6" />
         </Button>
         <div className="flex gap-2">
-          <span className="px-4 py-1 bg-white/10 rounded-full text-xs font-bold text-white tracking-widest border border-white/20 backdrop-blur">
+          <span className="px-4 py-1 bg-white/10 rounded-full text-xs font-bold text-foreground tracking-widest border border-white/20 backdrop-blur">
             LOSSLESS
           </span>
         </div>
@@ -68,7 +68,7 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
       <div className="relative z-20 flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-8 max-w-7xl mx-auto w-full">
         {/* Left: Artwork & Metadata */}
         <div
-          className={`flex flex-col items-center md:items-start text-center md:text-left transition-all duration-[var(--duration-slow)] ${showLyrics ? 'md:w-1/3' : 'md:w-1/2'}`}
+          className={`flex flex-col items-center md:items-start text-center md:text-left transition-all duration-[var(--sumi-duration-slow)] ${showLyrics ? 'md:w-1/3' : 'md:w-1/2'}`}
         >
           <div
             className="aspect-square w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl mb-8 border border-white/10 relative group cursor-pointer"
@@ -81,14 +81,14 @@ export const FullPlayer: React.FC<FullPlayerProps> = ({ onClose }) => {
             {/* Visualizer Overlay if enabled */}
             {visualizerSettings.mode !== 'off' && (
               <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px] opacity-0 group-hover:opacity-100 transition-opacity">
-                <span className="text-white font-bold uppercase tracking-widest text-sm border border-white px-4 py-2 rounded-full">
+                <span className="text-foreground font-bold uppercase tracking-widest text-sm border border-white px-4 py-2 rounded-full">
                   {showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
                 </span>
               </div>
             )}
           </div>
 
-          <h1 className="text-4xl md:text-6xl font-heading font-bold text-white mb-2 leading-tight">
+          <h1 className="text-4xl md:text-6xl font-heading font-bold text-foreground mb-2 leading-tight">
             {currentTrack.title}
           </h1>
           <h2 className="text-xl md:text-2xl text-muted-foreground font-medium mb-1">
diff --git a/apps/web/src/components/player/LyricsPanel.tsx b/apps/web/src/components/player/LyricsPanel.tsx
index 0675a5209..4dfb98703 100644
--- a/apps/web/src/components/player/LyricsPanel.tsx
+++ b/apps/web/src/components/player/LyricsPanel.tsx
@@ -66,7 +66,7 @@ export const LyricsPanel: React.FC = () => {
             return (
               <p
                 key={i}
-                className={`text-2xl md:text-3xl font-bold transition-all duration-[var(--duration-slow)] cursor-pointer hover:text-white ${isActive ? 'text-white scale-105 origin-center' : 'text-white/20 blur-[1px]'}`}
+                className={`text-2xl md:text-3xl font-bold transition-all duration-[var(--sumi-duration-slow)] cursor-pointer hover:text-foreground ${isActive ? 'text-foreground scale-105 origin-center' : 'text-white/20 blur-[1px]'}`}
                 onClick={() => seek((line.time / duration) * 100)}
               >
                 {line.text}
diff --git a/apps/web/src/components/player/MiniPlayer.tsx b/apps/web/src/components/player/MiniPlayer.tsx
index ad4516b6a..31dbb9382 100644
--- a/apps/web/src/components/player/MiniPlayer.tsx
+++ b/apps/web/src/components/player/MiniPlayer.tsx
@@ -35,7 +35,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 h-16 max-h-16 bg-background/95 backdrop-blur-md border-t border-white/5 z-50 px-4 md:px-6 flex items-center justify-between gap-4 transition-all duration-[var(--duration-immersive)] ease-in-out">
+    <div className="fixed bottom-0 left-0 right-0 h-16 max-h-16 bg-background/95 backdrop-blur-md border-t border-white/5 z-50 px-4 md:px-6 flex items-center justify-between gap-4 transition-all duration-[var(--sumi-duration-slow)] ease-in-out">
       {/* 1. Track Info — Spotify-style: cover + title/artist */}
       <div className="flex items-center gap-3 min-w-0 flex-1 max-w-md">
         <div className="w-12 h-12 rounded-md overflow-hidden relative group cursor-pointer flex-shrink-0 shadow-md">
@@ -48,7 +48,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
             className="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center transition-opacity duration-[var(--duration-fast)]"
             onClick={onExpand}
           >
-            <Maximize2 className="w-5 h-5 text-white" />
+            <Maximize2 className="w-5 h-5 text-foreground" />
           </div>
         </div>
         <div className="flex flex-col min-w-0 flex-1">
diff --git a/apps/web/src/components/player/PlaybackSpeedModal.tsx b/apps/web/src/components/player/PlaybackSpeedModal.tsx
index dae39dcc6..d8987ce99 100644
--- a/apps/web/src/components/player/PlaybackSpeedModal.tsx
+++ b/apps/web/src/components/player/PlaybackSpeedModal.tsx
@@ -20,7 +20,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
   return (
     <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
       <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-        <h3 className="font-bold text-white flex items-center gap-2 text-sm">
+        <h3 className="font-bold text-foreground flex items-center gap-2 text-sm">
           <Gauge className="w-4 h-4 text-warning" /> Playback Speed
         </h3>
         <button onClick={onClose}>
@@ -65,7 +65,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
         {/* Pitch Correction */}
         <div className="flex items-center justify-between p-4 bg-muted rounded-lg border border-border/50">
           <div className="flex flex-col">
-            <span className="text-sm font-bold text-white">
+            <span className="text-sm font-bold text-foreground">
               Pitch Correction
             </span>
             <span className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/player/PlayerControls.tsx b/apps/web/src/components/player/PlayerControls.tsx
index 2a3bc3135..c21700b28 100644
--- a/apps/web/src/components/player/PlayerControls.tsx
+++ b/apps/web/src/components/player/PlayerControls.tsx
@@ -84,7 +84,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
         </button>
         <button
           onClick={togglePlay}
-          className={`${layout === 'full' ? 'w-14 h-14' : 'w-9 h-9'} rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-all duration-[var(--duration-immersive)] ease-in-out hover:opacity-90 shadow-button-primary-glow`}
+          className={`${layout === 'full' ? 'w-14 h-14' : 'w-9 h-9'} rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-all duration-[var(--sumi-duration-slow)] ease-in-out hover:opacity-90 shadow-sm`}
         >
           {isPlaying ? (
             <Pause
diff --git a/apps/web/src/components/player/VisualizerSettingsModal.tsx b/apps/web/src/components/player/VisualizerSettingsModal.tsx
index 56dc4d259..4de19306c 100644
--- a/apps/web/src/components/player/VisualizerSettingsModal.tsx
+++ b/apps/web/src/components/player/VisualizerSettingsModal.tsx
@@ -20,11 +20,11 @@ export const VisualizerSettingsModal: React.FC<
   return (
     <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
       <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-        <h3 className="font-bold text-white flex items-center gap-2 text-sm">
+        <h3 className="font-bold text-foreground flex items-center gap-2 text-sm">
           <Activity className="w-4 h-4 text-muted-foreground" /> Visualizer
         </h3>
         <button onClick={onClose}>
-          <X className="w-4 h-4 text-muted-foreground hover:text-white" />
+          <X className="w-4 h-4 text-muted-foreground hover:text-foreground" />
         </button>
       </div>
 
diff --git a/apps/web/src/components/pwa/PWAInstallBanner.tsx b/apps/web/src/components/pwa/PWAInstallBanner.tsx
index bb83cb1b9..9eb4cde57 100644
--- a/apps/web/src/components/pwa/PWAInstallBanner.tsx
+++ b/apps/web/src/components/pwa/PWAInstallBanner.tsx
@@ -33,14 +33,14 @@ export function PWAInstallBanner() {
             </div>
             <div>
               <div className="text-hud">System.Uplink</div>
-              <h3 className="font-heading font-black text-xs text-white uppercase tracking-wider">
+              <h3 className="font-heading font-black text-xs text-foreground uppercase tracking-wider">
                 {t('pwa.install.title', 'Native_Access')}
               </h3>
             </div>
           </div>
           <button
             onClick={handleDismiss}
-            className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-white transition-all text-xs font-mono border border-transparent hover:border-white/10"
+            className="p-1 px-2 rounded-md bg-white/5 text-muted-foreground hover:text-foreground transition-all text-xs font-mono border border-transparent hover:border-white/10"
           >
             DISMISS
           </button>
diff --git a/apps/web/src/components/search/SearchBar.tsx b/apps/web/src/components/search/SearchBar.tsx
index d15f52c80..63991a98d 100644
--- a/apps/web/src/components/search/SearchBar.tsx
+++ b/apps/web/src/components/search/SearchBar.tsx
@@ -99,7 +99,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           />
           <input
             type="text"
-            className="bg-transparent border-none text-white placeholder-gray-500 w-full focus:ring-0 outline-none text-base"
+            className="bg-transparent border-none text-foreground placeholder-gray-500 w-full focus:ring-0 outline-none text-base"
             placeholder={placeholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
@@ -109,7 +109,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             <button
               type="button"
               onClick={() => setQuery('')}
-              className="text-muted-foreground hover:text-white transition-colors"
+              className="text-muted-foreground hover:text-foreground transition-colors"
             >
               <X className="w-4 h-4" />
             </button>
@@ -136,7 +136,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                         {getIcon(item.type)}
                       </div>
                       <div>
-                        <div className="text-sm font-bold text-white">
+                        <div className="text-sm font-bold text-foreground">
                           {item.label}
                         </div>
                         <div className="text-xs text-muted-foreground capitalize">
@@ -171,7 +171,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                   className="px-4 py-2 hover:bg-white/5 cursor-pointer flex items-center justify-between group transition-colors"
                   onClick={() => handleSuggestionClick(term)}
                 >
-                  <div className="flex items-center gap-4 text-foreground group-hover:text-white">
+                  <div className="flex items-center gap-4 text-foreground group-hover:text-foreground">
                     <Clock className="w-4 h-4 text-muted-foreground" />
                     <span className="text-sm">{term}</span>
                   </div>
diff --git a/apps/web/src/components/seller/create-product-view/CreateProductViewCoverCard.tsx b/apps/web/src/components/seller/create-product-view/CreateProductViewCoverCard.tsx
index 6b9686c81..9e299aed1 100644
--- a/apps/web/src/components/seller/create-product-view/CreateProductViewCoverCard.tsx
+++ b/apps/web/src/components/seller/create-product-view/CreateProductViewCoverCard.tsx
@@ -8,7 +8,7 @@ export function CreateProductViewCoverCard() {
       <h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
         <ImageIcon className="w-4 h-4 text-muted-foreground" /> Cover Art
       </h3>
-      <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/50 cursor-pointer transition-colors duration-[var(--duration-normal)] group">
+      <div className="aspect-square bg-card border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/50 cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] group">
         <UploadCloud className="w-8 h-8 mb-2 transition-opacity group-hover:opacity-80" />
         <span className="text-xs font-bold uppercase">Upload Image</span>
       </div>
diff --git a/apps/web/src/components/seller/create-product-view/CreateProductViewDetailsCard.tsx b/apps/web/src/components/seller/create-product-view/CreateProductViewDetailsCard.tsx
index 059f5a451..ebf194093 100644
--- a/apps/web/src/components/seller/create-product-view/CreateProductViewDetailsCard.tsx
+++ b/apps/web/src/components/seller/create-product-view/CreateProductViewDetailsCard.tsx
@@ -49,7 +49,7 @@ export function CreateProductViewDetailsCard({
             Description
           </label>
           <textarea
-            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--sumi-duration-normal)]"
             placeholder="Describe your sound pack..."
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -61,7 +61,7 @@ export function CreateProductViewDetailsCard({
               Category
             </label>
             <select
-              className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
+              className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
               value={category}
               onChange={(e) => setCategory(e.target.value)}
             >
diff --git a/apps/web/src/components/seller/create-product-view/CreateProductViewFilesCard.tsx b/apps/web/src/components/seller/create-product-view/CreateProductViewFilesCard.tsx
index ffe409697..b4066a9e8 100644
--- a/apps/web/src/components/seller/create-product-view/CreateProductViewFilesCard.tsx
+++ b/apps/web/src/components/seller/create-product-view/CreateProductViewFilesCard.tsx
@@ -13,7 +13,7 @@ export function CreateProductViewFilesCard() {
           <label className="text-xs text-muted-foreground mb-1 block">
             Main File (ZIP/RAR)
           </label>
-          <div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--duration-normal)]">
+          <div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
             <span className="text-xs text-muted-foreground">
               Drop full product here
             </span>
@@ -23,7 +23,7 @@ export function CreateProductViewFilesCard() {
           <label className="text-xs text-muted-foreground mb-1 block">
             Audio Preview (MP3)
           </label>
-          <div className="h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--duration-normal)]">
+          <div className="h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
             <span className="text-xs text-muted-foreground">
               Drop preview audio
             </span>
diff --git a/apps/web/src/components/seller/create-product-view/CreateProductViewPricingCard.tsx b/apps/web/src/components/seller/create-product-view/CreateProductViewPricingCard.tsx
index 5a6ae1e4a..58e8d3cf8 100644
--- a/apps/web/src/components/seller/create-product-view/CreateProductViewPricingCard.tsx
+++ b/apps/web/src/components/seller/create-product-view/CreateProductViewPricingCard.tsx
@@ -31,7 +31,7 @@ export function CreateProductViewPricingCard({
         {licenses.map((lic) => (
           <div
             key={lic.type}
-            className={`p-4 rounded-xl border transition-all duration-[var(--duration-normal)] ${lic.enabled ? 'bg-card border-primary/30' : 'bg-card/50 border-border opacity-60'}`}
+            className={`p-4 rounded-xl border transition-all duration-[var(--sumi-duration-normal)] ${lic.enabled ? 'bg-card border-primary/30' : 'bg-card/50 border-border opacity-60'}`}
           >
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-4">
@@ -39,7 +39,7 @@ export function CreateProductViewPricingCard({
                   onClick={() =>
                     updateLicense(lic.type, 'enabled', !lic.enabled)
                   }
-                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-[var(--duration-normal)] ${lic.enabled ? 'bg-primary' : 'bg-muted'}`}
+                  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] ${lic.enabled ? 'bg-primary' : 'bg-muted'}`}
                   role="switch"
                   aria-checked={lic.enabled}
                 >
@@ -63,7 +63,7 @@ export function CreateProductViewPricingCard({
                   </span>
                   <input
                     type="number"
-                    className="w-full bg-muted border border-border rounded-xl py-2 pl-6 pr-2 text-foreground focus:border-primary outline-none text-right font-mono transition-colors duration-[var(--duration-normal)]"
+                    className="w-full bg-muted border border-border rounded-xl py-2 pl-6 pr-2 text-foreground focus:border-primary outline-none text-right font-mono transition-colors duration-[var(--sumi-duration-normal)]"
                     value={lic.price}
                     onChange={(e) =>
                       updateLicense(lic.type, 'price', e.target.value)
diff --git a/apps/web/src/components/seller/modals/FlashSaleModal.tsx b/apps/web/src/components/seller/modals/FlashSaleModal.tsx
index 38fa270f6..8e396cec3 100644
--- a/apps/web/src/components/seller/modals/FlashSaleModal.tsx
+++ b/apps/web/src/components/seller/modals/FlashSaleModal.tsx
@@ -43,11 +43,11 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
       ></div>
       <div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <Zap className="w-5 h-5 text-warning" /> Start Flash Sale
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -62,7 +62,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
                 <Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                 <input
                   type="number"
-                  className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-white focus:border-warning outline-none"
+                  className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-foreground focus:border-warning outline-none"
                   value={discount}
                   onChange={(e) => setDiscount(Number(e.target.value))}
                   min={5}
@@ -78,7 +78,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
               <div className="relative">
                 <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                 <select
-                  className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-white focus:border-warning outline-none appearance-none"
+                  className="w-full bg-background border border-border rounded pl-10 pr-4 py-2 text-foreground focus:border-warning outline-none appearance-none"
                   value={duration}
                   onChange={(e) => setDuration(Number(e.target.value))}
                 >
@@ -98,9 +98,9 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
               </h4>
               <p className="text-xs text-foreground">
                 Applying a{' '}
-                <span className="font-bold text-white">{discount}%</span>{' '}
+                <span className="font-bold text-foreground">{discount}%</span>{' '}
                 discount to{' '}
-                <span className="font-bold text-white">
+                <span className="font-bold text-foreground">
                   {selectedIds.length}
                 </span>{' '}
                 products. Sale ends in {duration} hours.
@@ -151,7 +151,7 @@ export const FlashSaleModal: React.FC<FlashSaleModalProps> = ({
                     className="w-8 h-8 rounded object-cover"
                   />
                   <div className="flex-1 min-w-0">
-                    <div className="text-sm font-bold text-white truncate">
+                    <div className="text-sm font-bold text-foreground truncate">
                       {product.title}
                     </div>
                     <div className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/settings/account/ChangeEmailModal.tsx b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
index e61fa2c65..20e8082af 100644
--- a/apps/web/src/components/settings/account/ChangeEmailModal.tsx
+++ b/apps/web/src/components/settings/account/ChangeEmailModal.tsx
@@ -42,7 +42,7 @@ export const ChangeEmailModal: React.FC<ChangeEmailModalProps> = ({
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
           <h3 className="font-bold text-foreground">Change Email Address</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
diff --git a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
index 6cfb4b03a..dffebe2ed 100644
--- a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
@@ -84,7 +84,7 @@ export const DeleteAccountConfirmModal: React.FC<
           </Button>
           <Button
             variant="primary"
-            className="bg-destructive hover:bg-destructive border-destructive text-white"
+            className="bg-destructive hover:bg-destructive border-destructive text-foreground"
             onClick={handleDelete}
             disabled={loading}
           >
diff --git a/apps/web/src/components/settings/account/account-settings/AccountSettingsPreferencesCard.tsx b/apps/web/src/components/settings/account/account-settings/AccountSettingsPreferencesCard.tsx
index 05fc87d9b..9e8750dee 100644
--- a/apps/web/src/components/settings/account/account-settings/AccountSettingsPreferencesCard.tsx
+++ b/apps/web/src/components/settings/account/account-settings/AccountSettingsPreferencesCard.tsx
@@ -41,7 +41,7 @@ export function AccountSettingsPreferencesCard({
                 key={opt.id}
                 type="button"
                 onClick={() => onThemeChange(opt.id)}
-                className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl border transition-all duration-[var(--duration-normal)] ${isOptionSelected(theme, opt.id) ? 'bg-primary/10 border-primary text-primary' : 'bg-card border-border text-muted-foreground hover:text-foreground'}`}
+                className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl border transition-all duration-[var(--sumi-duration-normal)] ${isOptionSelected(theme, opt.id) ? 'bg-primary/10 border-primary text-primary' : 'bg-card border-border text-muted-foreground hover:text-foreground'}`}
               >
                 {opt.icon}
                 <span className="text-xs font-bold">{opt.label}</span>
@@ -55,7 +55,7 @@ export function AccountSettingsPreferencesCard({
           </label>
           <div className="relative">
             <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <select className="w-full bg-muted border border-border rounded-xl py-2.5 pl-10 pr-4 text-foreground text-sm focus:border-primary outline-none appearance-none cursor-pointer transition-colors duration-[var(--duration-normal)]">
+            <select className="w-full bg-muted border border-border rounded-xl py-2.5 pl-10 pr-4 text-foreground text-sm focus:border-primary outline-none appearance-none cursor-pointer transition-colors duration-[var(--sumi-duration-normal)]">
               <option>English (US)</option>
               <option>Japanese</option>
               <option>French</option>
diff --git a/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx b/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
index b349eca73..ed6771cd9 100644
--- a/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
+++ b/apps/web/src/components/settings/profile/edit-profile/EditProfileIdentityCard.tsx
@@ -43,7 +43,7 @@ export function EditProfileIdentityCard({
           Bio
         </label>
         <textarea
-          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]"
+          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--sumi-duration-normal)]"
           value={formData.bio}
           onChange={(e) => setFormField('bio', e.target.value)}
           maxLength={500}
@@ -63,7 +63,7 @@ export function EditProfileIdentityCard({
             Gender
           </label>
           <select
-            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
             value={formData.gender}
             onChange={(e) => setFormField('gender', e.target.value)}
           >
diff --git a/apps/web/src/components/settings/profile/edit-profile/EditProfileImagesCard.tsx b/apps/web/src/components/settings/profile/edit-profile/EditProfileImagesCard.tsx
index 10f8619f9..4ac2c5161 100644
--- a/apps/web/src/components/settings/profile/edit-profile/EditProfileImagesCard.tsx
+++ b/apps/web/src/components/settings/profile/edit-profile/EditProfileImagesCard.tsx
@@ -22,7 +22,7 @@ export function EditProfileImagesCard({
       <div className="h-48 md:h-64 bg-card relative">
         <img src={banner} alt="" className="w-full h-full object-cover opacity-80" />
         <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-          <label className="cursor-pointer bg-black/60 hover:bg-black/80 text-white px-4 py-2 rounded-lg flex items-center gap-2 backdrop-blur border border-white/10">
+          <label className="cursor-pointer bg-black/60 hover:bg-black/80 text-foreground px-4 py-2 rounded-lg flex items-center gap-2 backdrop-blur border border-white/10">
             <Camera className="w-4 h-4" /> Change Banner
             <input
               type="file"
@@ -38,7 +38,7 @@ export function EditProfileImagesCard({
           <div className="w-32 h-32 rounded-full border-4 border-border bg-muted overflow-hidden relative">
             <img src={avatar} alt="" className="w-full h-full object-cover" />
             <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
-              <label className="cursor-pointer p-2 bg-black/50 rounded-full hover:bg-black/70 text-white">
+              <label className="cursor-pointer p-2 bg-black/50 rounded-full hover:bg-black/70 text-foreground">
                 <Upload className="w-5 h-5" />
                 <input
                   type="file"
diff --git a/apps/web/src/components/settings/profile/edit-profile/EditProfileSidebar.tsx b/apps/web/src/components/settings/profile/edit-profile/EditProfileSidebar.tsx
index e01a1b252..d7e7cc327 100644
--- a/apps/web/src/components/settings/profile/edit-profile/EditProfileSidebar.tsx
+++ b/apps/web/src/components/settings/profile/edit-profile/EditProfileSidebar.tsx
@@ -9,7 +9,7 @@ export function EditProfileSidebar({ onRequestVerification }: EditProfileSidebar
   return (
     <div className="space-y-6">
       <Card variant="glass">
-        <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider">
+        <h3 className="font-bold text-foreground mb-4 text-sm uppercase tracking-wider">
           Verification
         </h3>
         <p className="text-xs text-muted-foreground mb-4">
diff --git a/apps/web/src/components/settings/security/PasskeyModal.tsx b/apps/web/src/components/settings/security/PasskeyModal.tsx
index 27cf46bf8..7fbf34ef4 100644
--- a/apps/web/src/components/settings/security/PasskeyModal.tsx
+++ b/apps/web/src/components/settings/security/PasskeyModal.tsx
@@ -42,7 +42,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
       ></div>
       <div className="relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
         <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <Fingerprint className="w-4 h-4 text-muted-foreground" /> Add Passkey
           </h3>
           <button onClick={onClose}>
@@ -84,7 +84,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
           {step === 'registering' && (
             <div className="text-center py-8">
               <Loader2 className="w-12 h-12 text-muted-foreground animate-spin mx-auto mb-4" />
-              <h4 className="text-lg font-bold text-white mb-2">
+              <h4 className="text-lg font-bold text-foreground mb-2">
                 Waiting for device...
               </h4>
               <p className="text-sm text-muted-foreground">
@@ -98,7 +98,7 @@ export const PasskeyModal: React.FC<PasskeyModalProps> = ({
               <div className="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mx-auto mb-4 text-success">
                 <CheckCircle className="w-8 h-8" />
               </div>
-              <h4 className="text-xl font-bold text-white mb-2">
+              <h4 className="text-xl font-bold text-foreground mb-2">
                 Passkey Added!
               </h4>
               <p className="text-sm text-muted-foreground mb-6">
diff --git a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupHeader.tsx b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupHeader.tsx
index c106ffad1..1e47c3187 100644
--- a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupHeader.tsx
+++ b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupHeader.tsx
@@ -10,7 +10,7 @@ export function TwoFactorSetupHeader({ onBack }: TwoFactorSetupHeaderProps) {
       <button
         type="button"
         onClick={onBack}
-        className="p-2 hover:bg-muted rounded-full text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]"
+        className="p-2 hover:bg-muted rounded-full text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
         aria-label="Go back"
       >
         <ArrowLeft className="w-5 h-5" />
diff --git a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep1.tsx b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep1.tsx
index dc25fd64e..645cab366 100644
--- a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep1.tsx
+++ b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep1.tsx
@@ -16,7 +16,7 @@ export function TwoFactorSetupStep1({
         tabIndex={0}
         onClick={onChooseTotp}
         onKeyDown={(e) => e.key === 'Enter' && onChooseTotp()}
-        className="p-6 border border-border rounded-xl bg-card hover:bg-muted/50 cursor-pointer transition-all duration-[var(--duration-normal)] hover:border-primary/50 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className="p-6 border border-border rounded-xl bg-card hover:bg-muted/50 cursor-pointer transition-all duration-[var(--sumi-duration-normal)] hover:border-primary/50 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
       >
         <div className="flex items-center gap-4 mb-2">
           <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center group-hover:bg-muted/80">
@@ -38,7 +38,7 @@ export function TwoFactorSetupStep1({
         tabIndex={0}
         onClick={onChooseSms}
         onKeyDown={(e) => e.key === 'Enter' && onChooseSms()}
-        className="p-6 border border-border rounded-xl bg-card opacity-50 cursor-not-allowed transition-all duration-[var(--duration-normal)] grayscale group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className="p-6 border border-border rounded-xl bg-card opacity-50 cursor-not-allowed transition-all duration-[var(--sumi-duration-normal)] grayscale group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
       >
         <div className="flex items-center gap-4 mb-2">
           <div className="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
diff --git a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep2.tsx b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep2.tsx
index cc82da580..83e45a340 100644
--- a/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep2.tsx
+++ b/apps/web/src/components/settings/security/two-factor-setup/TwoFactorSetupStep2.tsx
@@ -90,7 +90,7 @@ export function TwoFactorSetupStep2({
             <p
               role="button"
               tabIndex={0}
-              className="text-xs text-muted-foreground font-mono bg-muted py-1 px-3 rounded-full border border-border inline-block cursor-pointer hover:text-foreground transition-colors duration-[var(--duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              className="text-xs text-muted-foreground font-mono bg-muted py-1 px-3 rounded-full border border-border inline-block cursor-pointer hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               onClick={onCopySecret}
               onKeyDown={(e) => e.key === 'Enter' && onCopySecret()}
             >
diff --git a/apps/web/src/components/social/CommentItem.tsx b/apps/web/src/components/social/CommentItem.tsx
index 950189dbe..487b35928 100644
--- a/apps/web/src/components/social/CommentItem.tsx
+++ b/apps/web/src/components/social/CommentItem.tsx
@@ -34,7 +34,7 @@ export const CommentItem: React.FC<CommentItemProps> = ({
         <div className="bg-card/50 p-4 rounded-2xl rounded-tl-sm">
           <div className="flex justify-between items-baseline mb-1">
             <div className="flex gap-2 items-baseline">
-              <span className="font-bold text-white cursor-pointer hover:underline">
+              <span className="font-bold text-foreground cursor-pointer hover:underline">
                 {comment.author.name}
               </span>
               <span className="text-muted-foreground text-xs">{comment.timestamp}</span>
diff --git a/apps/web/src/components/social/ExploreView.tsx b/apps/web/src/components/social/ExploreView.tsx
index 05f0d700a..534d8cd93 100644
--- a/apps/web/src/components/social/ExploreView.tsx
+++ b/apps/web/src/components/social/ExploreView.tsx
@@ -106,7 +106,7 @@ export const ExploreView: React.FC = () => {
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id as any)}
-              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-primary text-black' : 'text-muted-foreground hover:text-white hover:bg-white/5'}`}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-primary text-black' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
             >
               {tab.icon} {tab.label}
             </button>
@@ -159,7 +159,7 @@ export const ExploreView: React.FC = () => {
 
               {/* Overlay */}
               <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
-                <h4 className="text-white font-bold truncate text-sm mb-1">
+                <h4 className="text-foreground font-bold truncate text-sm mb-1">
                   {item.title}
                 </h4>
                 <div className="flex justify-between items-center text-xs text-foreground">
@@ -173,7 +173,7 @@ export const ExploreView: React.FC = () => {
               </div>
 
               {/* Type Indicator */}
-              <div className="absolute top-2 right-2 bg-black/50 backdrop-blur p-1.5 rounded-full text-white">
+              <div className="absolute top-2 right-2 bg-black/50 backdrop-blur p-1.5 rounded-full text-foreground">
                 {item.type === 'audio' ? (
                   <Play className="w-3 h-3 fill-current" />
                 ) : item.type === 'video' ? (
diff --git a/apps/web/src/components/social/PostCard.tsx b/apps/web/src/components/social/PostCard.tsx
index e10321a14..dedea5a1a 100644
--- a/apps/web/src/components/social/PostCard.tsx
+++ b/apps/web/src/components/social/PostCard.tsx
@@ -112,7 +112,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
     <>
       <Card
         variant="default"
-        className="p-0 overflow-hidden border-transparent hover:border-primary/20 hover:-translate-y-0.5 hover:shadow-lg transition-all duration-[var(--duration-normal)] animate-fadeIn mb-4"
+        className="p-0 overflow-hidden border-transparent hover:border-primary/20 hover:shadow-lg transition-all duration-[var(--sumi-duration-normal)] animate-fadeIn mb-4"
       >
         {/* Repost Header */}
         {post.isRepost && (
@@ -177,7 +177,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
             <OptimizedImage
               src={post.image!}
               alt={post.content?.substring(0, 50) || 'Post image'}
-              className="w-full h-full object-cover transition-transform duration-[var(--duration-normal)] group-hover:scale-105"
+              className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-105"
             />
           </div>
         )}
@@ -189,7 +189,7 @@ const PostCardComponent: React.FC<PostCardProps> = ({ post }) => {
                 <img
                   src={post.audioTrack.coverUrl}
                   alt={post.audioTrack.title || 'Track cover'}
-                  className="w-full h-full object-cover transition-transform duration-[var(--duration-normal)] group-hover:scale-110"
+                  className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"
                 />
                 <div className="absolute inset-0 bg-background/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                   <Play className="w-5 h-5 text-foreground fill-current" />
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index c7d3cfa41..87beb4cb2 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -38,14 +38,14 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
         ></div>
         <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
           <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-            <h3 className="font-bold text-white">Quote Post</h3>
+            <h3 className="font-bold text-foreground">Quote Post</h3>
             <button onClick={onClose}>
-              <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+              <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
             </button>
           </div>
           <div className="p-4">
             <textarea
-              className="w-full bg-transparent border-none text-white placeholder-gray-500 focus:ring-0 resize-none h-24 mb-4"
+              className="w-full bg-transparent border-none text-foreground placeholder-gray-500 focus:ring-0 resize-none h-24 mb-4"
               placeholder="Add a comment..."
               value={quoteText}
               onChange={(e) => setQuoteText(e.target.value)}
@@ -57,7 +57,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
                   src={post.author.avatar}
                   className="w-5 h-5 rounded-full"
                 />
-                <span className="font-bold text-xs text-white">
+                <span className="font-bold text-xs text-foreground">
                   {post.author.name}
                 </span>
               </div>
@@ -93,9 +93,9 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
       ></div>
       <div className="relative w-full max-w-sm bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white">Share Post</h3>
+          <h3 className="font-bold text-foreground">Share Post</h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -111,7 +111,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               <Repeat className="w-5 h-5" />
             </div>
             <div className="text-left">
-              <div className="text-white font-bold">Repost</div>
+              <div className="text-foreground font-bold">Repost</div>
               <div className="text-xs text-muted-foreground">
                 Instantly share with your followers
               </div>
@@ -126,7 +126,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               <MessageSquare className="w-5 h-5" />
             </div>
             <div className="text-left">
-              <div className="text-white font-bold">Quote</div>
+              <div className="text-foreground font-bold">Quote</div>
               <div className="text-xs text-muted-foreground">
                 Repost with your own thoughts
               </div>
@@ -139,11 +139,11 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
             className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
             onClick={handleCopyLink}
           >
-            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-white">
+            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
               {copied ? <Check className="w-5 h-5 text-success" /> : <Link className="w-5 h-5" />}
             </div>
             <div className="text-left">
-              <div className="text-white font-bold">{copied ? 'Copied!' : 'Copy Link'}</div>
+              <div className="text-foreground font-bold">{copied ? 'Copied!' : 'Copy Link'}</div>
             </div>
           </button>
           <button
@@ -153,11 +153,11 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               onClose();
             }}
           >
-            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-white">
+            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
               <Mail className="w-5 h-5" />
             </div>
             <div className="text-left">
-              <div className="text-white font-bold">
+              <div className="text-foreground font-bold">
                 Send via Direct Message
               </div>
             </div>
diff --git a/apps/web/src/components/social/connections/ConnectionsView.tsx b/apps/web/src/components/social/connections/ConnectionsView.tsx
index fb87f8898..a02e87230 100644
--- a/apps/web/src/components/social/connections/ConnectionsView.tsx
+++ b/apps/web/src/components/social/connections/ConnectionsView.tsx
@@ -53,7 +53,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
     <div className="space-y-6 animate-fadeIn pb-20">
       <div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
         <div>
-          <h2 className="text-3xl font-heading font-bold text-white mb-2 capitalize">
+          <h2 className="text-3xl font-heading font-bold text-foreground mb-2 capitalize">
             {type}
           </h2>
           <p className="text-muted-foreground font-mono text-sm">
@@ -75,7 +75,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'all' ? 'text-white' : 'text-muted-foreground'}
+              className={filter === 'all' ? 'text-foreground' : 'text-muted-foreground'}
               onClick={() => setFilter('all')}
             >
               All
@@ -83,7 +83,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'mutual' ? 'text-white' : 'text-muted-foreground'}
+              className={filter === 'mutual' ? 'text-foreground' : 'text-muted-foreground'}
               onClick={() => setFilter('mutual')}
             >
               Mutual
@@ -91,7 +91,7 @@ export const ConnectionsView: React.FC<ConnectionsViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className={filter === 'recent' ? 'text-white' : 'text-muted-foreground'}
+              className={filter === 'recent' ? 'text-foreground' : 'text-muted-foreground'}
               onClick={() => setFilter('recent')}
             >
               Recent
diff --git a/apps/web/src/components/social/groups/CreateGroupModal.tsx b/apps/web/src/components/social/groups/CreateGroupModal.tsx
index 035a2fa0a..d5842eeb0 100644
--- a/apps/web/src/components/social/groups/CreateGroupModal.tsx
+++ b/apps/web/src/components/social/groups/CreateGroupModal.tsx
@@ -47,11 +47,11 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
       ></div>
       <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-card flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <Users className="w-5 h-5 text-muted-foreground" /> Create Community
           </h3>
           <button onClick={onClose}>
-            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
+            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
           </button>
         </div>
 
@@ -61,7 +61,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
             {coverImage ? (
               <img src={coverImage} className="w-full h-full object-cover" />
             ) : (
-              <div className="text-muted-foreground flex flex-col items-center group-hover:text-white">
+              <div className="text-muted-foreground flex flex-col items-center group-hover:text-foreground">
                 <ImageIcon className="w-8 h-8 mb-2" />
                 <span className="text-xs font-bold uppercase">
                   Upload Cover Image
@@ -90,7 +90,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
                 Description
               </label>
               <textarea
-                className="w-full bg-background border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24"
+                className="w-full bg-background border border-border rounded-lg p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24"
                 placeholder="What's this community about?"
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
@@ -108,7 +108,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
                   <Globe className="w-5 h-5 text-muted-foreground" />
                 )}
                 <div>
-                  <div className="text-sm font-bold text-white">
+                  <div className="text-sm font-bold text-foreground">
                     {isPrivate ? 'Private Group' : 'Public Group'}
                   </div>
                   <div className="text-xs text-muted-foreground">
diff --git a/apps/web/src/components/social/groups/GroupsView.tsx b/apps/web/src/components/social/groups/GroupsView.tsx
index fc09288a3..a4edf5b31 100644
--- a/apps/web/src/components/social/groups/GroupsView.tsx
+++ b/apps/web/src/components/social/groups/GroupsView.tsx
@@ -94,7 +94,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
     <div className="space-y-6 animate-fadeIn pb-20">
       <div className="flex flex-col md:flex-row justify-between items-end border-b border-border/50 pb-6 gap-4">
         <div>
-          <h2 className="text-3xl font-heading font-bold text-white mb-2">
+          <h2 className="text-3xl font-heading font-bold text-foreground mb-2">
             COMMUNITIES
           </h2>
           <p className="text-muted-foreground font-mono text-sm">
@@ -114,13 +114,13 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ onOpenGroup }) => {
         <div className="flex bg-background rounded-lg p-1 border border-border">
           <button
             onClick={() => setActiveTab('my_groups')}
-            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-muted text-white' : 'text-muted-foreground hover:text-white'}`}
+            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
           >
             <Users className="w-4 h-4" /> My Groups
           </button>
           <button
             onClick={() => setActiveTab('discover')}
-            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-muted text-white' : 'text-muted-foreground hover:text-white'}`}
+            className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
           >
             <Compass className="w-4 h-4" /> Discover
           </button>
diff --git a/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewHeader.tsx b/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewHeader.tsx
index 260952c80..9fdb50ba0 100644
--- a/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewHeader.tsx
+++ b/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewHeader.tsx
@@ -32,7 +32,7 @@ export function GroupDetailViewHeader({
         <div className="absolute top-4 left-4">
           <Button
             variant="ghost"
-            className="bg-black/50 backdrop-blur text-white hover:bg-black/70"
+            className="bg-black/50 backdrop-blur text-foreground hover:bg-black/70"
             onClick={onBack}
           >
             <ArrowLeft className="w-4 h-4 mr-2" /> Back
@@ -117,7 +117,7 @@ export function GroupDetailViewHeader({
             key={tab}
             type="button"
             onClick={() => onTabChange(tab)}
-            className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)] ${activeTab === tab ? 'text-foreground border-primary' : 'text-muted-foreground border-transparent hover:text-foreground'}`}
+            className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)] ${activeTab === tab ? 'text-foreground border-primary' : 'text-muted-foreground border-transparent hover:text-foreground'}`}
           >
             {tab}
           </button>
diff --git a/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewMembers.tsx b/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewMembers.tsx
index 987b0aa12..40d3c612f 100644
--- a/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewMembers.tsx
+++ b/apps/web/src/components/social/groups/group-detail-view/GroupDetailViewMembers.tsx
@@ -15,7 +15,7 @@ export function GroupDetailViewMembers({
       {membersList.map((member) => (
         <div
           key={member.id}
-          className="flex items-center gap-4 p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--duration-normal)]"
+          className="flex items-center gap-4 p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--sumi-duration-normal)]"
         >
           <img
             src={member.avatar}
diff --git a/apps/web/src/components/studio/ai-tools-view/AIToolsViewToolGrid.tsx b/apps/web/src/components/studio/ai-tools-view/AIToolsViewToolGrid.tsx
index 630dbb2bd..876b9d1c9 100644
--- a/apps/web/src/components/studio/ai-tools-view/AIToolsViewToolGrid.tsx
+++ b/apps/web/src/components/studio/ai-tools-view/AIToolsViewToolGrid.tsx
@@ -14,7 +14,7 @@ export function AIToolsViewToolGrid({ activeTool, onSelectTool }: AIToolsViewToo
           key={tool.id}
           type="button"
           onClick={() => onSelectTool(tool.id)}
-          className={`p-4 rounded-xl border text-left transition-all duration-[var(--duration-normal)] group ${activeTool === tool.id ? 'bg-primary/10 border-primary' : 'bg-muted border-border hover:bg-muted/80'}`}
+          className={`p-4 rounded-xl border text-left transition-all duration-[var(--sumi-duration-normal)] group ${activeTool === tool.id ? 'bg-primary/10 border-primary' : 'bg-muted border-border hover:bg-muted/80'}`}
         >
           <div
             className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground group-hover:text-foreground'}`}
diff --git a/apps/web/src/components/studio/ai-tools-view/AIToolsViewWorkspace.tsx b/apps/web/src/components/studio/ai-tools-view/AIToolsViewWorkspace.tsx
index 50c1b40cc..895ca95b9 100644
--- a/apps/web/src/components/studio/ai-tools-view/AIToolsViewWorkspace.tsx
+++ b/apps/web/src/components/studio/ai-tools-view/AIToolsViewWorkspace.tsx
@@ -65,7 +65,7 @@ export function AIToolsViewWorkspace({
             {result.outputs.map((file, i) => (
               <div
                 key={i}
-                className="flex items-center justify-between p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--duration-normal)]"
+                className="flex items-center justify-between p-4 bg-card rounded-xl border border-border hover:border-border transition-colors duration-[var(--sumi-duration-normal)]"
               >
                 <div className="flex items-center gap-4">
                   <Music className="w-5 h-5 text-muted-foreground" />
diff --git a/apps/web/src/components/studio/cloud-settings-view/CloudSettingsViewPreferences.tsx b/apps/web/src/components/studio/cloud-settings-view/CloudSettingsViewPreferences.tsx
index 3ce101e28..150f27d47 100644
--- a/apps/web/src/components/studio/cloud-settings-view/CloudSettingsViewPreferences.tsx
+++ b/apps/web/src/components/studio/cloud-settings-view/CloudSettingsViewPreferences.tsx
@@ -29,7 +29,7 @@ export function CloudSettingsViewPreferences({
             <Clock className="w-4 h-4" /> Trash Retention Policy
           </label>
           <select
-            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--sumi-duration-normal)]"
             value={retention}
             onChange={(e) => onRetentionChange(e.target.value as RetentionValue)}
           >
@@ -49,7 +49,7 @@ export function CloudSettingsViewPreferences({
             <MapPin className="w-4 h-4" /> Storage Region
           </label>
           <select
-            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--sumi-duration-normal)]"
             value={region}
             onChange={(e) => onRegionChange(e.target.value as RegionValue)}
           >
diff --git a/apps/web/src/components/studio/go-live-view/GoLiveViewPreview.tsx b/apps/web/src/components/studio/go-live-view/GoLiveViewPreview.tsx
index 4dea8c62c..71343f21c 100644
--- a/apps/web/src/components/studio/go-live-view/GoLiveViewPreview.tsx
+++ b/apps/web/src/components/studio/go-live-view/GoLiveViewPreview.tsx
@@ -23,7 +23,7 @@ export function GoLiveViewPreview({ isLive }: GoLiveViewPreviewProps) {
           </div>
         </div>
       )}
-      <div className="absolute top-4 right-4 bg-black/50 px-2 py-1 rounded text-xs text-white font-mono">
+      <div className="absolute top-4 right-4 bg-black/50 px-2 py-1 rounded text-xs text-foreground font-mono">
         1080p 60fps
       </div>
     </div>
diff --git a/apps/web/src/components/studio/go-live-view/GoLiveViewStreamInfo.tsx b/apps/web/src/components/studio/go-live-view/GoLiveViewStreamInfo.tsx
index 7f0ccf558..bc5a816d2 100644
--- a/apps/web/src/components/studio/go-live-view/GoLiveViewStreamInfo.tsx
+++ b/apps/web/src/components/studio/go-live-view/GoLiveViewStreamInfo.tsx
@@ -29,7 +29,7 @@ export function GoLiveViewStreamInfo({
             Category
           </label>
           <select
-            className="w-full bg-muted border border-border rounded-xl px-4 py-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl px-4 py-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
             value={category}
             onChange={(e) => onCategoryChange(e.target.value as StreamCategory)}
           >
diff --git a/apps/web/src/components/studio/projects-manager/ProjectsManagerAddCard.tsx b/apps/web/src/components/studio/projects-manager/ProjectsManagerAddCard.tsx
index 34027624d..665482076 100644
--- a/apps/web/src/components/studio/projects-manager/ProjectsManagerAddCard.tsx
+++ b/apps/web/src/components/studio/projects-manager/ProjectsManagerAddCard.tsx
@@ -9,7 +9,7 @@ export function ProjectsManagerAddCard({ onNewProject }: ProjectsManagerAddCardP
     <div
       role="button"
       tabIndex={0}
-      className="border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center p-8 hover:bg-muted/50 transition-colors duration-[var(--duration-normal)] cursor-pointer text-muted-foreground hover:text-foreground hover:border-primary/50 min-h-64 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      className="border-2 border-dashed border-border rounded-xl flex flex-col items-center justify-center p-8 hover:bg-muted/50 transition-colors duration-[var(--sumi-duration-normal)] cursor-pointer text-muted-foreground hover:text-foreground hover:border-primary/50 min-h-64 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
       onClick={onNewProject}
       onKeyDown={(e) => e.key === 'Enter' && onNewProject()}
     >
diff --git a/apps/web/src/components/studio/projects-manager/ProjectsManagerCard.tsx b/apps/web/src/components/studio/projects-manager/ProjectsManagerCard.tsx
index eabe9a1e1..c1a0219f3 100644
--- a/apps/web/src/components/studio/projects-manager/ProjectsManagerCard.tsx
+++ b/apps/web/src/components/studio/projects-manager/ProjectsManagerCard.tsx
@@ -25,7 +25,7 @@ export function ProjectsManagerCard({
   return (
     <Card
       variant="glass"
-      className="group cursor-pointer hover:border-primary/50 transition-colors duration-[var(--duration-normal)]"
+      className="group cursor-pointer hover:border-primary/50 transition-colors duration-[var(--sumi-duration-normal)]"
       onClick={onOpen}
     >
       <div className="flex justify-between items-start mb-4">
diff --git a/apps/web/src/components/studio/projects-manager/ProjectsManagerFilterBar.tsx b/apps/web/src/components/studio/projects-manager/ProjectsManagerFilterBar.tsx
index 2e4ae93d8..739affd79 100644
--- a/apps/web/src/components/studio/projects-manager/ProjectsManagerFilterBar.tsx
+++ b/apps/web/src/components/studio/projects-manager/ProjectsManagerFilterBar.tsx
@@ -31,7 +31,7 @@ export function ProjectsManagerFilterBar({
           <button
             key={daw}
             type="button"
-            className={`px-4 py-1.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-colors duration-[var(--duration-normal)] border ${filter === daw ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted text-muted-foreground border-transparent hover:border-primary'}`}
+            className={`px-4 py-1.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-colors duration-[var(--sumi-duration-normal)] border ${filter === daw ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted text-muted-foreground border-transparent hover:border-primary'}`}
             onClick={() => onFilterChange(daw)}
           >
             {daw}
diff --git a/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalForm.tsx b/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalForm.tsx
index 2999ad4a0..16e24d2a1 100644
--- a/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalForm.tsx
+++ b/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalForm.tsx
@@ -34,7 +34,7 @@ export function CreateProjectModalForm({
               key={daw}
               type="button"
               onClick={() => onFieldChange('daw', daw)}
-              className={`p-4 rounded-xl border text-sm font-bold transition-all duration-[var(--duration-normal)] ${formData.daw === daw ? 'bg-primary/10 border-primary text-foreground' : 'bg-muted border-border text-muted-foreground hover:border-primary'}`}
+              className={`p-4 rounded-xl border text-sm font-bold transition-all duration-[var(--sumi-duration-normal)] ${formData.daw === daw ? 'bg-primary/10 border-primary text-foreground' : 'bg-muted border-border text-muted-foreground hover:border-primary'}`}
             >
               {daw}
             </button>
@@ -63,7 +63,7 @@ export function CreateProjectModalForm({
           Description
         </label>
         <textarea
-          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24 transition-colors duration-[var(--duration-normal)]"
+          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none text-sm resize-none h-24 transition-colors duration-[var(--sumi-duration-normal)]"
           placeholder="Project goals, vibe, or reference tracks..."
           value={formData.description}
           onChange={(e) => onFieldChange('description', e.target.value)}
diff --git a/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalHeader.tsx b/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalHeader.tsx
index da18ea01e..dd480274c 100644
--- a/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalHeader.tsx
+++ b/apps/web/src/components/studio/projects/create-project-modal/CreateProjectModalHeader.tsx
@@ -11,7 +11,7 @@ export function CreateProjectModalHeader({ onClose }: CreateProjectModalHeaderPr
         <Layers className="w-5 h-5 text-muted-foreground" /> New Project
       </h3>
       <button type="button" onClick={onClose} aria-label="Close">
-        <X className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)]" />
+        <X className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]" />
       </button>
     </div>
   );
diff --git a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewFiles.tsx b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewFiles.tsx
index aa180986e..a92e76fea 100644
--- a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewFiles.tsx
+++ b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewFiles.tsx
@@ -23,7 +23,7 @@ export function ProjectDetailViewFiles({ projectFiles }: ProjectDetailViewFilesP
         {projectFiles.map((file) => (
           <div
             key={file.id}
-            className="flex items-center justify-between p-4 bg-card rounded-xl border border-transparent hover:border-border transition-all duration-[var(--duration-normal)] group"
+            className="flex items-center justify-between p-4 bg-card rounded-xl border border-transparent hover:border-border transition-all duration-[var(--sumi-duration-normal)] group"
           >
             <div className="flex items-center gap-4">
               <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
diff --git a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewSidebar.tsx b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewSidebar.tsx
index 02ccd5910..59b6fa54e 100644
--- a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewSidebar.tsx
+++ b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewSidebar.tsx
@@ -37,11 +37,11 @@ export function ProjectDetailViewSidebar() {
             <span className="text-foreground">v1.4 (Current)</span>
             <span className="text-xs text-muted-foreground">2h ago</span>
           </div>
-          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--duration-normal)]">
+          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--sumi-duration-normal)]">
             <span>v1.3</span>
             <span className="text-xs text-muted-foreground">1d ago</span>
           </div>
-          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--duration-normal)]">
+          <div className="flex justify-between items-center text-sm p-2 hover:bg-muted/50 rounded-xl cursor-pointer text-muted-foreground transition-colors duration-[var(--sumi-duration-normal)]">
             <span>v1.2</span>
             <span className="text-xs text-muted-foreground">3d ago</span>
           </div>
diff --git a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewTabs.tsx b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewTabs.tsx
index a61147725..806f7eb5f 100644
--- a/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewTabs.tsx
+++ b/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewTabs.tsx
@@ -23,7 +23,7 @@ export function ProjectDetailViewTabs({
           type="button"
           onClick={() => onTabChange(tab)}
           className={cn(
-            'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--duration-normal)]',
+            'pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors duration-[var(--sumi-duration-normal)]',
             activeTab === tab
               ? 'border-primary text-foreground'
               : 'border-transparent text-muted-foreground hover:text-foreground',
diff --git a/apps/web/src/components/theme/ThemeSwitcher.tsx b/apps/web/src/components/theme/ThemeSwitcher.tsx
index b8165aa3d..4dc4c4db6 100644
--- a/apps/web/src/components/theme/ThemeSwitcher.tsx
+++ b/apps/web/src/components/theme/ThemeSwitcher.tsx
@@ -44,10 +44,10 @@ export function ThemeSwitcher({
     <div className="space-y-6">
       <div className="flex items-center gap-4">
         <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
-          <Palette className="w-5 h-5 text-white" />
+          <Palette className="w-5 h-5 text-foreground" />
         </div>
         <div>
-          <h3 className="text-xl font-bold text-white">Color Theme</h3>
+          <h3 className="text-xl font-bold text-foreground">Color Theme</h3>
           <p className="text-sm text-muted-foreground">
             Choose your visual style
           </p>
@@ -59,7 +59,7 @@ export function ThemeSwitcher({
           <button
             key={theme.id}
             onClick={() => onThemeChange(theme.id)}
-            className={`group relative p-8 rounded-2xl border-2 transition-all duration-[var(--duration-normal)] text-left overflow-hidden ${
+            className={`group relative p-8 rounded-2xl border-2 transition-all duration-[var(--sumi-duration-normal)] text-left overflow-hidden ${
               currentTheme === theme.id
                 ? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
                 : 'border-white/10 bg-muted/50 hover:border-white/30 hover:bg-muted'
@@ -86,7 +86,7 @@ export function ThemeSwitcher({
               </div>
 
               <div className="mb-2">
-                <div className="font-bold text-lg text-white mb-1">
+                <div className="font-bold text-lg text-foreground mb-1">
                   {theme.name}
                 </div>
                 <div className="text-sm text-muted-foreground">
diff --git a/apps/web/src/components/ui/AstralBackground.stories.tsx b/apps/web/src/components/ui/AstralBackground.stories.tsx
index e5db8064e..d0821679e 100644
--- a/apps/web/src/components/ui/AstralBackground.stories.tsx
+++ b/apps/web/src/components/ui/AstralBackground.stories.tsx
@@ -18,7 +18,7 @@ export const Default: Story = {
         <div className="h-[400px] w-full relative border border-border overflow-hidden rounded-lg">
             <AstralBackground />
             <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                <h1 className="text-4xl font-bold text-white z-10">Astral Background</h1>
+                <h1 className="text-4xl font-bold text-foreground z-10">Astral Background</h1>
             </div>
         </div>
     ),
diff --git a/apps/web/src/components/ui/Card.stories.tsx b/apps/web/src/components/ui/Card.stories.tsx
index 7fcc4517c..cb857b387 100644
--- a/apps/web/src/components/ui/Card.stories.tsx
+++ b/apps/web/src/components/ui/Card.stories.tsx
@@ -70,7 +70,7 @@ export const Spotlight: Story = {
   },
   render: (args) => (
     <div className="p-10 bg-black flex justify-center">
-      <Card {...args} className="max-w-sm w-full text-white">
+      <Card {...args} className="max-w-sm w-full text-foreground">
         <CardHeader>
           <CardTitle>Spotlight Effect</CardTitle>
           <CardDescription className="text-gray-400">Move your mouse over the card.</CardDescription>
diff --git a/apps/web/src/components/ui/ContentFadeIn.tsx b/apps/web/src/components/ui/ContentFadeIn.tsx
index efcf8f584..99ee3d065 100644
--- a/apps/web/src/components/ui/ContentFadeIn.tsx
+++ b/apps/web/src/components/ui/ContentFadeIn.tsx
@@ -1,6 +1,6 @@
 /**
  * ContentFadeIn — Transition premium skeleton → contenu.
- * Fade-in 200ms avec --ease-out pour une transition fluide.
+ * Fade-in 200ms avec --sumi-ease-out pour une transition fluide.
  * Utilisé quand le contenu remplace un skeleton (React Query isLoading → data).
  */
 
@@ -15,7 +15,7 @@ export interface ContentFadeInProps {
   className?: string;
 }
 
-/** Transition fade-in 200ms (--duration-immersive) avec --ease-out */
+/** Transition fade-in 200ms (--sumi-duration-slow) avec --sumi-ease-out */
 export function ContentFadeIn({ children, className }: ContentFadeInProps) {
   return (
     <motion.div
diff --git a/apps/web/src/components/ui/FAB.tsx b/apps/web/src/components/ui/FAB.tsx
index 5e8bc104b..3e9c72caa 100644
--- a/apps/web/src/components/ui/FAB.tsx
+++ b/apps/web/src/components/ui/FAB.tsx
@@ -90,7 +90,7 @@ export function FAB({
       )}
     >
       {showLabel && label && (
-        <span className="text-sm font-semibold text-white bg-card/90 backdrop-blur-md px-4 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap">
+        <span className="text-sm font-semibold text-foreground bg-card/90 backdrop-blur-md px-4 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap">
           {label}
         </span>
       )}
@@ -100,7 +100,7 @@ export function FAB({
         className={cn(
           'rounded-full aspect-square p-0',
           'shadow-fab-glow shadow-fab-glow-hover',
-          'transition-all duration-[var(--duration-normal)]',
+          'transition-all duration-[var(--sumi-duration-normal)]',
           'active:opacity-80',
           sizeClasses[size],
           className,
diff --git a/apps/web/src/components/ui/HelpText.stories.tsx b/apps/web/src/components/ui/HelpText.stories.tsx
index 2d6fb56d2..4cfb0a3e8 100644
--- a/apps/web/src/components/ui/HelpText.stories.tsx
+++ b/apps/web/src/components/ui/HelpText.stories.tsx
@@ -26,7 +26,7 @@ export const Default: Story = {
 export const InlineExample: Story = {
     render: () => (
         <div className="flex items-center gap-2">
-            <span className="text-sm font-medium text-white">Password</span>
+            <span className="text-sm font-medium text-foreground">Password</span>
             <HelpText text="Must be at least 8 characters long." />
         </div>
     ),
diff --git a/apps/web/src/components/ui/ImageCropper.tsx b/apps/web/src/components/ui/ImageCropper.tsx
index db3e67ea4..2034a97f9 100644
--- a/apps/web/src/components/ui/ImageCropper.tsx
+++ b/apps/web/src/components/ui/ImageCropper.tsx
@@ -4,7 +4,7 @@ import React, { useState, useCallback, lazy, Suspense } from 'react';
 const Cropper = lazy(() =>
   Promise.resolve({
     default: (_props: any) => (
-      <div className="bg-muted flex items-center justify-center h-full text-white">
+      <div className="bg-muted flex items-center justify-center h-full text-foreground">
         Cropper Mock
       </div>
     ),
@@ -128,7 +128,7 @@ export const ImageCropper: React.FC<ImageCropperProps> = ({
       <div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl overflow-hidden flex flex-col h-layout-modal-sm">
         {/* Header */}
         <div className="p-4 border-b border-border flex justify-between items-center bg-card">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             Edit Image
           </h3>
           <Button variant="ghost" size="icon" onClick={onCancel}>
diff --git a/apps/web/src/components/ui/ImageViewerModal.tsx b/apps/web/src/components/ui/ImageViewerModal.tsx
index a6b897bf3..e97f05163 100644
--- a/apps/web/src/components/ui/ImageViewerModal.tsx
+++ b/apps/web/src/components/ui/ImageViewerModal.tsx
@@ -161,14 +161,14 @@ export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
           <a
             href={src}
             download
-            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors"
+            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-foreground transition-colors"
             title="Download"
           >
             <Download className="w-5 h-5" />
           </a>
           <button
             onClick={onClose}
-            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors"
+            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-foreground transition-colors"
             title="Close"
           >
             <X className="w-5 h-5" />
@@ -180,7 +180,7 @@ export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
       {hasPrev && (
         <button
           onClick={onPrev}
-          className="absolute left-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute left-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-foreground transition-colors z-10"
           aria-label="Previous image"
         >
           <ChevronLeft className="w-8 h-8" />
@@ -189,7 +189,7 @@ export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
       {hasNext && (
         <button
           onClick={onNext}
-          className="absolute right-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute right-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-foreground transition-colors z-10"
           aria-label="Next image"
         >
           <ChevronRight className="w-8 h-8" />
diff --git a/apps/web/src/components/ui/Modal.stories.tsx b/apps/web/src/components/ui/Modal.stories.tsx
index cd0bb7894..2d68c19fc 100644
--- a/apps/web/src/components/ui/Modal.stories.tsx
+++ b/apps/web/src/components/ui/Modal.stories.tsx
@@ -55,7 +55,7 @@ export const WithFooter: Story = {
                         </>
                     }
                 >
-                    <p className="text-white">Are you sure you want to proceed?</p>
+                    <p className="text-foreground">Are you sure you want to proceed?</p>
                 </Modal>
             </>
         );
diff --git a/apps/web/src/components/ui/NavigationProgress.tsx b/apps/web/src/components/ui/NavigationProgress.tsx
index 1399fbcb4..e28b01bc0 100644
--- a/apps/web/src/components/ui/NavigationProgress.tsx
+++ b/apps/web/src/components/ui/NavigationProgress.tsx
@@ -39,7 +39,7 @@ export function NavigationProgress() {
           transition={{ duration: 0.15 }}
         >
           <motion.div
-            className="h-full bg-primary shadow-button-primary-glow"
+            className="h-full bg-primary shadow-sm"
             initial={{ width: '0%' }}
             animate={{ width: `${progress}%` }}
             transition={{ duration: 0.3, ease: 'easeOut' }}
diff --git a/apps/web/src/components/ui/OptimizedImage.stories.tsx b/apps/web/src/components/ui/OptimizedImage.stories.tsx
index 321949bf1..5b2e355c4 100644
--- a/apps/web/src/components/ui/OptimizedImage.stories.tsx
+++ b/apps/web/src/components/ui/OptimizedImage.stories.tsx
@@ -35,7 +35,7 @@ export const WithPlaceholder: Story = {
     width: 600,
     height: 400,
     className: 'rounded-lg object-cover',
-    placeholder: <span className="text-white">Loading...</span>,
+    placeholder: <span className="text-foreground">Loading...</span>,
   },
 };
 
diff --git a/apps/web/src/components/ui/ScrollToTop.tsx b/apps/web/src/components/ui/ScrollToTop.tsx
index a95e0f01b..8e0deac37 100644
--- a/apps/web/src/components/ui/ScrollToTop.tsx
+++ b/apps/web/src/components/ui/ScrollToTop.tsx
@@ -27,7 +27,7 @@ export function ScrollToTop() {
           exit={{ opacity: 0, scale: 0.8, y: 10 }}
           transition={{ duration: 0.2 }}
           onClick={scrollToTop}
-          className="fixed bottom-24 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all lg:bottom-8"
+          className="fixed bottom-24 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:shadow-xl active:scale-95 transition-all lg:bottom-8"
           aria-label="Scroll to top"
         >
           <ArrowUp className="h-5 w-5" />
diff --git a/apps/web/src/components/ui/Sidebar.tsx b/apps/web/src/components/ui/Sidebar.tsx
index 13d6d6fbe..9b4a17fb0 100644
--- a/apps/web/src/components/ui/Sidebar.tsx
+++ b/apps/web/src/components/ui/Sidebar.tsx
@@ -136,7 +136,7 @@ export function Sidebar({
       
       <aside
         className={cn(
-          'flex flex-col transition-all duration-[var(--duration-normal)] ease-in-out',
+          'flex flex-col transition-all duration-[var(--sumi-duration-normal)] ease-in-out',
           position === 'left' ? 'border-r' : 'border-l',
           'border-white/10 bg-card/40 backdrop-blur-md rounded-xl',
           isCollapsed ? 'w-0 overflow-hidden' : width,
@@ -149,7 +149,7 @@ export function Sidebar({
             {title && (
               <div className="flex items-center gap-2 flex-1">
                 {icon && <div className="text-muted-foreground">{icon}</div>}
-                <h3 className="text-sm font-semibold text-white">{title}</h3>
+                <h3 className="text-sm font-semibold text-foreground">{title}</h3>
               </div>
             )}
             {collapsible && (
diff --git a/apps/web/src/components/ui/Spinner.tsx b/apps/web/src/components/ui/Spinner.tsx
index 6a9a0be84..89e8c00bb 100644
--- a/apps/web/src/components/ui/Spinner.tsx
+++ b/apps/web/src/components/ui/Spinner.tsx
@@ -21,7 +21,7 @@ export interface SpinnerProps {
   /**
    * Couleur du spinner
    *
-   * - `default`: Couleur par défaut (kodo-cyan pour le thème Kodo)
+   * - `default`: Couleur par défaut (primary pour le thème Kodo)
    * - `muted`: Couleur atténuée (text-muted-foreground)
    * - `white`: Blanc
    * - `current`: Utilise la couleur du texte parent
@@ -87,7 +87,7 @@ export function Spinner({
   const variantClasses = {
     default: 'text-primary',
     muted: 'text-muted-foreground',
-    white: 'text-white',
+    white: 'text-foreground',
     current: 'text-current',
   };
 
diff --git a/apps/web/src/components/ui/Switch.stories.tsx b/apps/web/src/components/ui/Switch.stories.tsx
index 53e80fd47..35e0e0706 100644
--- a/apps/web/src/components/ui/Switch.stories.tsx
+++ b/apps/web/src/components/ui/Switch.stories.tsx
@@ -47,7 +47,7 @@ export const WithLabel: Story = {
     render: (args) => (
         <div className="flex items-center space-x-2">
             <Switch id="airplane-mode" {...args} />
-            <label htmlFor="airplane-mode" className="text-sm font-medium leading-none text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            <label htmlFor="airplane-mode" className="text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                 Airplane Mode
             </label>
         </div>
diff --git a/apps/web/src/components/ui/VirtualizedList.stories.tsx b/apps/web/src/components/ui/VirtualizedList.stories.tsx
index 8afc14f51..0e036ba4d 100644
--- a/apps/web/src/components/ui/VirtualizedList.stories.tsx
+++ b/apps/web/src/components/ui/VirtualizedList.stories.tsx
@@ -33,7 +33,7 @@ export const Default: Story = {
                 key={item.id}
                 className="h-[70px] p-4 border-b border-border flex flex-col justify-center hover:bg-white/5 transition-colors"
             >
-                <span className="font-bold text-white">{item.text}</span>
+                <span className="font-bold text-foreground">{item.text}</span>
                 <span className="text-xs text-muted-foreground">{item.description}</span>
             </div>
         ),
diff --git a/apps/web/src/components/ui/WaveformVisualizer.tsx b/apps/web/src/components/ui/WaveformVisualizer.tsx
index 5ac45a906..90025ddf5 100644
--- a/apps/web/src/components/ui/WaveformVisualizer.tsx
+++ b/apps/web/src/components/ui/WaveformVisualizer.tsx
@@ -39,14 +39,14 @@ interface WaveformVisualizerProps {
   /**
    * Couleur des barres non jouées
    *
-   * @default '#374054' (kodo-steel)
+   * @default '#374054' (sumi-bg-hover)
    */
   color?: string;
 
   /**
    * Couleur des barres jouées
    *
-   * @default '#00FFF7' (kodo-cyan)
+   * @default '#00FFF7' (sumi-accent)
    */
   playedColor?: string;
 }
diff --git a/apps/web/src/components/ui/accordion/AccordionTrigger.tsx b/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
index 2b1f58baa..384ba588a 100644
--- a/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
+++ b/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
@@ -24,7 +24,7 @@ export const AccordionTrigger = React.forwardRef<
     {children}
     <ChevronDown
       className={cn(
-        'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)]',
+        'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--sumi-duration-normal)]',
         open && 'rotate-180',
       )}
     />
diff --git a/apps/web/src/components/ui/avatar-upload/AvatarUploadDropzone.tsx b/apps/web/src/components/ui/avatar-upload/AvatarUploadDropzone.tsx
index dca995621..d1e1b0a01 100644
--- a/apps/web/src/components/ui/avatar-upload/AvatarUploadDropzone.tsx
+++ b/apps/web/src/components/ui/avatar-upload/AvatarUploadDropzone.tsx
@@ -58,12 +58,12 @@ export function AvatarUploadDropzone({
       )}
       {!disabled && !isUploading && (
         <div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
-          <Upload className="h-6 w-6 text-white" />
+          <Upload className="h-6 w-6 text-foreground" />
         </div>
       )}
       {isUploading && (
         <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-          <Loader2 className="h-6 w-6 text-white animate-spin" />
+          <Loader2 className="h-6 w-6 text-foreground animate-spin" />
         </div>
       )}
     </div>
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index db8834672..dffeb4f20 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
  * SUMI Design System: semantic tokens, rounded-full, duration-normal
  */
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-sans font-medium tracking-tight transition-[color,box-shadow,border-color,background-color] duration-[var(--duration-normal)] ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:shadow-[var(--sumi-shadow-glow)] disabled:pointer-events-none disabled:opacity-50 gap-2',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-sans font-medium tracking-tight transition-[color,box-shadow,border-color,background-color] duration-[var(--sumi-duration-normal)] ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:shadow-[var(--sumi-shadow-glow)] disabled:pointer-events-none disabled:opacity-50 gap-2',
   {
     variants: {
       variant: {
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index ada6ffeea..079c0eebc 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const cardVariants = cva(
-  'flex flex-col rounded-lg text-card-foreground transition-[box-shadow,background-color,border-color] duration-[var(--duration-normal)] ease-out relative overflow-hidden',
+  'flex flex-col rounded-lg text-card-foreground transition-[box-shadow,background-color,border-color] duration-[var(--sumi-duration-normal)] ease-out relative overflow-hidden',
   {
     variants: {
       variant: {
@@ -31,7 +31,7 @@ const cardVariants = cva(
 
         /* Immersive surface: subtle border, lighter + diffuse shadow on hover */
         surface:
-          'bg-card border border-border shadow-none hover:bg-card/90 hover:border-border hover:shadow-card-hover transition-all duration-[var(--duration-immersive)] ease-in-out',
+          'bg-card border border-border shadow-none hover:bg-card/90 hover:border-border hover:shadow-card-hover transition-all duration-[var(--sumi-duration-slow)] ease-in-out',
       },
       padding: {
         none: '',
@@ -90,7 +90,7 @@ function Card({ className, variant, padding, spotlight, spotlightColor = 'rgba(2
     >
       {isSpotlight && (
         <div
-          className="pointer-events-none absolute -inset-px opacity-0 transition duration-[var(--duration-normal)]"
+          className="pointer-events-none absolute -inset-px opacity-0 transition duration-[var(--sumi-duration-normal)]"
           style={{
             opacity,
             background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 40%)`,
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index ebaa26d5e..6e933c3d6 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -118,7 +118,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           />
         </div>
         {label && (
-          <span className="text-sm text-foreground group-hover:text-white transition-colors duration-[var(--duration-fast)] select-none">
+          <span className="text-sm text-foreground group-hover:text-foreground transition-colors duration-[var(--duration-fast)] select-none">
             {label}
           </span>
         )}
diff --git a/apps/web/src/components/ui/dialog/DialogTitle.tsx b/apps/web/src/components/ui/dialog/DialogTitle.tsx
index a56f7488d..1e598b6c4 100644
--- a/apps/web/src/components/ui/dialog/DialogTitle.tsx
+++ b/apps/web/src/components/ui/dialog/DialogTitle.tsx
@@ -5,7 +5,7 @@ export function DialogTitle({ children, className }: DialogTitleProps) {
   return (
     <h2
       className={cn(
-        'text-2xl font-semibold leading-none tracking-tight text-white font-heading',
+        'text-2xl font-semibold leading-none tracking-tight text-foreground font-heading',
         className,
       )}
     >
diff --git a/apps/web/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.tsx b/apps/web/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.tsx
index 4baa272ce..31491d550 100644
--- a/apps/web/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.tsx
+++ b/apps/web/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.tsx
@@ -15,7 +15,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
     onClick={() => onCheckedChange?.(!checked)}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
-      'transition-colors focus:bg-white/5 focus:text-white disabled:pointer-events-none disabled:opacity-50',
+      'transition-colors focus:bg-white/5 focus:text-foreground disabled:pointer-events-none disabled:opacity-50',
       'text-foreground hover:bg-muted/50 w-full text-left',
       className,
     )}
diff --git a/apps/web/src/components/ui/dropdown-menu/DropdownMenuRadioItem.tsx b/apps/web/src/components/ui/dropdown-menu/DropdownMenuRadioItem.tsx
index b768fd067..f30aafb1b 100644
--- a/apps/web/src/components/ui/dropdown-menu/DropdownMenuRadioItem.tsx
+++ b/apps/web/src/components/ui/dropdown-menu/DropdownMenuRadioItem.tsx
@@ -14,7 +14,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
     aria-checked={checked}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
-      'transition-colors focus:bg-white/5 focus:text-white disabled:pointer-events-none disabled:opacity-50',
+      'transition-colors focus:bg-white/5 focus:text-foreground disabled:pointer-events-none disabled:opacity-50',
       'text-foreground hover:bg-muted/50 w-full text-left',
       className,
     )}
diff --git a/apps/web/src/components/ui/floating-input.tsx b/apps/web/src/components/ui/floating-input.tsx
index 2c64fb1c5..b0d7fdfdf 100644
--- a/apps/web/src/components/ui/floating-input.tsx
+++ b/apps/web/src/components/ui/floating-input.tsx
@@ -26,7 +26,7 @@ const FloatingInput = React.forwardRef<HTMLInputElement, FloatingInputProps>(
                         type={inputType}
                         id={inputId}
                         className={cn(
-                            "block px-4 pb-2.5 pt-5 w-full text-sm text-white bg-muted/40 rounded-xl border appearance-none focus:outline-none focus:ring-0 peer transition-all duration-[var(--duration-fast)]",
+                            "block px-4 pb-2.5 pt-5 w-full text-sm text-foreground bg-muted/40 rounded-xl border appearance-none focus:outline-none focus:ring-0 peer transition-all duration-[var(--duration-fast)]",
                             // Focus glow
                             "focus:shadow-[0_0_0_3px_oklch(var(--primary)/0.15),0_0_12px_oklch(var(--primary)/0.1)]",
                             // Borders & Colors
diff --git a/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx b/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
index daa75b7af..d60d037ce 100644
--- a/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
+++ b/apps/web/src/components/ui/lazy-component/LazyErrorFallback.tsx
@@ -25,7 +25,7 @@ export function LazyErrorFallback({
   onRetry,
 }: LazyErrorFallbackProps) {
   return (
-    <div className="flex flex-col items-center justify-center min-h-layout-page-sm p-8 text-center animate-in fade-in zoom-in duration-[var(--duration-normal)]">
+    <div className="flex flex-col items-center justify-center min-h-layout-page-sm p-8 text-center animate-in fade-in zoom-in duration-[var(--sumi-duration-normal)]">
       <div className="bg-card/50 border border-border/30 rounded-xl p-8 max-w-md w-full shadow-lg backdrop-blur-sm">
         <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center mx-auto mb-6">
           <AlertTriangle className="h-8 w-8 text-destructive" />
diff --git a/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx b/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
index e345c2d54..a9d9ca9c8 100644
--- a/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
+++ b/apps/web/src/components/ui/optimized-image/OptimizedImage.tsx
@@ -131,7 +131,7 @@ export function OptimizedImage({
         alt={alt}
         width={width}
         height={height}
-        className={`transition-opacity duration-[var(--duration-normal)] ${
+        className={`transition-opacity duration-[var(--sumi-duration-normal)] ${
           isLoaded ? 'opacity-100' : 'opacity-0'
         } ${className}`}
         onLoad={handleImageLoad}
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index c851ebfca..9b3a2634c 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -156,7 +156,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
           <div className="h-4 bg-background rounded-full overflow-hidden border border-warning/30">
             <div
               className={cn(
-                'h-full bg-gradient-to-r shadow-gold-glow transition-all duration-[var(--duration-slow)]',
+                'h-full bg-gradient-to-r shadow-gold-glow transition-all duration-[var(--sumi-duration-slow)]',
                 gradientStyles.gold,
               )}
               style={{ width: `${percentage}%` }}
@@ -186,7 +186,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         <div className="h-2 bg-muted rounded-full overflow-hidden">
           <div
             className={cn(
-              'h-full transition-all duration-[var(--duration-normal)] shadow-slider-thumb',
+              'h-full transition-all duration-[var(--sumi-duration-normal)] shadow-slider-thumb',
               colorStyles[color],
             )}
             style={{ width: `${percentage}%` }}
diff --git a/apps/web/src/components/ui/tabs/TabsTrigger.tsx b/apps/web/src/components/ui/tabs/TabsTrigger.tsx
index 02d266c8d..bb41ec2a6 100644
--- a/apps/web/src/components/ui/tabs/TabsTrigger.tsx
+++ b/apps/web/src/components/ui/tabs/TabsTrigger.tsx
@@ -34,7 +34,7 @@ export const TabsTrigger = React.forwardRef<
         onClick={() => onValueChange?.(triggerValue)}
         className={cn(
           'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-1.5 text-sm font-bold uppercase tracking-wider',
-          'ring-offset-background transition-all duration-[var(--duration-normal)]',
+          'ring-offset-background transition-all duration-[var(--sumi-duration-normal)]',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
           isActive
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 5a14e95aa..684731aae 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -84,7 +84,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             'w-full px-4 py-4',
             'bg-muted border',
             error ? 'border-destructive' : 'border-border',
-            'text-white placeholder-gray-500',
+            'text-foreground placeholder-gray-500',
             'font-body text-base',
             'rounded-lg',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:shadow-[var(--sumi-shadow-glow)]',
diff --git a/apps/web/src/components/ui/tooltip/TooltipContent.tsx b/apps/web/src/components/ui/tooltip/TooltipContent.tsx
index b51fa7ce6..eb903b867 100644
--- a/apps/web/src/components/ui/tooltip/TooltipContent.tsx
+++ b/apps/web/src/components/ui/tooltip/TooltipContent.tsx
@@ -31,7 +31,7 @@ export function TooltipContent({
       className={cn(
         'absolute z-50 max-w-xs px-4 py-1.5 text-sm text-foreground bg-card rounded-xl shadow-lg',
         'border border-border pointer-events-none',
-        'transition-all duration-[var(--duration-normal)]',
+        'transition-all duration-[var(--sumi-duration-normal)]',
         positionClasses[calculatedPosition],
         visible ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
         className,
diff --git a/apps/web/src/components/upload/BulkUploadModal.tsx b/apps/web/src/components/upload/BulkUploadModal.tsx
index 623fa98c1..f050c22dd 100644
--- a/apps/web/src/components/upload/BulkUploadModal.tsx
+++ b/apps/web/src/components/upload/BulkUploadModal.tsx
@@ -35,7 +35,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
         {/* Header */}
         <div className="p-8 border-b border-border bg-muted flex justify-between items-center">
           <div>
-            <h3 className="font-heading font-bold text-xl text-white flex items-center gap-2">
+            <h3 className="font-heading font-bold text-xl text-foreground flex items-center gap-2">
               <Layers className="w-5 h-5 text-muted-foreground" /> Bulk Upload Manager
             </h3>
             <p className="text-xs text-muted-foreground mt-1">
@@ -56,7 +56,7 @@ export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
           </div>
           <div className="h-1 bg-muted rounded-full overflow-hidden">
             <div
-              className="h-full bg-primary transition-all duration-[var(--duration-normal)]"
+              className="h-full bg-primary transition-all duration-[var(--sumi-duration-normal)]"
               style={{ width: `${totalProgress}%` }}
             ></div>
           </div>
diff --git a/apps/web/src/components/upload/FilePreviewCard.tsx b/apps/web/src/components/upload/FilePreviewCard.tsx
index 130cbde1b..f06dbf11e 100644
--- a/apps/web/src/components/upload/FilePreviewCard.tsx
+++ b/apps/web/src/components/upload/FilePreviewCard.tsx
@@ -73,7 +73,7 @@ export const FilePreviewCard: React.FC<FilePreviewCardProps> = ({
       <div className="flex-1 min-w-0">
         <div className="flex justify-between items-start mb-1">
           <h4
-            className="font-bold text-white text-sm truncate pr-2"
+            className="font-bold text-foreground text-sm truncate pr-2"
             title={file.name}
           >
             {file.name}
diff --git a/apps/web/src/components/upload/FileUploadZone.tsx b/apps/web/src/components/upload/FileUploadZone.tsx
index 47ad80d46..170dd98f5 100644
--- a/apps/web/src/components/upload/FileUploadZone.tsx
+++ b/apps/web/src/components/upload/FileUploadZone.tsx
@@ -65,7 +65,7 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
       onDragLeave={() => setIsDragging(false)}
       onDrop={handleDrop}
       className={`
-        border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center transition-all duration-[var(--duration-normal)] group cursor-pointer
+        border-2 border-dashed rounded-xl p-12 flex flex-col items-center justify-center text-center transition-all duration-[var(--sumi-duration-normal)] group cursor-pointer
         ${
           isDragging
             ? 'border-primary bg-primary/10 scale-[1.02]'
@@ -87,14 +87,14 @@ export const FileUploadZone: React.FC<FileUploadZoneProps> = ({
       >
         <div
           className={`
-          w-20 h-20 rounded-full flex items-center justify-center mb-6 transition-all duration-[var(--duration-normal)] shadow-lg
+          w-20 h-20 rounded-full flex items-center justify-center mb-6 transition-all duration-[var(--sumi-duration-normal)] shadow-lg
           ${isDragging ? 'bg-primary text-black' : 'bg-muted text-primary group-hover:bg-border'}
         `}
         >
           <UploadCloud className="w-10 h-10" />
         </div>
 
-        <h3 className="text-xl font-heading font-bold text-white mb-2">
+        <h3 className="text-xl font-heading font-bold text-foreground mb-2">
           {isDragging ? 'Drop Files Here' : 'Drag & Drop or Click'}
         </h3>
         <p className="text-muted-foreground mb-6 max-w-sm">
diff --git a/apps/web/src/components/upload/UploadProgressBar.tsx b/apps/web/src/components/upload/UploadProgressBar.tsx
index a1d90c958..ddba182b6 100644
--- a/apps/web/src/components/upload/UploadProgressBar.tsx
+++ b/apps/web/src/components/upload/UploadProgressBar.tsx
@@ -36,7 +36,7 @@ export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
         </div>
         <div className="h-1.5 bg-muted rounded-full overflow-hidden">
           <div
-            className={`h-full transition-all duration-[var(--duration-normal)] ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
+            className={`h-full transition-all duration-[var(--sumi-duration-normal)] ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
             style={{ width: `${progress}%` }}
           />
         </div>
diff --git a/apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx b/apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
index 65fa08f69..1a45dc196 100644
--- a/apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
+++ b/apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
@@ -110,7 +110,7 @@ export const CoverArtUploadModal: React.FC<CoverArtUploadModalProps> = ({
       ></div>
       <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
         <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <ImageIcon className="w-4 h-4 text-muted-foreground" /> Upload Artwork
           </h3>
           <button onClick={onClose}>
@@ -126,12 +126,12 @@ export const CoverArtUploadModal: React.FC<CoverArtUploadModalProps> = ({
               <Upload className="w-8 h-8 text-muted-foreground" />
             )}
             <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-              <span className="text-xs font-bold text-white">Change</span>
+              <span className="text-xs font-bold text-foreground">Change</span>
             </div>
           </div>
 
           <div className="space-y-2 mb-8">
-            <h4 className="text-white font-bold">Drag & Drop or Browse</h4>
+            <h4 className="text-foreground font-bold">Drag & Drop or Browse</h4>
             <p className="text-muted-foreground text-sm">
               Recommended: 3000x3000px, JPG or PNG.
               <br />
diff --git a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
index 2e744f95d..f40e8a074 100644
--- a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
+++ b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
@@ -41,7 +41,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
       ></div>
       <div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
         <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
-          <h3 className="font-bold text-white flex items-center gap-2">
+          <h3 className="font-bold text-foreground flex items-center gap-2">
             <Mic2 className="w-4 h-4 text-muted-foreground" /> Lyrics Editor
           </h3>
           <button onClick={onClose}>
@@ -83,7 +83,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
           </div>
 
           <textarea
-            className="flex-1 w-full bg-muted border border-border rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-primary outline-none custom-scrollbar"
+            className="flex-1 w-full bg-muted border border-border rounded-lg p-4 text-foreground font-mono text-sm leading-relaxed resize-none focus:border-primary outline-none custom-scrollbar"
             placeholder="Enter lyrics here...&#10;[00:12.00] First line of the verse&#10;[00:15.50] Second line..."
             value={lyrics}
             onChange={(e) => setLyrics(e.target.value)}
diff --git a/apps/web/src/components/upload/metadata/MetadataEditor.tsx b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
index 340e21073..a475ab1c8 100644
--- a/apps/web/src/components/upload/metadata/MetadataEditor.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
@@ -142,7 +142,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
               )}
             </button>
             <div>
-              <h3 className="font-bold text-white text-lg">
+              <h3 className="font-bold text-foreground text-lg">
                 {currentMeta.title || currentFile.file.name}
               </h3>
               <p className="text-xs text-muted-foreground font-mono">
diff --git a/apps/web/src/components/upload/metadata/MetadataForm.tsx b/apps/web/src/components/upload/metadata/MetadataForm.tsx
index d06af0b26..d77ab3d80 100644
--- a/apps/web/src/components/upload/metadata/MetadataForm.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataForm.tsx
@@ -78,7 +78,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
               </div>
             )}
             <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-              <Camera className="w-8 h-8 text-white" />
+              <Camera className="w-8 h-8 text-foreground" />
             </div>
           </div>
           <p className="text-center text-xs text-muted-foreground mt-2">
@@ -144,7 +144,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
       {/* Advanced Details */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
         <div className="space-y-4">
-          <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-2">
+          <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-2">
             Publishing Details
           </h4>
           <Input
@@ -176,7 +176,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
         </div>
 
         <div className="space-y-4">
-          <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-2">
+          <h4 className="text-sm font-bold text-foreground uppercase tracking-wider mb-2">
             Metadata & Assets
           </h4>
 
@@ -237,7 +237,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
               Description
             </label>
             <textarea
-              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-25 text-sm"
+              className="w-full bg-muted border border-border rounded-lg p-4 text-foreground focus:border-border outline-none min-h-25 text-sm"
               placeholder="Tell the story behind this track..."
               value={data.description || ''}
               onChange={(e) => updateField('description', e.target.value)}
diff --git a/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx b/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
index d8d475ee1..60f256de7 100644
--- a/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
+++ b/apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
@@ -80,7 +80,7 @@ export const TagSuggestionsModal: React.FC<TagSuggestionsModalProps> = ({
         <div>
           <div className="flex gap-2 mb-3">
             <input
-              className="flex-1 bg-muted border border-border rounded-lg px-4 py-2 text-white focus:border-destructive outline-none"
+              className="flex-1 bg-muted border border-border rounded-lg px-4 py-2 text-foreground focus:border-destructive outline-none"
               placeholder="Add a tag..."
               value={input}
               onChange={(e) => setInput(e.target.value)}
diff --git a/apps/web/src/components/views/admin-view/AdminViewSidebar.tsx b/apps/web/src/components/views/admin-view/AdminViewSidebar.tsx
index dd998fe16..7f790a975 100644
--- a/apps/web/src/components/views/admin-view/AdminViewSidebar.tsx
+++ b/apps/web/src/components/views/admin-view/AdminViewSidebar.tsx
@@ -16,7 +16,7 @@ export function AdminViewSidebar({
 }: AdminViewSidebarProps) {
   return (
     <div className="w-full lg:w-64 flex-shrink-0">
-      <Card variant="glass" className="mb-6 p-4 border-destructive/30 bg-destructive/5 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+      <Card variant="glass" className="mb-6 p-4 border-destructive/30 bg-destructive/5 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
         <div className="flex items-center gap-4">
           <ShieldAlert className="w-6 h-6 text-destructive" />
           <div>
diff --git a/apps/web/src/components/views/analytics-view/AnalyticsViewChart.tsx b/apps/web/src/components/views/analytics-view/AnalyticsViewChart.tsx
index ee9affd48..b9200db17 100644
--- a/apps/web/src/components/views/analytics-view/AnalyticsViewChart.tsx
+++ b/apps/web/src/components/views/analytics-view/AnalyticsViewChart.tsx
@@ -17,7 +17,7 @@ export function AnalyticsViewChart({ dateRange, hoveredData, onHover }: Analytic
     >
       <div className="flex justify-between items-center mb-8 relative z-10">
         <div>
-          <h3 className="text-xl font-bold text-white mb-1">Performance Dynamics</h3>
+          <h3 className="text-xl font-bold text-foreground mb-1">Performance Dynamics</h3>
           <p className="text-xs text-muted-foreground font-mono">SCALAR TEMPORAL RESOLUTION</p>
         </div>
         <div className="flex gap-6 text-xs font-mono uppercase tracking-widest">
diff --git a/apps/web/src/components/views/analytics-view/AnalyticsViewHeader.tsx b/apps/web/src/components/views/analytics-view/AnalyticsViewHeader.tsx
index 8713b3ece..bf2e2c1c4 100644
--- a/apps/web/src/components/views/analytics-view/AnalyticsViewHeader.tsx
+++ b/apps/web/src/components/views/analytics-view/AnalyticsViewHeader.tsx
@@ -23,7 +23,7 @@ export function AnalyticsViewHeader({
   return (
     <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 border-b border-white/5 pb-8">
       <div>
-        <h1 className="text-4xl font-heading font-bold text-white mb-2 flex items-center gap-3">
+        <h1 className="text-4xl font-heading font-bold text-foreground mb-2 flex items-center gap-3">
           <Activity className="text-primary w-8 h-8" /> NEURAL ANALYTICS
         </h1>
         <p className="text-muted-foreground font-mono text-xs tracking-wide">
@@ -42,7 +42,7 @@ export function AnalyticsViewHeader({
                 'px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-widest transition-all',
                 dateRange === range
                   ? 'bg-primary text-black shadow-glow-cyan'
-                  : 'text-muted-foreground hover:text-white'
+                  : 'text-muted-foreground hover:text-foreground'
               )}
             >
               {range}
diff --git a/apps/web/src/components/views/analytics-view/AnalyticsViewOrigins.tsx b/apps/web/src/components/views/analytics-view/AnalyticsViewOrigins.tsx
index 87970aec0..623c2de31 100644
--- a/apps/web/src/components/views/analytics-view/AnalyticsViewOrigins.tsx
+++ b/apps/web/src/components/views/analytics-view/AnalyticsViewOrigins.tsx
@@ -11,17 +11,17 @@ interface AnalyticsViewOriginsProps {
 export function AnalyticsViewOrigins({ sources }: AnalyticsViewOriginsProps) {
   return (
     <Card variant="glass" className="p-6 bg-black/40 border-white/5">
-      <h3 className="font-bold text-white mb-6 text-sm uppercase tracking-widest flex items-center gap-2">
+      <h3 className="font-bold text-foreground mb-6 text-sm uppercase tracking-widest flex items-center gap-2">
         <Globe className="w-4 h-4 text-destructive" /> Origins
       </h3>
       <div className="space-y-5">
         {sources.map((src) => (
           <div key={src.label} className="group cursor-default">
             <div className="flex justify-between text-xs mb-2">
-              <span className="text-muted-foreground group-hover:text-white transition-colors uppercase font-mono">
+              <span className="text-muted-foreground group-hover:text-foreground transition-colors uppercase font-mono">
                 {src.label}
               </span>
-              <span className="text-white font-bold">{src.val}%</span>
+              <span className="text-foreground font-bold">{src.val}%</span>
             </div>
             <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
               <div
diff --git a/apps/web/src/components/views/analytics-view/AnalyticsViewPlatforms.tsx b/apps/web/src/components/views/analytics-view/AnalyticsViewPlatforms.tsx
index 7a59e40c8..2fa8123bd 100644
--- a/apps/web/src/components/views/analytics-view/AnalyticsViewPlatforms.tsx
+++ b/apps/web/src/components/views/analytics-view/AnalyticsViewPlatforms.tsx
@@ -10,7 +10,7 @@ interface AnalyticsViewPlatformsProps {
 export function AnalyticsViewPlatforms({ deviceStats }: AnalyticsViewPlatformsProps) {
   return (
     <Card variant="glass" className="p-6 bg-black/40 border-white/5">
-      <h3 className="font-bold text-white mb-6 text-sm uppercase tracking-widest flex items-center gap-2">
+      <h3 className="font-bold text-foreground mb-6 text-sm uppercase tracking-widest flex items-center gap-2">
         <Smartphone className="w-4 h-4 text-primary" /> Platforms
       </h3>
       <div className="flex items-center justify-between gap-8 px-4">
@@ -18,7 +18,7 @@ export function AnalyticsViewPlatforms({ deviceStats }: AnalyticsViewPlatformsPr
           <div className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/10 transition-all border border-transparent group-hover:border-primary/20">
             <Smartphone className="w-6 h-6 text-muted-foreground group-hover:text-primary transition-colors" />
           </div>
-          <div className="text-2xl font-bold text-white">{deviceStats.mobile}%</div>
+          <div className="text-2xl font-bold text-foreground">{deviceStats.mobile}%</div>
           <div className="text-xs text-muted-foreground uppercase font-mono mt-1">MOBILE</div>
         </div>
         <div className="w-px h-12 bg-white/10" />
@@ -26,7 +26,7 @@ export function AnalyticsViewPlatforms({ deviceStats }: AnalyticsViewPlatformsPr
           <div className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-3 group-hover:bg-destructive/10 transition-all border border-transparent group-hover:border-destructive/20">
             <Monitor className="w-6 h-6 text-muted-foreground group-hover:text-destructive transition-colors" />
           </div>
-          <div className="text-2xl font-bold text-white">{deviceStats.desktop}%</div>
+          <div className="text-2xl font-bold text-foreground">{deviceStats.desktop}%</div>
           <div className="text-xs text-muted-foreground uppercase font-mono mt-1">NODE</div>
         </div>
       </div>
diff --git a/apps/web/src/components/views/analytics-view/AnalyticsViewTopTracks.tsx b/apps/web/src/components/views/analytics-view/AnalyticsViewTopTracks.tsx
index 1159cfdac..2cf712f5a 100644
--- a/apps/web/src/components/views/analytics-view/AnalyticsViewTopTracks.tsx
+++ b/apps/web/src/components/views/analytics-view/AnalyticsViewTopTracks.tsx
@@ -17,7 +17,7 @@ export function AnalyticsViewTopTracks({ tracks, onNavigateTrack }: AnalyticsVie
 
       <div className="flex justify-between items-center p-6 border-b border-white/5 bg-white/2">
         <div>
-          <h3 className="text-xl font-bold text-white">Top Frequency Nodes</h3>
+          <h3 className="text-xl font-bold text-foreground">Top Frequency Nodes</h3>
           <p className="text-xs text-muted-foreground font-mono">SORTED BY PEAK VOLTAGE</p>
         </div>
         <Button variant="ghost" size="sm" className="hover:bg-white/5">
@@ -40,14 +40,14 @@ export function AnalyticsViewTopTracks({ tracks, onNavigateTrack }: AnalyticsVie
             {tracks.map((track) => (
               <tr key={track.id} className="hover:bg-white/5 transition-all group">
                 <td className="py-5 pl-8">
-                  <div className="font-bold text-white group-hover:text-primary transition-colors">
+                  <div className="font-bold text-foreground group-hover:text-primary transition-colors">
                     {track.title}
                   </div>
                   <div className="text-xs text-muted-foreground font-mono">
                     TRACK_ID: {track.id.toUpperCase()}
                   </div>
                 </td>
-                <td className="py-5 text-white font-mono">{track.plays.toLocaleString()}</td>
+                <td className="py-5 text-foreground font-mono">{track.plays.toLocaleString()}</td>
                 <td className="py-5">
                   <span
                     className={cn(
diff --git a/apps/web/src/components/views/checkout-view/CheckoutViewBillingCard.tsx b/apps/web/src/components/views/checkout-view/CheckoutViewBillingCard.tsx
index 0549ddd7e..ba4dd9bb2 100644
--- a/apps/web/src/components/views/checkout-view/CheckoutViewBillingCard.tsx
+++ b/apps/web/src/components/views/checkout-view/CheckoutViewBillingCard.tsx
@@ -54,7 +54,7 @@ export function CheckoutViewBillingCard({ form, setForm }: CheckoutViewBillingCa
             Country
           </label>
           <select
-            className="w-full bg-muted border border-border rounded-xl py-4 px-4 text-foreground focus:border-primary outline-none appearance-none transition-colors duration-[var(--duration-normal)]"
+            className="w-full bg-muted border border-border rounded-xl py-4 px-4 text-foreground focus:border-primary outline-none appearance-none transition-colors duration-[var(--sumi-duration-normal)]"
             value={form.country}
             onChange={(e) =>
               setForm((prev) => ({ ...prev, country: e.target.value }))
diff --git a/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx b/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
index 0a67b9c60..7792ab1be 100644
--- a/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
+++ b/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
@@ -20,7 +20,7 @@ export function CheckoutViewOrderSummary({
   onPurchase,
 }: CheckoutViewOrderSummaryProps) {
   return (
-    <Card variant="glass" className="rounded-xl p-8 sticky top-24 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+    <Card variant="glass" className="rounded-xl p-8 sticky top-24 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
       <h3 className="font-bold text-foreground mb-4 uppercase tracking-wider text-sm tracking-tight">
         Order Summary
       </h3>
diff --git a/apps/web/src/components/views/discover-view/DiscoverViewGenres.tsx b/apps/web/src/components/views/discover-view/DiscoverViewGenres.tsx
index 72957ce58..442bd3552 100644
--- a/apps/web/src/components/views/discover-view/DiscoverViewGenres.tsx
+++ b/apps/web/src/components/views/discover-view/DiscoverViewGenres.tsx
@@ -20,14 +20,14 @@ export function DiscoverViewGenres({ onGenreClick }: DiscoverViewGenresProps) {
           <button
             key={genre.name}
             type="button"
-            className="aspect-square rounded-xl bg-muted p-4 relative overflow-hidden cursor-pointer hover:opacity-90 transition-opacity duration-[var(--duration-normal)] border border-border"
+            className="aspect-square rounded-xl bg-muted p-4 relative overflow-hidden cursor-pointer hover:opacity-90 transition-opacity duration-[var(--sumi-duration-normal)] border border-border"
             onClick={() => onGenreClick(genre.name)}
           >
             <span className="font-bold text-foreground text-lg relative z-10">
               {genre.name}
             </span>
             <div className="absolute -bottom-2 -right-2 opacity-30 transform rotate-12">
-              <Disc className="w-16 h-16 text-white" aria-hidden />
+              <Disc className="w-16 h-16 text-foreground" aria-hidden />
             </div>
           </button>
         ))}
diff --git a/apps/web/src/components/views/discover-view/DiscoverViewTrending.tsx b/apps/web/src/components/views/discover-view/DiscoverViewTrending.tsx
index 39b04d794..5b7998050 100644
--- a/apps/web/src/components/views/discover-view/DiscoverViewTrending.tsx
+++ b/apps/web/src/components/views/discover-view/DiscoverViewTrending.tsx
@@ -56,7 +56,7 @@ export function DiscoverViewTrending({
               <div
                 className={`absolute inset-0 bg-black/50 flex items-center justify-center transition-opacity ${hoveredTrackId === track.id ? 'opacity-100' : 'opacity-0'}`}
               >
-                <Play className="w-5 h-5 text-white fill-current" aria-hidden />
+                <Play className="w-5 h-5 text-foreground fill-current" aria-hidden />
               </div>
             </div>
             <div className="flex-1 min-w-0">
@@ -73,7 +73,7 @@ export function DiscoverViewTrending({
             </div>
             <button
               type="button"
-              className="text-muted-foreground hover:text-primary p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)]"
+              className="text-muted-foreground hover:text-primary p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)]"
               onClick={(e) => {
                 e.stopPropagation();
                 onLike();
diff --git a/apps/web/src/components/views/file-details-view/FileDetailsViewVersions.tsx b/apps/web/src/components/views/file-details-view/FileDetailsViewVersions.tsx
index 9a978bacb..50d4245c2 100644
--- a/apps/web/src/components/views/file-details-view/FileDetailsViewVersions.tsx
+++ b/apps/web/src/components/views/file-details-view/FileDetailsViewVersions.tsx
@@ -20,7 +20,7 @@ export function FileDetailsViewVersions({
         {versions.map((ver) => (
           <div
             key={ver.id}
-            className={`flex items-center justify-between p-4 rounded-xl border transition-colors duration-[var(--duration-normal)] ${ver.current ? 'bg-primary/10 border-primary/30' : 'bg-card border-border hover:bg-muted/50'}`}
+            className={`flex items-center justify-between p-4 rounded-xl border transition-colors duration-[var(--sumi-duration-normal)] ${ver.current ? 'bg-primary/10 border-primary/30' : 'bg-card border-border hover:bg-muted/50'}`}
           >
             <div>
               <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/views/file-manager-view/FileManagerViewGrid.tsx b/apps/web/src/components/views/file-manager-view/FileManagerViewGrid.tsx
index e35dfd220..12176a278 100644
--- a/apps/web/src/components/views/file-manager-view/FileManagerViewGrid.tsx
+++ b/apps/web/src/components/views/file-manager-view/FileManagerViewGrid.tsx
@@ -51,14 +51,14 @@ export function FileManagerViewGrid({
             {selectedIds.includes(file.id) ? (
               <CheckSquare className="w-4 h-4 text-primary" />
             ) : (
-              <Square className="w-4 h-4 text-muted-foreground hover:text-white" />
+              <Square className="w-4 h-4 text-muted-foreground hover:text-foreground" />
             )}
           </button>
           <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center shadow-lg transition-colors duration-[var(--duration-fast)]">
             <FileTypeIcon type={file.type} size="lg" />
           </div>
           <div className="w-full min-w-0">
-            <h4 className="font-bold text-white text-sm truncate w-full">
+            <h4 className="font-bold text-foreground text-sm truncate w-full">
               {file.name}
             </h4>
             <p className="text-xs text-muted-foreground mt-1">{file.size}</p>
diff --git a/apps/web/src/components/views/file-manager-view/FileManagerViewHeader.tsx b/apps/web/src/components/views/file-manager-view/FileManagerViewHeader.tsx
index 0aa62c3ba..ac0d05420 100644
--- a/apps/web/src/components/views/file-manager-view/FileManagerViewHeader.tsx
+++ b/apps/web/src/components/views/file-manager-view/FileManagerViewHeader.tsx
@@ -22,12 +22,12 @@ export function FileManagerViewHeader({
   return (
     <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
       <div>
-        <h2 className="text-2xl font-heading font-bold text-white mb-1">
+        <h2 className="text-2xl font-heading font-bold text-foreground mb-1">
           FILE MANAGER
         </h2>
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <span
-            className="hover:text-white cursor-pointer"
+            className="hover:text-foreground cursor-pointer"
             onClick={onFolderRoot}
           >
             Root
@@ -35,7 +35,7 @@ export function FileManagerViewHeader({
           {currentFolder !== 'Root' && (
             <>
               <ChevronRight className="w-4 h-4" />
-              <span className="text-white font-bold">{currentFolder}</span>
+              <span className="text-foreground font-bold">{currentFolder}</span>
             </>
           )}
         </div>
@@ -61,7 +61,7 @@ export function FileManagerViewHeader({
           <button
             type="button"
             onClick={() => onViewModeChange('list')}
-            className={`p-2 rounded ${viewMode === 'list' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-white'}`}
+            className={`p-2 rounded ${viewMode === 'list' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
             aria-label="Vue liste"
             aria-pressed={viewMode === 'list'}
           >
@@ -70,7 +70,7 @@ export function FileManagerViewHeader({
           <button
             type="button"
             onClick={() => onViewModeChange('grid')}
-            className={`p-2 rounded ${viewMode === 'grid' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-white'}`}
+            className={`p-2 rounded ${viewMode === 'grid' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
             aria-label="Vue grille"
             aria-pressed={viewMode === 'grid'}
           >
diff --git a/apps/web/src/components/views/file-manager-view/FileManagerViewTable.tsx b/apps/web/src/components/views/file-manager-view/FileManagerViewTable.tsx
index ca8b2c6fb..ca9e67784 100644
--- a/apps/web/src/components/views/file-manager-view/FileManagerViewTable.tsx
+++ b/apps/web/src/components/views/file-manager-view/FileManagerViewTable.tsx
@@ -48,7 +48,7 @@ export function FileManagerViewTable({
                 <button
                   type="button"
                   onClick={onSelectAll}
-                  className="cursor-pointer hover:text-white"
+                  className="cursor-pointer hover:text-foreground"
                   aria-label="Select all"
                 >
                   {selectedIds.length === files.length ? (
@@ -79,7 +79,7 @@ export function FileManagerViewTable({
                   <button
                     type="button"
                     onClick={() => onToggleSelect(file.id)}
-                    className="cursor-pointer text-muted-foreground hover:text-white"
+                    className="cursor-pointer text-muted-foreground hover:text-foreground"
                     aria-label={`Select ${file.name}`}
                   >
                     {selectedIds.includes(file.id) ? (
@@ -103,7 +103,7 @@ export function FileManagerViewTable({
                     }}
                   >
                     <FileTypeIcon type={file.type} />
-                    <span className="font-medium text-foreground group-hover:text-white transition-colors">
+                    <span className="font-medium text-foreground group-hover:text-foreground transition-colors">
                       {file.name}
                     </span>
                   </div>
diff --git a/apps/web/src/components/views/live-view/LiveViewChat.tsx b/apps/web/src/components/views/live-view/LiveViewChat.tsx
index 124a63d6d..440311fb9 100644
--- a/apps/web/src/components/views/live-view/LiveViewChat.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewChat.tsx
@@ -22,7 +22,7 @@ export function LiveViewChat({
   return (
     <Card
       variant="glass"
-      className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full min-h-0 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]"
+      className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full min-h-0 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]"
     >
       <div className="p-4 border-b border-border flex justify-between items-center bg-card">
         <span className="font-mono text-sm font-bold text-foreground tracking-tight">
@@ -56,7 +56,7 @@ export function LiveViewChat({
               value={msgInput}
               onChange={(e) => onMsgInputChange(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && onSend()}
-              className="w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
+              className="w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]"
               placeholder="Say something..."
             />
             <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-warning cursor-pointer hover:opacity-80 transition-opacity" />
diff --git a/apps/web/src/components/views/live-view/LiveViewPlayer.tsx b/apps/web/src/components/views/live-view/LiveViewPlayer.tsx
index 550627b12..d6d0e4c16 100644
--- a/apps/web/src/components/views/live-view/LiveViewPlayer.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewPlayer.tsx
@@ -29,17 +29,17 @@ export function LiveViewPlayer({
         <span className="bg-destructive text-destructive-foreground px-2 py-1 text-xs font-bold rounded flex items-center gap-1 animate-pulse">
           <Radio className="w-3 h-3" /> LIVE
         </span>
-        <span className="bg-black/50 backdrop-blur text-white px-2 py-1 text-xs font-mono rounded flex items-center gap-1">
+        <span className="bg-black/50 backdrop-blur text-foreground px-2 py-1 text-xs font-mono rounded flex items-center gap-1">
           <Users className="w-3 h-3" /> {stream.viewers}
         </span>
       </div>
 
-      <div className="absolute bottom-0 left-0 right-0 p-4 flex justify-between items-end opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)]">
+      <div className="absolute bottom-0 left-0 right-0 p-4 flex justify-between items-end opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)]">
         <div className="flex gap-4">
           <Button
             variant="ghost"
             size="sm"
-            className="text-white hover:bg-white/10"
+            className="text-foreground hover:bg-white/10"
             onClick={onToggleChat}
           >
             <MessageSquare className="w-5 h-5" />
@@ -47,7 +47,7 @@ export function LiveViewPlayer({
           <Button
             variant="ghost"
             size="sm"
-            className="text-white hover:bg-white/10"
+            className="text-foreground hover:bg-white/10"
             onClick={onSettings}
           >
             <Settings className="w-5 h-5" />
@@ -57,7 +57,7 @@ export function LiveViewPlayer({
           <Button
             variant="ghost"
             size="sm"
-            className="text-white hover:bg-white/10"
+            className="text-foreground hover:bg-white/10"
             onClick={onFullscreen}
           >
             <Maximize2 className="w-5 h-5" />
diff --git a/apps/web/src/components/views/live-view/LiveViewRecommended.tsx b/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
index d8f9a9207..1fff0acf4 100644
--- a/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
@@ -22,7 +22,7 @@ export function LiveViewRecommended({ onChannelClick }: LiveViewRecommendedProps
           <motion.div key={i} variants={{ hidden: { opacity: 0, y: 8 }, visible: { opacity: 1, y: 0 } }}>
           <Card
             variant="glass"
-            className="p-0 overflow-hidden group cursor-pointer border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-all duration-[var(--duration-normal)]"
+            className="p-0 overflow-hidden group cursor-pointer border-white/5 bg-black/20 backdrop-blur-xl transition-all duration-[var(--sumi-duration-normal)]"
             onClick={() => onChannelClick?.(i)}
           >
             <div className="aspect-video relative">
diff --git a/apps/web/src/components/views/live-view/LiveViewStreamInfo.tsx b/apps/web/src/components/views/live-view/LiveViewStreamInfo.tsx
index 823eff72d..8ebe9bae5 100644
--- a/apps/web/src/components/views/live-view/LiveViewStreamInfo.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewStreamInfo.tsx
@@ -21,7 +21,7 @@ export function LiveViewStreamInfo({
   onShare,
 }: LiveViewStreamInfoProps) {
   return (
-    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
     <div className="flex justify-between items-start">
       <div className="flex gap-4">
         <div className="w-12 h-12 rounded-full bg-gradient-neon p-0.5">
diff --git a/apps/web/src/components/views/marketplace-view/MarketplaceViewHeader.tsx b/apps/web/src/components/views/marketplace-view/MarketplaceViewHeader.tsx
index cb009c837..8b99404d4 100644
--- a/apps/web/src/components/views/marketplace-view/MarketplaceViewHeader.tsx
+++ b/apps/web/src/components/views/marketplace-view/MarketplaceViewHeader.tsx
@@ -9,7 +9,7 @@ interface MarketplaceViewHeaderProps {
 
 export function MarketplaceViewHeader({ searchQuery, onSearchChange }: MarketplaceViewHeaderProps) {
   return (
-    <Card variant="glass" className="mb-8 p-6 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+    <Card variant="glass" className="mb-8 p-6 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
       <div className="flex flex-col md:flex-row justify-between items-end gap-4">
         <div>
           <h2 className="text-3xl font-heading font-bold text-foreground mb-2 tracking-tight">MARKETPLACE</h2>
diff --git a/apps/web/src/components/views/marketplace-view/MarketplaceViewSidebar.tsx b/apps/web/src/components/views/marketplace-view/MarketplaceViewSidebar.tsx
index f68e074cd..a874cbfab 100644
--- a/apps/web/src/components/views/marketplace-view/MarketplaceViewSidebar.tsx
+++ b/apps/web/src/components/views/marketplace-view/MarketplaceViewSidebar.tsx
@@ -4,7 +4,7 @@ import { Card } from '@/components/ui/card';
 export function MarketplaceViewSidebar() {
   return (
     <div className="w-64 flex-shrink-0 space-y-8 hidden lg:block animate-slideInLeft">
-      <Card variant="glass" className="border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+      <Card variant="glass" className="border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
         <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-4">
         Price
         </h3>
diff --git a/apps/web/src/components/views/notifications-view/NotificationsViewHeader.tsx b/apps/web/src/components/views/notifications-view/NotificationsViewHeader.tsx
index 85ef5a5db..87099c0e8 100644
--- a/apps/web/src/components/views/notifications-view/NotificationsViewHeader.tsx
+++ b/apps/web/src/components/views/notifications-view/NotificationsViewHeader.tsx
@@ -14,7 +14,7 @@ export function NotificationsViewHeader({
   return (
     <div className="flex flex-col md:flex-row justify-between items-end gap-4 mb-2">
       <div>
-        <h1 className="text-3xl font-heading font-bold text-white mb-1">
+        <h1 className="text-3xl font-heading font-bold text-foreground mb-1">
           Notifications
         </h1>
         <p className="text-muted-foreground font-mono text-xs">
diff --git a/apps/web/src/components/views/notifications-view/NotificationsViewItem.tsx b/apps/web/src/components/views/notifications-view/NotificationsViewItem.tsx
index ae13fda24..002d1a838 100644
--- a/apps/web/src/components/views/notifications-view/NotificationsViewItem.tsx
+++ b/apps/web/src/components/views/notifications-view/NotificationsViewItem.tsx
@@ -40,7 +40,7 @@ export function NotificationsViewItem({
     >
       <div className={cn('p-2 rounded-full h-fit', iconCn)}>{icon}</div>
       <div className="flex-1">
-        <p className="text-sm text-white mb-1">{notification.message}</p>
+        <p className="text-sm text-foreground mb-1">{notification.message}</p>
         <p className="text-xs text-muted-foreground">
           {new Date(notification.timestamp).toLocaleString()}
         </p>
diff --git a/apps/web/src/components/views/profile-view/ProfileViewAboutTab.tsx b/apps/web/src/components/views/profile-view/ProfileViewAboutTab.tsx
index 3cdac208b..152901e10 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewAboutTab.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewAboutTab.tsx
@@ -9,7 +9,7 @@ export function ProfileViewAboutTab({ profile }: ProfileViewAboutTabProps) {
   return (
     <div className="space-y-8 animate-fadeIn">
       <Card variant="default" className="p-8">
-        <h3 className="text-xl font-heading font-bold text-white mb-6">
+        <h3 className="text-xl font-heading font-bold text-foreground mb-6">
           Biography
         </h3>
         <p className="text-foreground leading-relaxed mb-6 whitespace-pre-line">
diff --git a/apps/web/src/components/views/profile-view/ProfileViewPlaylistCard.tsx b/apps/web/src/components/views/profile-view/ProfileViewPlaylistCard.tsx
index 36cda5903..7ed934879 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewPlaylistCard.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewPlaylistCard.tsx
@@ -11,7 +11,7 @@ export function ProfileViewPlaylistCard({ playlist }: ProfileViewPlaylistCardPro
   return (
     <Card
       variant="glass"
-      className="p-0 overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors duration-[var(--duration-normal)]"
+      className="p-0 overflow-hidden group cursor-pointer hover:border-primary/50 transition-colors duration-[var(--sumi-duration-normal)]"
     >
       <div className="aspect-video relative overflow-hidden">
         <img
@@ -19,12 +19,12 @@ export function ProfileViewPlaylistCard({ playlist }: ProfileViewPlaylistCardPro
           alt=""
           className="w-full h-full object-cover"
         />
-        <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded flex items-center gap-1">
+        <div className="absolute bottom-2 right-2 bg-black/80 text-foreground text-xs px-2 py-1 rounded flex items-center gap-1">
           <ListMusic className="w-3 h-3" /> {playlist.track_count}
         </div>
       </div>
       <div className="p-4">
-        <h4 className="font-bold text-white text-sm mb-1 truncate">
+        <h4 className="font-bold text-foreground text-sm mb-1 truncate">
           {playlist.title}
         </h4>
         <div className="flex flex-wrap gap-1 mt-2">
diff --git a/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx b/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
index a51c58f8b..35c6ce2a4 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
@@ -15,7 +15,7 @@ export function ProfileViewSidebar({ profile }: ProfileViewSidebarProps) {
         </h3>
         <div className="space-y-4">
           {profile.website && (
-            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--duration-normal)]">
+            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--sumi-duration-normal)]">
               <Globe className="w-4 h-4 text-muted-foreground" />
               <a
                 href={
@@ -32,13 +32,13 @@ export function ProfileViewSidebar({ profile }: ProfileViewSidebarProps) {
             </div>
           )}
           {profile.socials?.twitter && (
-            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--duration-normal)]">
+            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--sumi-duration-normal)]">
               <Twitter className="w-4 h-4 text-muted-foreground" />
               <span>{profile.socials.twitter}</span>
             </div>
           )}
           {profile.socials?.instagram && (
-            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--duration-normal)]">
+            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--sumi-duration-normal)]">
               <Instagram className="w-4 h-4 text-muted-foreground" />
               <span>{profile.socials.instagram}</span>
             </div>
@@ -54,7 +54,7 @@ export function ProfileViewSidebar({ profile }: ProfileViewSidebarProps) {
           {[1, 2, 3].map((i) => (
             <div
               key={i}
-              className="aspect-square bg-card rounded-xl flex items-center justify-center text-xl border border-warning/20 hover:border-warning hover:bg-warning/10 transition-all duration-[var(--duration-normal)] cursor-pointer tooltip group relative"
+              className="aspect-square bg-card rounded-xl flex items-center justify-center text-xl border border-warning/20 hover:border-warning hover:bg-warning/10 transition-all duration-[var(--sumi-duration-normal)] cursor-pointer tooltip group relative"
             >
               {['🏆', '⚡', '🎹'][i - 1]}
             </div>
diff --git a/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx b/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
index 51481f8c9..ee5d92268 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
@@ -21,7 +21,7 @@ export function ProfileViewTrackCard({ track, mode }: ProfileViewTrackCardProps)
           alt=""
           className="w-full h-full object-cover"
         />
-        <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-white p-4 text-center">
+        <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-foreground p-4 text-center">
           <div className="flex gap-4 mb-2">
             <span className="flex items-center gap-1 font-bold">
               <Play className="w-4 h-4 fill-current" />{' '}
@@ -43,7 +43,7 @@ export function ProfileViewTrackCard({ track, mode }: ProfileViewTrackCardProps)
   return (
     <Card
       variant="default"
-      className="flex gap-4 p-4 items-center group hover:border-primary/50 transition-all duration-[var(--duration-normal)] cursor-pointer"
+      className="flex gap-4 p-4 items-center group hover:border-primary/50 transition-all duration-[var(--sumi-duration-normal)] cursor-pointer"
       onClick={() => playTrack(track)}
     >
       <div className="w-12 h-12 rounded overflow-hidden relative shrink-0">
@@ -53,7 +53,7 @@ export function ProfileViewTrackCard({ track, mode }: ProfileViewTrackCardProps)
           className="w-full h-full object-cover"
         />
         <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-          <Play className="w-6 h-6 text-white fill-current" />
+          <Play className="w-6 h-6 text-foreground fill-current" />
         </div>
       </div>
       <div className="flex-1 min-w-0">
diff --git a/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx b/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
index 0ace0b3e4..2d16f0b46 100644
--- a/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
@@ -3,7 +3,7 @@ import { Card } from '@/components/ui/card';
 
 export function SettingsViewHeader() {
   return (
-    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
       <h2 className="text-3xl font-heading font-bold text-foreground mb-2">SETTINGS</h2>
       <p className="text-muted-foreground font-mono text-sm">
         Configure your studio, account, and preferences.
diff --git a/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx b/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
index 9bc14d323..dd5da7f07 100644
--- a/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
+++ b/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
@@ -39,7 +39,7 @@ export function SocialViewFeedItem({ track, onPlay }: SocialViewFeedItemProps) {
     >
     <Card
       variant="glass"
-      className="p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover:border-primary/20 hover-glow-cyan transition-all duration-[var(--duration-normal)]"
+      className="p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover:border-primary/20 transition-all duration-[var(--sumi-duration-normal)]"
     >
       <div className="p-4 flex items-center gap-3">
         <Avatar
@@ -72,10 +72,10 @@ export function SocialViewFeedItem({ track, onPlay }: SocialViewFeedItemProps) {
             <img
               src={track.coverUrl}
               alt=""
-              className="w-full h-full object-cover transition-transform duration-[var(--duration-normal)] group-hover:scale-110"
+              className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"
             />
             <div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-              <Play className="w-6 h-6 text-white fill-current" />
+              <Play className="w-6 h-6 text-foreground fill-current" />
             </div>
           </div>
           <div className="flex-1 min-w-0">
diff --git a/apps/web/src/components/views/social-view/SocialViewSidebar.tsx b/apps/web/src/components/views/social-view/SocialViewSidebar.tsx
index e9ec455e4..630e739df 100644
--- a/apps/web/src/components/views/social-view/SocialViewSidebar.tsx
+++ b/apps/web/src/components/views/social-view/SocialViewSidebar.tsx
@@ -17,7 +17,7 @@ export function SocialViewSidebar({
 }: SocialViewSidebarProps) {
   return (
     <div className="hidden lg:block lg:col-span-3 space-y-8">
-      <Card variant="glass" className="p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+      <Card variant="glass" className="p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
         <div className="h-20 bg-gradient-gaming" />
         <div className="px-4 pb-4">
           <div
diff --git a/apps/web/src/components/views/social-view/SocialViewTrending.tsx b/apps/web/src/components/views/social-view/SocialViewTrending.tsx
index 17c12ef31..f268ce7c2 100644
--- a/apps/web/src/components/views/social-view/SocialViewTrending.tsx
+++ b/apps/web/src/components/views/social-view/SocialViewTrending.tsx
@@ -7,7 +7,7 @@ const TRENDING_TAGS = ['#Techno', '#Synthwave', '#NewGear', '#Tutorial'];
 export function SocialViewTrending() {
   return (
     <div className="hidden lg:block lg:col-span-3 space-y-8">
-      <Card variant="glass" className="border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
+      <Card variant="glass" className="border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]">
         <h3 className="font-bold text-sm text-foreground uppercase tracking-wider mb-4 flex items-center gap-2">
           <Hash className="w-4 h-4 text-primary" /> Trending Tags
         </h3>
diff --git a/apps/web/src/components/views/studio-view/StudioViewHeader.tsx b/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
index 956022610..d9c2426b6 100644
--- a/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewHeader.tsx
@@ -9,7 +9,7 @@ export function StudioViewHeader({ onSwitchToProjects }: StudioViewHeaderProps)
   return (
     <div className="flex justify-between items-center mb-6 shrink-0">
       <div>
-        <h2 className="text-3xl font-heading font-bold text-white mb-2">
+        <h2 className="text-3xl font-heading font-bold text-foreground mb-2">
           CLOUD STUDIO
         </h2>
         <p className="text-muted-foreground font-mono text-sm">
diff --git a/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx b/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
index 9fa734d5f..59054f759 100644
--- a/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
+++ b/apps/web/src/components/views/studio-view/StudioViewNavButton.tsx
@@ -17,7 +17,7 @@ export function StudioViewNavButton({
     <button
       type="button"
       onClick={onClick}
-      className={`w-full flex items-center gap-4 px-4 py-4 rounded-xl text-sm font-medium transition-all duration-[var(--duration-normal)] ${active ? 'bg-primary/10 text-primary border border-primary/30' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent'}`}
+      className={`w-full flex items-center gap-4 px-4 py-4 rounded-xl text-sm font-medium transition-all duration-[var(--sumi-duration-normal)] ${active ? 'bg-primary/10 text-primary border border-primary/30' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent'}`}
     >
       {icon}
       {label}
diff --git a/apps/web/src/components/views/upload-view/UploadViewStepper.tsx b/apps/web/src/components/views/upload-view/UploadViewStepper.tsx
index 28c162546..19c2b94f2 100644
--- a/apps/web/src/components/views/upload-view/UploadViewStepper.tsx
+++ b/apps/web/src/components/views/upload-view/UploadViewStepper.tsx
@@ -12,7 +12,7 @@ export function UploadViewStepper({ step }: UploadViewStepperProps) {
       {UPLOAD_VIEW_STEPS.map((s, i) => (
         <div key={s.num} className="flex items-center gap-4">
           <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-[var(--duration-normal)] ${step >= s.num ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
+            className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-[var(--sumi-duration-normal)] ${step >= s.num ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
           >
             {step > s.num ? <Check className="w-5 h-5" /> : s.num}
           </div>
diff --git a/apps/web/src/features/auth/components/AuthButton.tsx b/apps/web/src/features/auth/components/AuthButton.tsx
index ed9d90e05..0d5192697 100644
--- a/apps/web/src/features/auth/components/AuthButton.tsx
+++ b/apps/web/src/features/auth/components/AuthButton.tsx
@@ -18,9 +18,9 @@ export function AuthButton({
   return (
     <button
       className={cn(
-        'w-full px-4 py-2.5 rounded-xl font-medium transition-all duration-[var(--duration-immersive)] ease-in-out focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background',
+        'w-full px-4 py-2.5 rounded-xl font-medium transition-all duration-[var(--sumi-duration-slow)] ease-in-out focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-background',
         variant === 'primary'
-          ? 'bg-primary text-primary-foreground hover:opacity-90 shadow-button-primary-glow'
+          ? 'bg-primary text-primary-foreground hover:opacity-90 shadow-sm'
           : 'bg-muted text-foreground hover:bg-muted/80 border border-border',
         (disabled || loading) && 'opacity-50 cursor-not-allowed',
         className,
diff --git a/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx b/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx
index 40ee05a8b..9c4f68e6b 100644
--- a/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx
+++ b/apps/web/src/features/auth/components/AuthErrorMessage.test.tsx
@@ -51,7 +51,7 @@ describe('AuthErrorMessage', () => {
     render(<AuthErrorMessage message="Error message" />);
 
     const alert = screen.getByRole('alert');
-    // ErrorDisplay uses kodo-red styling, check for error-related classes
+    // ErrorDisplay uses destructive styling, check for error-related classes
     expect(alert.className).toMatch(/error|red|destructive/i);
   });
 });
diff --git a/apps/web/src/features/auth/components/AuthInput.tsx b/apps/web/src/features/auth/components/AuthInput.tsx
index 7f9427cb5..3e1e4f8df 100644
--- a/apps/web/src/features/auth/components/AuthInput.tsx
+++ b/apps/web/src/features/auth/components/AuthInput.tsx
@@ -40,7 +40,7 @@ export function AuthInput({
           id={inputId}
           type={inputType}
           className={cn(
-            'w-full px-4 py-2.5 border rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 transition-all duration-[var(--duration-immersive)] ease-in-out',
+            'w-full px-4 py-2.5 border rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 transition-all duration-[var(--sumi-duration-slow)] ease-in-out',
             // Focus glow
             'focus-visible:shadow-[0_0_0_3px_oklch(var(--primary)/0.15),0_0_12px_oklch(var(--primary)/0.1)]',
             'bg-card border-border text-foreground placeholder:text-muted-foreground',
diff --git a/apps/web/src/features/auth/components/AuthLayout.tsx b/apps/web/src/features/auth/components/AuthLayout.tsx
index 05fbdf0e5..a090c7d50 100644
--- a/apps/web/src/features/auth/components/AuthLayout.tsx
+++ b/apps/web/src/features/auth/components/AuthLayout.tsx
@@ -48,7 +48,7 @@ export function AuthLayout({
         <header className="text-center">
           <div className="flex items-center justify-center mb-6">
             <div
-              className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center shadow-button-primary-glow"
+              className="h-12 w-12 rounded-xl bg-primary flex items-center justify-center shadow-sm"
               aria-hidden="true"
             >
               <span className="text-primary-foreground font-bold text-2xl">V</span>
diff --git a/apps/web/src/features/auth/components/LoginForm.tsx b/apps/web/src/features/auth/components/LoginForm.tsx
index bd8b7cb31..f4ff55fb2 100644
--- a/apps/web/src/features/auth/components/LoginForm.tsx
+++ b/apps/web/src/features/auth/components/LoginForm.tsx
@@ -148,7 +148,7 @@ export const LoginForm = () => {
         disabled={isLoading}
         variant="default"
         size="lg"
-        className="mt-5 w-full bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground font-bold tracking-wide shadow-lg shadow-primary/20 rounded-xl transition-all duration-[var(--duration-normal)]"
+        className="mt-5 w-full bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground font-bold tracking-wide shadow-lg shadow-primary/20 rounded-xl transition-all duration-[var(--sumi-duration-normal)]"
       >
         {isLoading ? (
           <span className="flex items-center gap-2">
diff --git a/apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx b/apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx
index 4583b2a18..591055a11 100644
--- a/apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx
+++ b/apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx
@@ -102,7 +102,7 @@ export function PasswordStrengthIndicator({
             >
               <div
                 className={cn(
-                  'h-full rounded-full transition-all duration-[var(--duration-normal)] ease-out',
+                  'h-full rounded-full transition-all duration-[var(--sumi-duration-normal)] ease-out',
                   level >= segment ? color : 'bg-transparent',
                 )}
               />
diff --git a/apps/web/src/features/auth/components/RegisterForm.tsx b/apps/web/src/features/auth/components/RegisterForm.tsx
index 2eeec9d54..b7aa1225c 100644
--- a/apps/web/src/features/auth/components/RegisterForm.tsx
+++ b/apps/web/src/features/auth/components/RegisterForm.tsx
@@ -184,7 +184,7 @@ export const RegisterForm = () => {
         disabled={isLoading}
         variant="default"
         size="lg"
-        className="mt-5 w-full bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground font-bold tracking-wide shadow-lg shadow-primary/20 rounded-xl transition-all duration-[var(--duration-normal)]"
+        className="mt-5 w-full bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground font-bold tracking-wide shadow-lg shadow-primary/20 rounded-xl transition-all duration-[var(--sumi-duration-normal)]"
       >
         {isLoading ? (
           <span className="flex items-center gap-2">
diff --git a/apps/web/src/features/auth/components/register-page/RegisterPageForm.tsx b/apps/web/src/features/auth/components/register-page/RegisterPageForm.tsx
index 9e0c1260e..467e6a064 100644
--- a/apps/web/src/features/auth/components/register-page/RegisterPageForm.tsx
+++ b/apps/web/src/features/auth/components/register-page/RegisterPageForm.tsx
@@ -180,7 +180,7 @@ export function RegisterPageForm({
       <AuthButton
         type="submit"
         loading={loading}
-        className="w-full bg-primary text-primary-foreground hover:opacity-90 shadow-button-primary-glow"
+        className="w-full bg-primary text-primary-foreground hover:opacity-90 shadow-sm"
       >
         {loading ? (
           <>
diff --git a/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx b/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
index 562c7cf9e..beb9f757f 100644
--- a/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
+++ b/apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
@@ -86,7 +86,7 @@ export function ForgotPasswordPage() {
           </p>
           <Link
             to="/login"
-            className="text-primary hover:underline text-sm block focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+            className="text-primary hover:underline text-sm block focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded"
           >
             Retour à la connexion
           </Link>
diff --git a/apps/web/src/features/auth/pages/LoginPage.tsx b/apps/web/src/features/auth/pages/LoginPage.tsx
index 92426fc58..ae9de64cc 100644
--- a/apps/web/src/features/auth/pages/LoginPage.tsx
+++ b/apps/web/src/features/auth/pages/LoginPage.tsx
@@ -212,7 +212,7 @@ export function LoginPage() {
           <AuthButton
             type="submit"
             loading={loading}
-            className="w-full bg-primary text-primary-foreground hover:opacity-90 shadow-button-primary-glow"
+            className="w-full bg-primary text-primary-foreground hover:opacity-90 shadow-sm"
           >
             Sign In
           </AuthButton>
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 6a808c3c1..44c27923b 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -234,7 +234,7 @@ export const ChatInput: React.FC = () => {
           variant="primary"
           size="icon"
           className={cn(
-            'rounded-xl transition-all duration-[var(--duration-normal)]',
+            'rounded-xl transition-all duration-[var(--sumi-duration-normal)]',
             message.trim() || attachments.length > 0
               ? 'bg-primary text-foreground hover:bg-primary-dim shadow-neon-cyan'
               : 'bg-white/5 text-muted-foreground hover:bg-white/10',
diff --git a/apps/web/src/features/chat/components/ChatMessage.tsx b/apps/web/src/features/chat/components/ChatMessage.tsx
index 0789d4b1e..92c217e6c 100644
--- a/apps/web/src/features/chat/components/ChatMessage.tsx
+++ b/apps/web/src/features/chat/components/ChatMessage.tsx
@@ -86,7 +86,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
           className={cn(
             'px-4 py-2.5 rounded-2xl text-sm backdrop-blur-md shadow-lg transition-all',
             isMe
-              ? 'bg-primary/10 border border-primary/20 text-foreground rounded-tr-sm shadow-card-glow-cyan'
+              ? 'bg-primary/10 border border-primary/20 text-foreground rounded-tr-sm'
               : 'bg-muted/30 border border-border text-foreground rounded-tl-sm hover:bg-muted/50',
           )}
         >
diff --git a/apps/web/src/features/chat/components/ChatRoom.tsx b/apps/web/src/features/chat/components/ChatRoom.tsx
index b9120288b..bfcacff47 100644
--- a/apps/web/src/features/chat/components/ChatRoom.tsx
+++ b/apps/web/src/features/chat/components/ChatRoom.tsx
@@ -82,7 +82,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
       {/* Search Header Overlay */}
       <div
         className={cn(
-          'absolute top-0 left-0 right-0 z-20 px-4 py-2 transition-all duration-[var(--duration-normal)]',
+          'absolute top-0 left-0 right-0 z-20 px-4 py-2 transition-all duration-[var(--sumi-duration-normal)]',
           showSearch
             ? 'bg-card/90 backdrop-blur-md border-b border-border'
             : 'bg-transparent pointer-events-none',
@@ -147,7 +147,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
               key={msg.id}
               id={`message-${msg.id}`}
               className={cn(
-                'transition-all duration-[var(--duration-slow)] animate-slideUp',
+                'transition-all duration-[var(--sumi-duration-slow)] animate-slideUp',
                 highlightedMessageId === msg.id &&
                 'bg-muted/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-border/30',
               )}
diff --git a/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx b/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
index f3b84e44c..32f1fa76c 100644
--- a/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
+++ b/apps/web/src/features/chat/components/chat-sidebar/ConversationItem.tsx
@@ -111,7 +111,7 @@ export function ConversationItem({
           }
         }}
         className={cn(
-          'group relative flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-[var(--duration-normal)] border border-transparent',
+          'group relative flex items-center justify-between p-4 rounded-xl cursor-pointer transition-all duration-[var(--sumi-duration-normal)] border border-transparent',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
           isSelected
             ? 'bg-primary/10 border-primary/30 shadow-queue-item-current'
diff --git a/apps/web/src/features/dashboard/pages/DashboardPage.tsx b/apps/web/src/features/dashboard/pages/DashboardPage.tsx
index d1554c36c..4d5dd2d2d 100644
--- a/apps/web/src/features/dashboard/pages/DashboardPage.tsx
+++ b/apps/web/src/features/dashboard/pages/DashboardPage.tsx
@@ -73,7 +73,7 @@ function QuickActions() {
         <Link
           key={action.label}
           to={action.path}
-          className="group flex items-center gap-3 p-4 rounded-xl border border-border hover:border-primary/30 hover:bg-muted/50 transition-all duration-[var(--duration-normal)] animate-stagger-in"
+          className="group flex items-center gap-3 p-4 rounded-xl border border-border hover:border-primary/30 hover:bg-muted/50 transition-all duration-[var(--sumi-duration-normal)] animate-stagger-in"
           style={{ animationDelay: `${i * 60}ms` }}
         >
           <div className={cn('p-2.5 rounded-lg', action.color)}>
@@ -178,12 +178,12 @@ function DashboardPage() {
       {/* Stats Cards */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {stats.map((stat) => (
-          <Card key={stat.title} variant="glass" className="group hover:border-primary/50 transition-all duration-[var(--duration-normal)]">
+          <Card key={stat.title} variant="glass" className="group hover:border-primary/50 transition-all duration-[var(--sumi-duration-normal)]">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors duration-[var(--duration-fast)]">
                 {stat.title}
               </CardTitle>
-              <stat.icon className={cn("h-4 w-4 transition-all duration-[var(--duration-normal)]", stat.color, stat.shadow, "group-hover:scale-110")} />
+              <stat.icon className={cn("h-4 w-4 transition-all duration-[var(--sumi-duration-normal)]", stat.color, stat.shadow, "group-hover:scale-110")} />
             </CardHeader>
             <CardContent>
               <AnimatedNumber value={stat.value} className="text-2xl font-bold text-foreground tracking-tight" />
@@ -304,12 +304,12 @@ function DashboardPage() {
                 variant="outline"
                 onClick={action.action}
                 className={cn(
-                  "h-24 flex-col gap-3 bg-muted/30 border-border hover:bg-muted/50 transition-all duration-[var(--duration-normal)] group",
+                  "h-24 flex-col gap-3 bg-muted/30 border-border hover:bg-muted/50 transition-all duration-[var(--sumi-duration-normal)] group",
                   action.border
                 )}
               >
                 <div className={cn(
-                  "w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center transition-all duration-[var(--duration-normal)] group-hover:scale-110",
+                  "w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center transition-all duration-[var(--sumi-duration-normal)] group-hover:scale-110",
                   action.color
                 )}>
                   <action.icon className="h-5 w-5" />
diff --git a/apps/web/src/features/error/pages/NotFoundPage.tsx b/apps/web/src/features/error/pages/NotFoundPage.tsx
index fd7ee3f7e..8c70220e3 100644
--- a/apps/web/src/features/error/pages/NotFoundPage.tsx
+++ b/apps/web/src/features/error/pages/NotFoundPage.tsx
@@ -23,7 +23,7 @@ function NotFoundPage() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
       <div className="w-full max-w-2xl animate-fadeIn">
-        <Card className="text-center transition-shadow duration-[var(--duration-normal)]">
+        <Card className="text-center transition-shadow duration-[var(--sumi-duration-normal)]">
           <CardHeader>
             <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted transition-colors duration-[var(--duration-fast)]">
               <Search className="h-8 w-8 text-muted-foreground" />
diff --git a/apps/web/src/features/library/pages/library-page/LibraryPageGrid.tsx b/apps/web/src/features/library/pages/library-page/LibraryPageGrid.tsx
index a2de6ffe0..6c8086d4e 100644
--- a/apps/web/src/features/library/pages/library-page/LibraryPageGrid.tsx
+++ b/apps/web/src/features/library/pages/library-page/LibraryPageGrid.tsx
@@ -37,7 +37,7 @@ export function LibraryPageGrid({
             tabIndex={0}
             role="button"
             className={cn(
-              'group relative aspect-[4/5] overflow-hidden cursor-pointer hover:-translate-y-2 transition-all duration-[var(--duration-normal)] border-white/5 bg-black/20 backdrop-blur-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+              'group relative aspect-[4/5] overflow-hidden cursor-pointer hover:-translate-y-2 transition-all duration-[var(--sumi-duration-normal)] border-white/5 bg-black/20 backdrop-blur-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
               isSelected
                 ? 'border-primary ring-1 ring-primary'
                 : 'hover:border-primary/30'
@@ -57,10 +57,10 @@ export function LibraryPageGrid({
                 <img
                   src={track.coverUrl}
                   alt={track.title}
-                  className="w-full h-full object-cover transition-transform duration-[var(--duration-slower)] group-hover:scale-110"
+                  className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-slower)] group-hover:scale-110"
                 />
               ) : (
-                <FileAudio className="w-12 h-12 text-muted-foreground/30 group-hover:text-primary/50 transition-colors duration-[var(--duration-normal)]" />
+                <FileAudio className="w-12 h-12 text-muted-foreground/30 group-hover:text-primary/50 transition-colors duration-[var(--sumi-duration-normal)]" />
               )}
               <button
                 type="button"
@@ -68,9 +68,9 @@ export function LibraryPageGrid({
                   e.stopPropagation();
                   onPlayTrack(track);
                 }}
-                className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-[var(--duration-normal)] scale-90 group-hover:scale-100 focus:opacity-100 focus:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset"
+                className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-[var(--sumi-duration-normal)] scale-90 group-hover:scale-100 focus:opacity-100 focus:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset"
               >
-                <div className="w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:scale-110 transition-transform duration-[var(--duration-fast)]">
+                <div className="w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-transform duration-[var(--duration-fast)]">
                   <Play className="w-6 h-6 ml-1 fill-current" />
                 </div>
               </button>
diff --git a/apps/web/src/features/library/pages/library-page/LibraryPageToolbar.tsx b/apps/web/src/features/library/pages/library-page/LibraryPageToolbar.tsx
index f4fe99ffb..4c0ee7323 100644
--- a/apps/web/src/features/library/pages/library-page/LibraryPageToolbar.tsx
+++ b/apps/web/src/features/library/pages/library-page/LibraryPageToolbar.tsx
@@ -60,7 +60,7 @@ export function LibraryPageToolbar({
         </div>
         <Button
           onClick={onNewClick}
-          className="shadow-button-primary-glow hover:shadow-button-primary-glow-hover transition-all bg-primary text-primary-foreground"
+          className="shadow-sm transition-all bg-primary text-primary-foreground"
         >
           <Plus className="w-4 h-4 mr-2" /> New
         </Button>
diff --git a/apps/web/src/features/marketplace/components/ProductCard.tsx b/apps/web/src/features/marketplace/components/ProductCard.tsx
index 81741e4e9..432f2dfef 100644
--- a/apps/web/src/features/marketplace/components/ProductCard.tsx
+++ b/apps/web/src/features/marketplace/components/ProductCard.tsx
@@ -36,7 +36,7 @@ export function ProductCard({
     Date.now() - new Date(product.created_at).getTime() < 7 * 24 * 60 * 60 * 1000;
 
   return (
-    <Card className="group w-full h-full flex flex-col transition-all duration-[var(--duration-normal)] hover:-translate-y-1 hover:shadow-lg hover:border-primary/20">
+    <Card className="group w-full h-full flex flex-col transition-all duration-[var(--sumi-duration-normal)] hover:shadow-lg hover:border-primary/20">
       <CardHeader>
         <div className="flex justify-between items-start gap-2">
           <div className="min-w-0 flex-1">
@@ -109,7 +109,7 @@ export function ProductCard({
         {onAddToCart && (
           <Button
             variant="outline"
-            className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--duration-normal)]"
+            className="flex-1 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-[var(--sumi-duration-normal)]"
             onClick={() => onAddToCart(product)}
           >
             <ShoppingCart className="mr-2 h-4 w-4" /> Add to Cart
diff --git a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
index 3608c613c..c95370d6f 100644
--- a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
+++ b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
@@ -90,7 +90,7 @@ export function PlaybackSpeedControl({
           'bg-card border border-border',
           'text-foreground',
           'hover:bg-muted',
-          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+          'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           'transition-colors',
         )}
diff --git a/apps/web/src/features/player/components/PlayerControls.tsx b/apps/web/src/features/player/components/PlayerControls.tsx
index b124f96bb..cf834ef4a 100644
--- a/apps/web/src/features/player/components/PlayerControls.tsx
+++ b/apps/web/src/features/player/components/PlayerControls.tsx
@@ -17,7 +17,7 @@ export interface PlayerControlsProps {
     compact?: boolean;
 }
 
-const iconBtnClass = "flex items-center justify-center rounded-full flex-shrink-0 transition-all duration-[var(--duration-normal)] active:scale-95";
+const iconBtnClass = "flex items-center justify-center rounded-full flex-shrink-0 transition-all duration-[var(--sumi-duration-normal)] active:scale-95";
 
 export function PlayerControls({
     isPlaying,
@@ -64,7 +64,7 @@ export function PlayerControls({
             <button
                 onClick={onPlayPause}
                 className={cn(
-                    "flex items-center justify-center rounded-full bg-primary text-black flex-shrink-0 hover:scale-105 active:scale-95 transition-all shadow-button-primary-glow hover:shadow-button-primary-glow-hover",
+                    "flex items-center justify-center rounded-full bg-primary text-black flex-shrink-0 active:scale-95 transition-all shadow-sm",
                     playSize
                 )}
             >
diff --git a/apps/web/src/features/player/components/PlayerExpanded.tsx b/apps/web/src/features/player/components/PlayerExpanded.tsx
index 295264e3f..671e986bd 100644
--- a/apps/web/src/features/player/components/PlayerExpanded.tsx
+++ b/apps/web/src/features/player/components/PlayerExpanded.tsx
@@ -53,7 +53,7 @@ export function PlayerExpanded({ isOpen, onClose, currentTime, duration, onSeek,
 
     return (
         <div className={cn(
-            "fixed inset-0 z-[500] bg-black/95 backdrop-blur-3xl overflow-hidden flex flex-col transition-all duration-[var(--duration-slow)]",
+            "fixed inset-0 z-[500] bg-black/95 backdrop-blur-3xl overflow-hidden flex flex-col transition-all duration-[var(--sumi-duration-slow)]",
             isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-full pointer-events-none"
         )}>
             {/* Dynamic Background */}
@@ -78,12 +78,12 @@ export function PlayerExpanded({ isOpen, onClose, currentTime, duration, onSeek,
 
             {/* Main Content */}
             <div className={cn(
-                "flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-12 relative z-10 max-w-7xl mx-auto w-full transition-all duration-[var(--duration-slow)]",
+                "flex-1 flex flex-col md:flex-row items-center justify-center gap-12 px-8 pb-12 relative z-10 max-w-7xl mx-auto w-full transition-all duration-[var(--sumi-duration-slow)]",
                 showLyrics && "md:gap-8"
             )}>
                 {/* Left: Album Art */}
                 <div className={cn(
-                    "relative group transition-all duration-[var(--duration-slow)]",
+                    "relative group transition-all duration-[var(--sumi-duration-slow)]",
                     showLyrics ? "w-full max-w-md md:max-w-sm aspect-square" : "w-full max-w-md md:max-w-xl aspect-square"
                 )}>
                     <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-xl blur-2xl transform group-hover:scale-105 transition-transform duration-700" />
@@ -217,7 +217,7 @@ export function PlayerExpanded({ isOpen, onClose, currentTime, duration, onSeek,
                                         <p
                                             key={i}
                                             className={cn(
-                                                "text-xl md:text-2xl font-bold transition-all duration-[var(--duration-slow)] cursor-pointer hover:text-foreground",
+                                                "text-xl md:text-2xl font-bold transition-all duration-[var(--sumi-duration-slow)] cursor-pointer hover:text-foreground",
                                                 isActive ? "text-foreground scale-105" : "text-white/20"
                                             )}
                                             onClick={() => onSeek(line.time)}
diff --git a/apps/web/src/features/player/components/PlayerQueue.tsx b/apps/web/src/features/player/components/PlayerQueue.tsx
index cdab9d1e0..2001be471 100644
--- a/apps/web/src/features/player/components/PlayerQueue.tsx
+++ b/apps/web/src/features/player/components/PlayerQueue.tsx
@@ -23,7 +23,7 @@ export function PlayerQueue({ isOpen, onClose, currentTrackId, onPlay }: PlayerQ
     return (
         <div
             className={cn(
-                "fixed bottom-24 left-4 right-4 z-40 transition-all duration-[var(--duration-normal)] ease-[var(--ease-out)] transform",
+                "fixed bottom-24 left-4 right-4 z-40 transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)] transform",
                 sidebarOpen ? "lg:left-main-expanded" : "lg:left-main-collapsed",
                 "lg:right-4",
                 isOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0 pointer-events-none"
diff --git a/apps/web/src/features/player/components/QualitySelector.tsx b/apps/web/src/features/player/components/QualitySelector.tsx
index a771639b3..a32834c4c 100644
--- a/apps/web/src/features/player/components/QualitySelector.tsx
+++ b/apps/web/src/features/player/components/QualitySelector.tsx
@@ -86,7 +86,7 @@ export function QualitySelector({
           'bg-card border border-border',
           'text-foreground',
           'hover:bg-muted',
-          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+          'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           'transition-colors',
         )}
diff --git a/apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx b/apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx
index a963d3384..43eb9c044 100644
--- a/apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx
+++ b/apps/web/src/features/player/components/player-bar/PlayerBarRight.tsx
@@ -20,7 +20,7 @@ interface PlayerBarRightProps {
   isPlaying: boolean;
 }
 
-const btnClass = 'h-8 w-8 sm:h-9 sm:w-9 rounded-full transition-transform duration-150 hover:scale-110 active:scale-95';
+const btnClass = 'h-8 w-8 sm:h-9 sm:w-9 rounded-full transition-transform duration-150 active:scale-95';
 
 export function PlayerBarRight({
   volume,
diff --git a/apps/web/src/features/player/components/player-bar/PlayerBarTrackInfo.tsx b/apps/web/src/features/player/components/player-bar/PlayerBarTrackInfo.tsx
index 36c16c9d8..1966c6d54 100644
--- a/apps/web/src/features/player/components/player-bar/PlayerBarTrackInfo.tsx
+++ b/apps/web/src/features/player/components/player-bar/PlayerBarTrackInfo.tsx
@@ -53,7 +53,7 @@ export function PlayerBarTrackInfo({
         )}
         {!isIdle && (
           <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover/art:opacity-100 transition-opacity duration-150">
-            <Maximize2 className="w-5 h-5 text-white" />
+            <Maximize2 className="w-5 h-5 text-foreground" />
           </div>
         )}
       </div>
diff --git a/apps/web/src/features/playlists/components/PlaylistCard.tsx b/apps/web/src/features/playlists/components/PlaylistCard.tsx
index 091da6f8b..f1aadb6d0 100644
--- a/apps/web/src/features/playlists/components/PlaylistCard.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistCard.tsx
@@ -64,7 +64,7 @@ function PlaylistCardComponent({
   const cardContent = (
     <Card
       className={cn(
-        'group cursor-pointer active:opacity-90 transition-all duration-[var(--duration-normal)] hover:-translate-y-1 hover:shadow-lg',
+        'group cursor-pointer active:opacity-90 transition-all duration-[var(--sumi-duration-normal)] hover:shadow-lg',
         'touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
         selectable && selected && 'ring-2 ring-primary border-primary/30',
         className,
@@ -77,7 +77,7 @@ function PlaylistCardComponent({
             <img
               src={playlist.cover_url}
               alt={`Couverture de la playlist ${playlist.title}`}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--duration-normal)]"
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-[var(--sumi-duration-normal)]"
             />
           ) : (
             <div
diff --git a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
index 86bb365a4..725576c82 100644
--- a/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
+++ b/apps/web/src/features/playlists/components/playlist-list/PlaylistListToolbar.tsx
@@ -54,7 +54,7 @@ export function PlaylistListToolbar({
             className={cn(
               'flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all duration-[var(--duration-fast)]',
               'hover:bg-muted dark:hover:bg-muted',
-              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+              'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
               'touch-manipulation',
               currentView === 'list'
                 ? 'bg-white dark:bg-muted text-primary dark:text-primary shadow-sm'
diff --git a/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageActionsBar.tsx b/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageActionsBar.tsx
index e2175394d..9e4a3ace7 100644
--- a/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageActionsBar.tsx
+++ b/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageActionsBar.tsx
@@ -24,7 +24,7 @@ export function PlaylistDetailPageActionsBar({
     <div className="mt-8 flex flex-wrap items-center gap-4 mb-8">
       <Button
         size="lg"
-        className="rounded-full h-14 px-8 text-lg font-bold shadow-button-primary-glow hover:shadow-button-primary-glow-hover hover:scale-105 transition-all duration-[var(--duration-normal)] bg-primary text-primary-foreground"
+        className="rounded-full h-14 px-8 text-lg font-bold shadow-sm transition-all duration-[var(--sumi-duration-normal)] bg-primary text-primary-foreground"
       >
         <Play className="w-5 h-5 mr-2 fill-current" /> Play All
       </Button>
diff --git a/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageCoverAndInfo.tsx b/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageCoverAndInfo.tsx
index 6a7ea7c27..af15f820b 100644
--- a/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageCoverAndInfo.tsx
+++ b/apps/web/src/features/playlists/pages/playlist-detail-page/PlaylistDetailPageCoverAndInfo.tsx
@@ -16,13 +16,13 @@ export function PlaylistDetailPageCoverAndInfo({ playlist }: PlaylistDetailPageC
     <div className="flex flex-col md:flex-row gap-8 items-end">
       <Card
         variant="glass"
-        className="w-52 h-52 md:w-64 md:h-64 flex-shrink-0 p-2 border-white/10 shadow-modal bg-black/40 backdrop-blur-3xl overflow-hidden rounded-2xl group transition-shadow duration-[var(--duration-normal)]"
+        className="w-52 h-52 md:w-64 md:h-64 flex-shrink-0 p-2 border-white/10 shadow-modal bg-black/40 backdrop-blur-3xl overflow-hidden rounded-2xl group transition-shadow duration-[var(--sumi-duration-normal)]"
       >
         {playlist.cover_url ? (
           <img
             src={playlist.cover_url}
             alt={playlist.title}
-            className="w-full h-full object-cover rounded-xl shadow-inner group-hover:scale-105 transition-transform duration-[var(--duration-slower)]"
+            className="w-full h-full object-cover rounded-xl shadow-inner group-hover:scale-105 transition-transform duration-[var(--sumi-duration-slower)]"
           />
         ) : (
           <div className="w-full h-full bg-gradient-to-br from-primary/30 to-secondary/30 rounded-xl flex items-center justify-center">
diff --git a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
index cfa83479c..65c6a0b3d 100644
--- a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
+++ b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
@@ -40,7 +40,7 @@ export function UserProfilePageHeader({
           {/* Avatar with animated glow ring */}
           <div className="relative -mt-16 md:-mt-20 group">
             <div
-              className="absolute -inset-1 rounded-3xl bg-gradient-to-br from-primary via-primary/80 to-secondary blur-xl opacity-50 group-hover:opacity-100 transition-opacity duration-[var(--duration-slow)]"
+              className="absolute -inset-1 rounded-3xl bg-gradient-to-br from-primary via-primary/80 to-secondary blur-xl opacity-50 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-slow)]"
               aria-hidden
             />
             <div
diff --git a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageTabs.tsx b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageTabs.tsx
index a749aefb6..6912c0c9a 100644
--- a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageTabs.tsx
+++ b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageTabs.tsx
@@ -102,7 +102,7 @@ export function UserProfilePageTabs({
                 >
                   <Card
                     variant="glass"
-                    className="overflow-hidden hover:-translate-y-2 hover:shadow-card-hover transition-all duration-[var(--duration-normal)] group border-border"
+                    className="overflow-hidden hover:-translate-y-2 hover:shadow-card-hover transition-all duration-[var(--sumi-duration-normal)] group border-border"
                   >
                     <div className="relative aspect-video bg-muted/30 overflow-hidden">
                       {track.cover_art_path != null ? (
@@ -125,8 +125,8 @@ export function UserProfilePageTabs({
                           {track.artist ?? 'Unknown Artist'}
                         </p>
                       </div>
-                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)] bg-background/40 backdrop-blur-[2px]">
-                        <div className="w-16 h-16 rounded-full bg-primary/90 text-primary-foreground flex items-center justify-center shadow-glow-cyan hover:scale-110 transition-transform">
+                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)] bg-background/40 backdrop-blur-[2px]">
+                        <div className="w-16 h-16 rounded-full bg-primary/90 text-primary-foreground flex items-center justify-center shadow-glow-cyan transition-transform">
                           <Play className="w-6 h-6 ml-1 fill-current" aria-hidden />
                         </div>
                       </div>
diff --git a/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx b/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
index a15aacdd8..5bc12872e 100644
--- a/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
+++ b/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
@@ -6,7 +6,7 @@ export function SearchPageDiscovery() {
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6 opacity-80">
       <Card
         variant="glass"
-        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group hover:-translate-y-1"
+        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group"
       >
         <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
           <Music className="w-6 h-6 text-primary" />
@@ -16,7 +16,7 @@ export function SearchPageDiscovery() {
       </Card>
       <Card
         variant="glass"
-        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group hover:-translate-y-1"
+        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group"
       >
         <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-destructive/20 transition-colors">
           <Sparkles className="w-6 h-6 text-destructive" />
@@ -26,7 +26,7 @@ export function SearchPageDiscovery() {
       </Card>
       <Card
         variant="glass"
-        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group hover:-translate-y-1"
+        className="p-6 text-center hover:bg-white/5 transition-colors cursor-pointer group"
       >
         <div className="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-success/20 transition-colors">
           <User className="w-6 h-6 text-success" />
diff --git a/apps/web/src/features/search/components/search-page/SearchPageHeader.tsx b/apps/web/src/features/search/components/search-page/SearchPageHeader.tsx
index 5f39c06f0..798021260 100644
--- a/apps/web/src/features/search/components/search-page/SearchPageHeader.tsx
+++ b/apps/web/src/features/search/components/search-page/SearchPageHeader.tsx
@@ -20,7 +20,7 @@ export function SearchPageHeader({
         </span>
       </h1>
       <div className="relative group">
-        <div className="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-[var(--duration-slow)]" />
+        <div className="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-[var(--sumi-duration-slow)]" />
         <div className="relative flex items-center bg-card/80 backdrop-blur-xl border border-border rounded-2xl overflow-hidden shadow-2xl">
           <Search className="w-5 h-5 ml-4 text-muted-foreground flex-shrink-0" />
           <input
diff --git a/apps/web/src/features/search/components/search-page/SearchPageResults.tsx b/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
index a349629e6..bb7ce3a73 100644
--- a/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
+++ b/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
@@ -189,7 +189,7 @@ export function SearchPageResults({ results, query = '' }: SearchPageResultsProp
               variant="glass"
               tabIndex={0}
               role="button"
-              className="p-0 overflow-hidden cursor-pointer group hover:-translate-y-1 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="p-0 overflow-hidden cursor-pointer group transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               onClick={() => navigate(`/playlists/${playlist.id}`)}
               onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/playlists/${playlist.id}`); } }}
             >
diff --git a/apps/web/src/features/search/components/search/SearchInput.tsx b/apps/web/src/features/search/components/search/SearchInput.tsx
index 1a528b33f..c2cb6241e 100644
--- a/apps/web/src/features/search/components/search/SearchInput.tsx
+++ b/apps/web/src/features/search/components/search/SearchInput.tsx
@@ -28,7 +28,7 @@ export function SearchInput({
   return (
     <div className="relative">
       <SearchIcon
-        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none z-10 transition-colors duration-[var(--duration-normal)]"
+        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none z-10 transition-colors duration-[var(--sumi-duration-normal)]"
         aria-hidden
       />
       <input
@@ -42,7 +42,7 @@ export function SearchInput({
         className={cn(
           'w-full rounded-full border border-input bg-background pl-10 pr-10 py-2 text-sm tracking-tight',
           'placeholder:text-muted-foreground',
-          'transition-[border-color,box-shadow,background-color] duration-[var(--duration-normal)] ease-out',
+          'transition-[border-color,box-shadow,background-color] duration-[var(--sumi-duration-normal)] ease-out',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'disabled:cursor-not-allowed disabled:opacity-50',
           transparent && 'bg-transparent border-none focus-visible:shadow-none',
@@ -54,7 +54,7 @@ export function SearchInput({
         <button
           type="button"
           onClick={onClear}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors duration-[var(--duration-normal)] active:scale-95 rounded-full p-0.5"
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)] active:scale-95 rounded-full p-0.5"
           aria-label="Clear search"
         >
           <X className="h-4 w-4" />
diff --git a/apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapGrid.tsx b/apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapGrid.tsx
index 331502571..ef6179942 100644
--- a/apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapGrid.tsx
+++ b/apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapGrid.tsx
@@ -34,7 +34,7 @@ export function PlaybackHeatmapGrid({ heatmap }: PlaybackHeatmapGridProps) {
             <div
               key={index}
               className={cn(
-                'h-8 rounded transition-all hover:scale-105 cursor-pointer relative group',
+                'h-8 rounded transition-all cursor-pointer relative group',
                 intensityColor,
                 skipBorder,
               )}
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
index c1436039f..c854446e3 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
@@ -57,7 +57,7 @@ export function FileGridCard({
     <Card
       variant="default"
       className={cn(
-        'p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-primary/50 transition-all duration-[var(--duration-normal)] group relative',
+        'p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-primary/50 transition-all duration-[var(--sumi-duration-normal)] group relative',
         selected && 'border-primary bg-primary/5',
         className
       )}
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
index b539bd8fb..9aac848ae 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
@@ -216,7 +216,7 @@ export function FileToolbar({
               type="button"
               onClick={() => onViewModeChange('list')}
               className={cn(
-                'p-2 rounded-lg transition-colors duration-[var(--duration-normal)]',
+                'p-2 rounded-lg transition-colors duration-[var(--sumi-duration-normal)]',
                 viewMode === 'list' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
               )}
               aria-label="List view"
@@ -227,7 +227,7 @@ export function FileToolbar({
               type="button"
               onClick={() => onViewModeChange('grid')}
               className={cn(
-                'p-2 rounded-lg transition-colors duration-[var(--duration-normal)]',
+                'p-2 rounded-lg transition-colors duration-[var(--sumi-duration-normal)]',
                 viewMode === 'grid' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
               )}
               aria-label="Grid view"
diff --git a/apps/web/src/features/tracks/components/LikeButton.tsx b/apps/web/src/features/tracks/components/LikeButton.tsx
index 17e46f3a1..45c2e546d 100644
--- a/apps/web/src/features/tracks/components/LikeButton.tsx
+++ b/apps/web/src/features/tracks/components/LikeButton.tsx
@@ -166,7 +166,7 @@ export function LikeButton({
       variant={variant}
       size={size}
       className={cn(
-        'rounded-md transition-[color,transform] duration-[var(--duration-normal)]',
+        'rounded-md transition-[color,transform] duration-[var(--sumi-duration-normal)]',
         className,
         isLiked && 'text-destructive hover:text-destructive/90',
         compact && 'h-auto p-1',
@@ -187,7 +187,7 @@ export function LikeButton({
         <>
           <Heart
             className={cn(
-              'h-4 w-4 transition-colors duration-[var(--duration-normal)]',
+              'h-4 w-4 transition-colors duration-[var(--sumi-duration-normal)]',
               animating && 'animate-like-bounce',
               isLiked && 'fill-current',
               showCount && 'mr-2',
diff --git a/apps/web/src/features/tracks/components/ShareDialog.tsx b/apps/web/src/features/tracks/components/ShareDialog.tsx
index 4fffb1389..da03877a5 100644
--- a/apps/web/src/features/tracks/components/ShareDialog.tsx
+++ b/apps/web/src/features/tracks/components/ShareDialog.tsx
@@ -101,7 +101,7 @@ export function ShareDialog({ open, onClose, trackId }: ShareDialogProps) {
       variant="default"
       size="md"
     >
-      <div className="space-y-4 transition-opacity duration-[var(--duration-normal)]">
+      <div className="space-y-4 transition-opacity duration-[var(--sumi-duration-normal)]">
         {mutationError && (
           <ErrorDisplay
             error={mutationError}
@@ -134,12 +134,12 @@ export function ShareDialog({ open, onClose, trackId }: ShareDialogProps) {
                 <Input
                   value={shareUrl}
                   readOnly
-                  className="flex-1 rounded-md transition-[border-color] duration-[var(--duration-normal)]"
+                  className="flex-1 rounded-md transition-[border-color] duration-[var(--sumi-duration-normal)]"
                 />
                 <Button
                   onClick={handleCopy}
                   variant="outline"
-                  className="rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
+                  className="rounded-md transition-[color,transform] duration-[var(--sumi-duration-normal)] active:scale-95"
                 >
                   {isCopied ? (
                     <Check className="h-4 w-4 text-success" />
@@ -156,13 +156,13 @@ export function ShareDialog({ open, onClose, trackId }: ShareDialogProps) {
               <Button
                 variant="outline"
                 onClick={onClose}
-                className="rounded-md transition-colors duration-[var(--duration-normal)]"
+                className="rounded-md transition-colors duration-[var(--sumi-duration-normal)]"
               >
                 Close
               </Button>
               <Button
                 onClick={handleCopy}
-                className="rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
+                className="rounded-md transition-[color,transform] duration-[var(--sumi-duration-normal)] active:scale-95"
               >
                 <Copy className="mr-2 h-4 w-4" />
                 Copy Link
diff --git a/apps/web/src/features/tracks/components/TrackCard.tsx b/apps/web/src/features/tracks/components/TrackCard.tsx
index 8ae599731..a6cdfefcc 100644
--- a/apps/web/src/features/tracks/components/TrackCard.tsx
+++ b/apps/web/src/features/tracks/components/TrackCard.tsx
@@ -48,7 +48,7 @@ function TrackCardComponent({
       tabIndex={onClick ? 0 : -1}
       className={cn(
         'group relative rounded-xl overflow-hidden border-0 shadow-lg shadow-black/5 cursor-pointer',
-        'bg-card hover:shadow-xl hover:shadow-black/10 hover:-translate-y-0.5 transition-[box-shadow,transform,background-color] duration-[var(--duration-normal)] ease-[var(--ease-out)] active:scale-[0.98]',
+        'bg-card hover:shadow-xl hover:shadow-black/10 transition-[box-shadow,transform,background-color] duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)] active:scale-[0.98]',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
         className,
       )}
@@ -100,7 +100,7 @@ function TrackCardComponent({
         {(onPlay || isPlaying) && (
           <div
             className={cn(
-              'absolute inset-0 bg-black/40 flex items-center justify-center transition-opacity duration-[var(--duration-normal)]',
+              'absolute inset-0 bg-black/40 flex items-center justify-center transition-opacity duration-[var(--sumi-duration-normal)]',
               isPlaying ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
             )}
           >
@@ -117,7 +117,7 @@ function TrackCardComponent({
                 }
               }}
               className={cn(
-                'rounded-full bg-primary text-primary-foreground p-4 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-transform duration-[var(--duration-normal)] active:scale-95',
+                'rounded-full bg-primary text-primary-foreground p-4 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-transform duration-[var(--sumi-duration-normal)] active:scale-95',
                 isPlaying && 'animate-pulse',
               )}
             >
@@ -146,7 +146,7 @@ function TrackCardComponent({
 
         {/* Gradient Overlay for Actions */}
         {showActions && (
-          <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--duration-normal)] flex justify-end gap-2">
+          <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)] flex justify-end gap-2">
             <LikeButton
               trackId={track.id}
               initialLikeCount={likeCount}
@@ -166,7 +166,7 @@ function TrackCardComponent({
                   onMore?.(track);
                 }
               }}
-              className="text-foreground hover:text-primary transition-colors duration-[var(--duration-normal)] p-1 focus:outline-none focus:ring-2 focus:ring-primary rounded-full"
+              className="text-foreground hover:text-primary transition-colors duration-[var(--sumi-duration-normal)] p-1 focus:outline-none focus:ring-2 focus:ring-primary rounded-full"
             >
               <span aria-hidden="true">•••</span>
               <span className="sr-only">Plus d'options</span>
diff --git a/apps/web/src/features/tracks/components/TrackGrid.tsx b/apps/web/src/features/tracks/components/TrackGrid.tsx
index 92777b648..fb25d7418 100644
--- a/apps/web/src/features/tracks/components/TrackGrid.tsx
+++ b/apps/web/src/features/tracks/components/TrackGrid.tsx
@@ -140,7 +140,7 @@ export function TrackGrid({
 
   if (tracks.length === 0) {
     return (
-      <div className="text-center p-8 text-muted-foreground/90 tracking-tight transition-colors duration-[var(--duration-normal)]">
+      <div className="text-center p-8 text-muted-foreground/90 tracking-tight transition-colors duration-[var(--sumi-duration-normal)]">
         {emptyMessage}
       </div>
     );
@@ -148,7 +148,7 @@ export function TrackGrid({
 
   const densityButtonClass = [
     'p-2 rounded-md text-sm font-medium tracking-tight',
-    'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
+    'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)]',
     'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
     'active:scale-95',
   ].join(' ');
diff --git a/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx b/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
index 370731a68..70e20bc79 100644
--- a/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
+++ b/apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
@@ -51,7 +51,7 @@ export function TrackGridDensitySelector({
       className={cn(
         'inline-flex items-center gap-1 p-1 rounded-lg',
         'bg-muted/40 border border-border',
-        'transition-[opacity,box-shadow] duration-[var(--duration-normal)]',
+        'transition-[opacity,box-shadow] duration-[var(--sumi-duration-normal)]',
         className,
       )}
       role="radiogroup"
@@ -67,7 +67,7 @@ export function TrackGridDensitySelector({
             className={cn(
               'flex items-center gap-2 px-4 py-1.5 rounded-md',
               'text-sm font-medium tracking-tight',
-              'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
+              'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)]',
               'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
               'active:scale-95',
               isSelected
diff --git a/apps/web/src/features/tracks/components/TrackList.tsx b/apps/web/src/features/tracks/components/TrackList.tsx
index f74d742e5..587ac58d4 100644
--- a/apps/web/src/features/tracks/components/TrackList.tsx
+++ b/apps/web/src/features/tracks/components/TrackList.tsx
@@ -88,7 +88,7 @@ export function TrackList({
   return (
     <div className={cn('space-y-4', className)}>
       {showSelection && showSelectionActions && selectedTracks.length > 0 && (
-        <div className="flex items-center gap-2 p-3 bg-muted/80 rounded-xl transition-colors duration-[var(--duration-normal)]">
+        <div className="flex items-center gap-2 p-3 bg-muted/80 rounded-xl transition-colors duration-[var(--sumi-duration-normal)]">
           <span className="text-sm text-foreground/90 tracking-tight">
             {selectedTracks.length} pistes sélectionnées
           </span>
@@ -96,7 +96,7 @@ export function TrackList({
             type="button"
             aria-label="Lire les pistes sélectionnées"
             onClick={() => onSelectedPlay?.(selectedTracks)}
-            className="rounded-full px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity duration-[var(--duration-normal)] active:scale-95"
+            className="rounded-full px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity duration-[var(--sumi-duration-normal)] active:scale-95"
           >
             Play
           </button>
@@ -104,7 +104,7 @@ export function TrackList({
             type="button"
             aria-label="Désélectionner toutes les pistes"
             onClick={onClearSelection}
-            className="rounded-full px-3 py-1.5 text-xs font-medium border border-border hover:bg-muted transition-colors duration-[var(--duration-normal)] active:scale-95"
+            className="rounded-full px-3 py-1.5 text-xs font-medium border border-border hover:bg-muted transition-colors duration-[var(--sumi-duration-normal)] active:scale-95"
           >
             Clear
           </button>
@@ -185,7 +185,7 @@ export function TrackList({
               key={track.id}
               role="listitem"
               className={cn(
-                'flex items-center gap-4 p-3 rounded-lg h-14 transition-colors duration-[var(--duration-normal)] group',
+                'flex items-center gap-4 p-3 rounded-lg h-14 transition-colors duration-[var(--sumi-duration-normal)] group',
                 'hover:bg-muted/50',
                 selectedTracks.includes(track.id) && 'bg-primary/10',
               )}
@@ -213,7 +213,7 @@ export function TrackList({
                   />
                 )}
                 {/* Play Overlay */}
-                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
+                <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--sumi-duration-normal)] rounded-md">
                   {currentPlayingId === track.id ? (
                     <button
                       aria-label="Mettre en pause"
@@ -257,7 +257,7 @@ export function TrackList({
               )}
 
               {/* Actions */}
-              <div className="opacity-0 group-hover:opacity-100 flex gap-2 transition-opacity duration-[var(--duration-normal)]">
+              <div className="opacity-0 group-hover:opacity-100 flex gap-2 transition-opacity duration-[var(--sumi-duration-normal)]">
                 <button
                   aria-label={
                     isLiked?.(track.id)
diff --git a/apps/web/src/features/tracks/components/TrackListContainer.tsx b/apps/web/src/features/tracks/components/TrackListContainer.tsx
index 93480e77c..572b4d196 100644
--- a/apps/web/src/features/tracks/components/TrackListContainer.tsx
+++ b/apps/web/src/features/tracks/components/TrackListContainer.tsx
@@ -23,7 +23,7 @@ export function TrackListContainer({
       <div
         className={cn(
           'p-4 rounded-lg bg-destructive/10 border border-destructive/30',
-          'text-destructive text-sm tracking-tight transition-opacity duration-[var(--duration-normal)]',
+          'text-destructive text-sm tracking-tight transition-opacity duration-[var(--sumi-duration-normal)]',
         )}
       >
         Error loading tracks: {error.message}
diff --git a/apps/web/src/features/tracks/components/TrackListEmpty.tsx b/apps/web/src/features/tracks/components/TrackListEmpty.tsx
index 22d586d9d..1fc591efa 100644
--- a/apps/web/src/features/tracks/components/TrackListEmpty.tsx
+++ b/apps/web/src/features/tracks/components/TrackListEmpty.tsx
@@ -95,7 +95,7 @@ export function TrackListEmpty({
     >
       <div
         className={cn(
-          'mb-4 transition-opacity duration-[var(--duration-normal)]',
+          'mb-4 transition-opacity duration-[var(--sumi-duration-normal)]',
           determinedType === 'error' && 'animate-pulse',
         )}
       >
@@ -130,7 +130,7 @@ export function TrackListEmpty({
               onClick={onRetry}
               className={cn(
                 'inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium',
-                'transition-[color,transform,opacity] duration-[var(--duration-normal)] active:scale-95',
+                'transition-[color,transform,opacity] duration-[var(--sumi-duration-normal)] active:scale-95',
                 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
                 determinedType === 'error'
                   ? 'bg-destructive text-destructive-foreground hover:opacity-90'
diff --git a/apps/web/src/features/tracks/components/TrackListRow.tsx b/apps/web/src/features/tracks/components/TrackListRow.tsx
index eb700583d..963704f7f 100644
--- a/apps/web/src/features/tracks/components/TrackListRow.tsx
+++ b/apps/web/src/features/tracks/components/TrackListRow.tsx
@@ -159,7 +159,7 @@ export function TrackListRow({
                   </div>
                 )}
                 {showActions && (
-                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
+                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--sumi-duration-normal)] rounded-md">
                     <button
                       onClick={handlePlay}
                       aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
@@ -200,7 +200,7 @@ export function TrackListRow({
       role="listitem"
       className={cn(
         'flex items-center gap-4 p-2 rounded-md hover:bg-muted/50 group h-14',
-        'transition-colors duration-[var(--duration-normal)]',
+        'transition-colors duration-[var(--sumi-duration-normal)]',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
         isSelected && 'bg-primary/10',
         className,
@@ -249,7 +249,7 @@ export function TrackListRow({
         )}
 
         {showActions && (
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
+          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--sumi-duration-normal)] rounded-md">
             <button
               aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
               onClick={handlePlay}
@@ -283,14 +283,14 @@ export function TrackListRow({
           <button
             aria-label={isLiked ? 'Retirer des favoris' : 'Ajouter aux favoris'}
             onClick={handleLike}
-            className="hover:text-primary transition-colors duration-[var(--duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"
+            className="hover:text-primary transition-colors duration-[var(--sumi-duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"
           >
             {LikeIcon}
           </button>
           <button
             aria-label="Plus d'options"
             onClick={handleMore}
-            className="hover:text-primary transition-colors duration-[var(--duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"
+            className="hover:text-primary transition-colors duration-[var(--sumi-duration-normal)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"
           >
             ...
           </button>
diff --git a/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx b/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
index fd680479a..f1955f148 100644
--- a/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
+++ b/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
@@ -55,7 +55,7 @@ export function TrackListSelectionActions({
 
   const actionButtonClass = [
     'p-2 rounded-md',
-    'transition-[background-color,transform] duration-[var(--duration-normal)]',
+    'transition-[background-color,transform] duration-[var(--sumi-duration-normal)]',
     'hover:bg-primary-foreground/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground/40 focus-visible:ring-offset-2 focus-visible:ring-offset-primary',
     'active:scale-95',
   ].join(' ');
@@ -67,7 +67,7 @@ export function TrackListSelectionActions({
         'bg-primary text-primary-foreground',
         'px-4 py-4 shadow-lg border-t border-primary-foreground/10 rounded-t-[var(--radius-xl)]',
         'flex items-center justify-between gap-4',
-        'transition-[opacity,transform,box-shadow] duration-[var(--duration-normal)]',
+        'transition-[opacity,transform,box-shadow] duration-[var(--sumi-duration-normal)]',
         className,
       )}
       role="toolbar"
diff --git a/apps/web/src/features/tracks/components/TrackSearch.tsx b/apps/web/src/features/tracks/components/TrackSearch.tsx
index ccb7f32b9..dc039c280 100644
--- a/apps/web/src/features/tracks/components/TrackSearch.tsx
+++ b/apps/web/src/features/tracks/components/TrackSearch.tsx
@@ -98,7 +98,7 @@ export function TrackSearch({
   return (
     <div
       className={cn(
-        'space-y-6 transition-opacity duration-[var(--duration-normal)]',
+        'space-y-6 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
@@ -116,13 +116,13 @@ export function TrackSearch({
                 handleSearch();
               }
             }}
-            className="pl-10 rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
+            className="pl-10 rounded-md transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]"
           />
         </div>
         <Button
           onClick={handleSearch}
           disabled={loading}
-          className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
+          className="rounded-md transition-transform duration-[var(--sumi-duration-normal)] active:scale-95"
         >
           Rechercher
         </Button>
diff --git a/apps/web/src/features/tracks/components/TrackSearchResults.tsx b/apps/web/src/features/tracks/components/TrackSearchResults.tsx
index e2c74f269..262c0ca2a 100644
--- a/apps/web/src/features/tracks/components/TrackSearchResults.tsx
+++ b/apps/web/src/features/tracks/components/TrackSearchResults.tsx
@@ -120,11 +120,11 @@ export function TrackSearchResults({
     return (
       <div
         className={cn(
-          'text-center py-12 text-muted-foreground/90 tracking-tight transition-opacity duration-[var(--duration-normal)]',
+          'text-center py-12 text-muted-foreground/90 tracking-tight transition-opacity duration-[var(--sumi-duration-normal)]',
           className,
         )}
       >
-        <Music className="h-12 w-12 mx-auto mb-4 opacity-50 transition-transform duration-[var(--duration-normal)]" />
+        <Music className="h-12 w-12 mx-auto mb-4 opacity-50 transition-transform duration-[var(--sumi-duration-normal)]" />
         <p>Aucun track trouvé</p>
         {total === 0 && (
           <p className="text-sm mt-2">Essayez de modifier vos critères de recherche</p>
@@ -136,7 +136,7 @@ export function TrackSearchResults({
   return (
     <div
       className={cn(
-        'space-y-4 transition-opacity duration-[var(--duration-normal)]',
+        'space-y-4 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
@@ -152,7 +152,7 @@ export function TrackSearchResults({
             key={track.id}
             className={cn(
               'overflow-hidden rounded-xl',
-              'transition-[box-shadow,transform] duration-[var(--duration-normal)] hover:shadow-xl',
+              'transition-[box-shadow,transform] duration-[var(--sumi-duration-normal)] hover:shadow-xl',
             )}
           >
             <CardContent className="p-0">
@@ -168,11 +168,11 @@ export function TrackSearchResults({
                   <Music className="h-16 w-16 text-muted-foreground/50" />
                 )}
                 {/* Play Button Overlay */}
-                <div className="absolute inset-0 bg-black/0 hover:bg-black/20 transition-colors duration-[var(--duration-normal)] flex items-center justify-center opacity-0 hover:opacity-100 rounded-t-[var(--radius-xl)]">
+                <div className="absolute inset-0 bg-black/0 hover:bg-black/20 transition-colors duration-[var(--sumi-duration-normal)] flex items-center justify-center opacity-0 hover:opacity-100 rounded-t-[var(--radius-xl)]">
                   <Button
                     variant="secondary"
                     size="icon"
-                    className="rounded-full h-12 w-12 transition-transform duration-[var(--duration-normal)] active:scale-95"
+                    className="rounded-full h-12 w-12 transition-transform duration-[var(--sumi-duration-normal)] active:scale-95"
                     onClick={() => handlePlayTrack(track)}
                   >
                     <Play className="h-6 w-6 fill-current" />
@@ -183,7 +183,7 @@ export function TrackSearchResults({
               <div className="p-4">
                 <Link to={`/tracks/${track.id}`}>
                   <h3
-                    className="font-semibold text-lg truncate hover:text-primary transition-colors duration-[var(--duration-normal)] tracking-tight"
+                    className="font-semibold text-lg truncate hover:text-primary transition-colors duration-[var(--sumi-duration-normal)] tracking-tight"
                     title={track.title}
                   >
                     {track.title}
@@ -235,7 +235,7 @@ export function TrackSearchResults({
               size="sm"
               onClick={handlePreviousPage}
               disabled={page <= 1}
-              className="rounded-md transition-colors duration-[var(--duration-normal)] active:scale-95"
+              className="rounded-md transition-colors duration-[var(--sumi-duration-normal)] active:scale-95"
             >
               <ChevronLeft className="h-4 w-4 mr-1" />
               Précédent
@@ -245,7 +245,7 @@ export function TrackSearchResults({
               size="sm"
               onClick={handleNextPage}
               disabled={page >= totalPages}
-              className="rounded-md transition-colors duration-[var(--duration-normal)] active:scale-95"
+              className="rounded-md transition-colors duration-[var(--sumi-duration-normal)] active:scale-95"
             >
               Suivant
               <ChevronRight className="h-4 w-4 ml-1" />
diff --git a/apps/web/src/features/tracks/components/TrackSort.tsx b/apps/web/src/features/tracks/components/TrackSort.tsx
index b8a7cba3e..373547f3f 100644
--- a/apps/web/src/features/tracks/components/TrackSort.tsx
+++ b/apps/web/src/features/tracks/components/TrackSort.tsx
@@ -121,7 +121,7 @@ export function TrackSort({
   return (
     <div
       className={cn(
-        'flex items-center gap-2 transition-opacity duration-[var(--duration-normal)]',
+        'flex items-center gap-2 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
       role="group"
@@ -143,7 +143,7 @@ export function TrackSort({
             className={cn(
               'pl-10 pr-8 py-2 border border-input bg-background',
               'rounded-md text-sm font-medium text-foreground tracking-tight',
-              'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
+              'transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]',
               'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
               'appearance-none cursor-pointer',
             )}
@@ -167,7 +167,7 @@ export function TrackSort({
           className={cn(
             'p-2 rounded-md border border-input bg-background',
             'text-foreground flex items-center justify-center',
-            'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
+            'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)]',
             'hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
             'active:scale-95',
           )}
diff --git a/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx b/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
index caa6445d9..78d8b5f50 100644
--- a/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
+++ b/apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
@@ -58,7 +58,7 @@ export function TrackStatsDisplay({
       <div
         className={cn(
           'flex h-10 items-center gap-2 text-xs font-mono text-muted-foreground/90 tracking-tight',
-          'animate-pulse transition-opacity duration-[var(--duration-normal)]',
+          'animate-pulse transition-opacity duration-[var(--sumi-duration-normal)]',
         )}
       >
         <Loader2 className="w-3 h-3 animate-spin" />
@@ -80,7 +80,7 @@ export function TrackStatsDisplay({
     return (
       <div
         className={cn(
-          'grid grid-cols-2 md:grid-cols-5 gap-3 transition-opacity duration-[var(--duration-normal)]',
+          'grid grid-cols-2 md:grid-cols-5 gap-3 transition-opacity duration-[var(--sumi-duration-normal)]',
           className,
         )}
       >
@@ -92,12 +92,12 @@ export function TrackStatsDisplay({
               variant="outline"
               className={cn(
                 'p-3 border-border flex flex-col items-center gap-1',
-                'hover:border-primary/30 hover:shadow-md transition-[border-color,box-shadow,transform] duration-[var(--duration-normal)]',
+                'hover:border-primary/30 hover:shadow-md transition-[border-color,box-shadow,transform] duration-[var(--sumi-duration-normal)]',
               )}
             >
               <div
                 className={cn(
-                  'p-2 rounded-md mb-1 transition-transform duration-[var(--duration-normal)] hover:scale-105',
+                  'p-2 rounded-md mb-1 transition-transform duration-[var(--sumi-duration-normal)]',
                   item.bg,
                   item.color,
                 )}
@@ -120,7 +120,7 @@ export function TrackStatsDisplay({
   return (
     <div
       className={cn(
-        'flex flex-wrap items-center gap-6 transition-opacity duration-[var(--duration-normal)]',
+        'flex flex-wrap items-center gap-6 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
@@ -133,7 +133,7 @@ export function TrackStatsDisplay({
           >
             <div
               className={cn(
-                'p-1.5 rounded-md opacity-80 group-hover:opacity-100 transition-[opacity,transform] duration-[var(--duration-normal)]',
+                'p-1.5 rounded-md opacity-80 group-hover:opacity-100 transition-[opacity,transform] duration-[var(--sumi-duration-normal)]',
                 item.bg,
                 item.color,
               )}
@@ -141,7 +141,7 @@ export function TrackStatsDisplay({
               <Icon className="w-3.5 h-3.5" aria-hidden />
             </div>
             <div className="flex flex-col">
-              <span className="text-sm font-bold text-foreground tabular-nums tracking-tight group-hover:text-primary transition-colors duration-[var(--duration-normal)]">
+              <span className="text-sm font-bold text-foreground tabular-nums tracking-tight group-hover:text-primary transition-colors duration-[var(--sumi-duration-normal)]">
                 {item.value}
               </span>
               {showLabels && (
diff --git a/apps/web/src/features/tracks/components/UploadQuota.tsx b/apps/web/src/features/tracks/components/UploadQuota.tsx
index 3f15fdd72..d5202c171 100644
--- a/apps/web/src/features/tracks/components/UploadQuota.tsx
+++ b/apps/web/src/features/tracks/components/UploadQuota.tsx
@@ -62,7 +62,7 @@ export function UploadQuota({
 
   if (loading) {
     return (
-      <Card className={cn('w-full transition-opacity duration-[var(--duration-normal)]', className)}>
+      <Card className={cn('w-full transition-opacity duration-[var(--sumi-duration-normal)]', className)}>
         <CardContent className="p-4">
           <div className="text-sm text-muted-foreground/90 tracking-tight">
             Chargement du quota...
@@ -76,7 +76,7 @@ export function UploadQuota({
     return (
       <Card
         className={cn(
-          'w-full border-destructive/50 bg-destructive/10 transition-opacity duration-[var(--duration-normal)]',
+          'w-full border-destructive/50 bg-destructive/10 transition-opacity duration-[var(--sumi-duration-normal)]',
           className,
         )}
       >
@@ -109,7 +109,7 @@ export function UploadQuota({
   return (
     <Card
       className={cn(
-        'w-full transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
+        'w-full transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]',
         className,
         isQuotaExceeded && 'border-destructive',
       )}
@@ -121,7 +121,7 @@ export function UploadQuota({
       </CardHeader>
       <CardContent className="space-y-4">
         {/* Tracks quota */}
-        <div className="transition-opacity duration-[var(--duration-normal)]">
+        <div className="transition-opacity duration-[var(--sumi-duration-normal)]">
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center gap-2 text-sm">
               <Music className="h-4 w-4 text-muted-foreground/90" />
@@ -152,7 +152,7 @@ export function UploadQuota({
         </div>
 
         {/* Storage quota */}
-        <div className="transition-opacity duration-[var(--duration-normal)]">
+        <div className="transition-opacity duration-[var(--sumi-duration-normal)]">
           <div className="flex items-center justify-between mb-2">
             <div className="flex items-center gap-2 text-sm">
               <HardDrive className="h-4 w-4 text-muted-foreground/90" />
@@ -185,7 +185,7 @@ export function UploadQuota({
 
         {/* Warning message if quota is near limit */}
         {isQuotaNearLimit && !isQuotaExceeded && (
-          <div className="flex items-start gap-2 p-2 bg-warning/10 rounded-md text-xs text-warning tracking-tight transition-colors duration-[var(--duration-normal)]">
+          <div className="flex items-start gap-2 p-2 bg-warning/10 rounded-md text-xs text-warning tracking-tight transition-colors duration-[var(--sumi-duration-normal)]">
             <AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
             <span>
               Votre quota d'upload approche de sa limite. Pensez à libérer de
diff --git a/apps/web/src/features/tracks/components/ViewToggle.tsx b/apps/web/src/features/tracks/components/ViewToggle.tsx
index 4892f4aba..45768ec90 100644
--- a/apps/web/src/features/tracks/components/ViewToggle.tsx
+++ b/apps/web/src/features/tracks/components/ViewToggle.tsx
@@ -56,7 +56,7 @@ export function ViewToggle({
     setIsTransitioning(true);
     onChange(mode);
 
-    // Réinitialiser l'état de transition après la durée de transition (aligné sur --duration-normal)
+    // Réinitialiser l'état de transition après la durée de transition (aligné sur --sumi-duration-normal)
     setTimeout(() => {
       setIsTransitioning(false);
     }, 250);
@@ -65,7 +65,7 @@ export function ViewToggle({
   const buttonBase = [
     'flex items-center gap-2 px-4 py-1.5 rounded-md',
     'text-sm font-medium tracking-tight',
-    'transition-[color,background-color,transform,opacity] duration-[var(--duration-normal)]',
+    'transition-[color,background-color,transform,opacity] duration-[var(--sumi-duration-normal)]',
     'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
     'disabled:opacity-50 disabled:cursor-not-allowed active:scale-95',
   ].join(' ');
@@ -75,7 +75,7 @@ export function ViewToggle({
       className={cn(
         'inline-flex items-center gap-1 p-1 rounded-lg',
         'bg-muted/40 border border-border',
-        'transition-[opacity,box-shadow] duration-[var(--duration-normal)]',
+        'transition-[opacity,box-shadow] duration-[var(--sumi-duration-normal)]',
         isTransitioning && 'opacity-75',
         className,
       )}
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentRepliesList.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentRepliesList.tsx
index e1c4cd1e1..8a495232b 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentRepliesList.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentRepliesList.tsx
@@ -15,7 +15,7 @@ export function CommentRepliesList({
   return (
     <div
       className={cn(
-        'space-y-4 pt-2 pl-4 border-l-2 border-border/80 rounded-sm transition-colors duration-[var(--duration-normal)]',
+        'space-y-4 pt-2 pl-4 border-l-2 border-border/80 rounded-sm transition-colors duration-[var(--sumi-duration-normal)]',
         className,
       )}
       data-testid="comment-replies-list"
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentReplyForm.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentReplyForm.tsx
index 42d1f98fb..d74502d95 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentReplyForm.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentReplyForm.tsx
@@ -27,7 +27,7 @@ export function CommentReplyForm({
     <form
       onSubmit={onSubmit}
       className={cn(
-        'space-y-2 pt-2 rounded-lg transition-opacity duration-[var(--duration-normal)]',
+        'space-y-2 pt-2 rounded-lg transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
       data-testid="comment-reply-form"
@@ -38,14 +38,14 @@ export function CommentReplyForm({
         placeholder={placeholder}
         maxLength={500}
         autoFocus
-        className="rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
+        className="rounded-md transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]"
       />
       <div className="flex gap-2">
         <Button
           type="submit"
           size="sm"
           disabled={!value.trim() || isPending}
-          className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
+          className="rounded-md transition-transform duration-[var(--sumi-duration-normal)] active:scale-95"
         >
           {isPending ? (
             <Spinner size="sm" className="mr-2" />
@@ -59,7 +59,7 @@ export function CommentReplyForm({
           variant="outline"
           size="sm"
           onClick={onCancel}
-          className="rounded-md transition-colors duration-[var(--duration-normal)]"
+          className="rounded-md transition-colors duration-[var(--sumi-duration-normal)]"
         >
           <X className="h-4 w-4 mr-2" />
           Annuler
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentThread.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentThread.tsx
index 1cbd27aaa..cfabd922f 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentThread.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentThread.tsx
@@ -85,7 +85,7 @@ export function CommentThread({
     <>
       <div
         className={cn(
-          'space-y-4 rounded-lg p-3 -m-3 transition-[color,box-shadow] duration-[var(--duration-normal)]',
+          'space-y-4 rounded-lg p-3 -m-3 transition-[color,box-shadow] duration-[var(--sumi-duration-normal)]',
           'hover:bg-muted/20 focus-within:ring-1 focus-within:ring-primary/20 focus-within:ring-inset focus-within:bg-muted/10',
           className,
         )}
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentThreadActions.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentThreadActions.tsx
index dae5f70cd..0a5c42874 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentThreadActions.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentThreadActions.tsx
@@ -47,7 +47,7 @@ export function CommentThreadActions({
             variant="ghost"
             size="sm"
             onClick={onToggleReply}
-            className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
+            className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--sumi-duration-normal)] hover:text-primary hover:bg-primary/10"
           >
             <Reply className="h-3 w-3 mr-1 text-primary/90" />
             Répondre
@@ -66,7 +66,7 @@ export function CommentThreadActions({
             variant="ghost"
             size="sm"
             onClick={onToggleReplies}
-            className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
+            className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--sumi-duration-normal)] hover:text-primary hover:bg-primary/10"
           >
             <MessageCircle className="h-3 w-3 mr-1 text-primary/90" />
             {showReplies ? 'Masquer' : 'Afficher'} {repliesCount}{' '}
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentThreadContent.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentThreadContent.tsx
index d4d32dcdf..37a96f20e 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentThreadContent.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentThreadContent.tsx
@@ -31,7 +31,7 @@ export function CommentThreadContent({
       <form
         onSubmit={onEditSubmit}
         className={cn(
-          'space-y-2 rounded-lg transition-opacity duration-[var(--duration-normal)]',
+          'space-y-2 rounded-lg transition-opacity duration-[var(--sumi-duration-normal)]',
           className,
         )}
         data-testid="comment-edit-form"
@@ -41,14 +41,14 @@ export function CommentThreadContent({
           onChange={(e) => onEditContentChange(e.target.value)}
           maxLength={500}
           autoFocus
-          className="rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
+          className="rounded-md transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]"
         />
         <div className="flex gap-2">
           <Button
             type="submit"
             size="sm"
             disabled={!editContent.trim() || isEditPending}
-            className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
+            className="rounded-md transition-transform duration-[var(--sumi-duration-normal)] active:scale-95"
           >
             {isEditPending ? (
               <Spinner size="sm" className="mr-2" />
@@ -62,7 +62,7 @@ export function CommentThreadContent({
             variant="outline"
             size="sm"
             onClick={onEditCancel}
-            className="rounded-md transition-colors duration-[var(--duration-normal)]"
+            className="rounded-md transition-colors duration-[var(--sumi-duration-normal)]"
           >
             <X className="h-4 w-4 mr-2" />
             Annuler
@@ -75,7 +75,7 @@ export function CommentThreadContent({
   return (
     <p
       className={cn(
-        'text-sm text-foreground/90 whitespace-pre-wrap break-words tracking-tight leading-relaxed transition-colors duration-[var(--duration-normal)]',
+        'text-sm text-foreground/90 whitespace-pre-wrap break-words tracking-tight leading-relaxed transition-colors duration-[var(--sumi-duration-normal)]',
         className,
       )}
       data-testid="comment-content"
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx
index b57eaca35..c6bb4bc70 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx
@@ -58,7 +58,7 @@ export function CommentThreadHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="h-6 w-6 rounded-md transition-colors duration-[var(--duration-normal)] hover:text-foreground hover:bg-muted/50"
+              className="h-6 w-6 rounded-md transition-colors duration-[var(--sumi-duration-normal)] hover:text-foreground hover:bg-muted/50"
             >
               <MoreVertical className="h-4 w-4" />
             </Button>
diff --git a/apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.tsx b/apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.tsx
index bbdea1ff0..f97757fc3 100644
--- a/apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.tsx
+++ b/apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.tsx
@@ -14,7 +14,7 @@ export function CommentThreadSkeleton({
   return (
     <div
       className={cn(
-        'flex gap-4 animate-pulse rounded-lg transition-opacity duration-[var(--duration-normal)]',
+        'flex gap-4 animate-pulse rounded-lg transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
       data-testid="comment-thread-skeleton"
diff --git a/apps/web/src/features/tracks/components/comments/CommentEditor.tsx b/apps/web/src/features/tracks/components/comments/CommentEditor.tsx
index 7aa1d71f3..57dfc8504 100644
--- a/apps/web/src/features/tracks/components/comments/CommentEditor.tsx
+++ b/apps/web/src/features/tracks/components/comments/CommentEditor.tsx
@@ -33,7 +33,7 @@ export function CommentEditor({
 
   return (
     <div
-      className={cn('transition-opacity duration-[var(--duration-normal)]', className)}
+      className={cn('transition-opacity duration-[var(--sumi-duration-normal)]', className)}
       data-testid="comment-editor"
     >
       {showForm ? (
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFilters.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFilters.tsx
index ba03a6d70..d18e22e63 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFilters.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFilters.tsx
@@ -49,7 +49,7 @@ export function TrackFilters({
     <div
       className={cn(
         'bg-card border border-border rounded-xl p-4 shadow-sm',
-        'transition-[box-shadow,border-color] duration-[var(--duration-normal)] hover:shadow-md',
+        'transition-[box-shadow,border-color] duration-[var(--sumi-duration-normal)] hover:shadow-md',
         className,
       )}
     >
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFiltersClear.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFiltersClear.tsx
index 37b793bec..8eeae03ef 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFiltersClear.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFiltersClear.tsx
@@ -14,7 +14,7 @@ export function TrackFiltersClear({ onClear }: TrackFiltersClearProps) {
         className={cn(
           'flex items-center gap-2 px-4 py-2 text-sm font-medium tracking-tight',
           'text-foreground rounded-md',
-          'transition-[color,background-color,transform] duration-[var(--duration-normal)] hover:bg-muted/50 active:scale-95',
+          'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)] hover:bg-muted/50 active:scale-95',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         )}
         aria-label="Effacer tous les filtres"
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFiltersGrid.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFiltersGrid.tsx
index 2e82f1b26..c9e6bed82 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFiltersGrid.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFiltersGrid.tsx
@@ -30,7 +30,7 @@ export function TrackFiltersGrid({
   showDuration,
 }: TrackFiltersGridProps) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 transition-opacity duration-[var(--duration-normal)]">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 transition-opacity duration-[var(--sumi-duration-normal)]">
       {showGenre && (
         <div>
           <label
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFiltersHeader.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFiltersHeader.tsx
index 616a3a834..3ee638dcb 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFiltersHeader.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFiltersHeader.tsx
@@ -22,7 +22,7 @@ export function TrackFiltersHeader({
       onClick={onToggle}
       className={cn(
         'flex items-center justify-between w-full mb-4 text-left rounded-md',
-        'transition-colors duration-[var(--duration-normal)] hover:bg-muted/30',
+        'transition-colors duration-[var(--sumi-duration-normal)] hover:bg-muted/30',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       )}
       aria-expanded={isExpanded}
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFiltersSearch.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFiltersSearch.tsx
index a4d441a27..5aa42b10e 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFiltersSearch.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFiltersSearch.tsx
@@ -9,7 +9,7 @@ interface TrackFiltersSearchProps {
 
 export function TrackFiltersSearch({ value, onChange }: TrackFiltersSearchProps) {
   return (
-    <div className="relative transition-opacity duration-[var(--duration-normal)]">
+    <div className="relative transition-opacity duration-[var(--sumi-duration-normal)]">
       <label htmlFor="track-search" className={LABEL_CLASS}>
         Recherche
       </label>
@@ -30,7 +30,7 @@ export function TrackFiltersSearch({ value, onChange }: TrackFiltersSearchProps)
             onClick={() => onChange('')}
             className={cn(
               'absolute right-3 top-1/2 -translate-y-1/2 rounded-sm',
-              'text-muted-foreground/90 transition-colors duration-[var(--duration-normal)] hover:text-foreground hover:bg-muted/30',
+              'text-muted-foreground/90 transition-colors duration-[var(--sumi-duration-normal)] hover:text-foreground hover:bg-muted/30',
             )}
             aria-label="Effacer la recherche"
           >
diff --git a/apps/web/src/features/tracks/components/track-filters/TrackFiltersSkeleton.tsx b/apps/web/src/features/tracks/components/track-filters/TrackFiltersSkeleton.tsx
index e8de5b040..1944e4781 100644
--- a/apps/web/src/features/tracks/components/track-filters/TrackFiltersSkeleton.tsx
+++ b/apps/web/src/features/tracks/components/track-filters/TrackFiltersSkeleton.tsx
@@ -14,7 +14,7 @@ export function TrackFiltersSkeleton({ className }: TrackFiltersSkeletonProps) {
     <div
       className={cn(
         'bg-card border border-border rounded-xl p-4 min-h-layout-story shadow-sm',
-        'transition-opacity duration-[var(--duration-normal)]',
+        'transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
diff --git a/apps/web/src/features/tracks/components/track-filters/types.ts b/apps/web/src/features/tracks/components/track-filters/types.ts
index bd2817bdf..86dcf635c 100644
--- a/apps/web/src/features/tracks/components/track-filters/types.ts
+++ b/apps/web/src/features/tracks/components/track-filters/types.ts
@@ -22,7 +22,7 @@ export interface TrackFiltersProps {
 export const INPUT_CLASS = [
   'w-full px-4 py-2 border border-input bg-background rounded-md',
   'text-foreground placeholder:text-muted-foreground',
-  'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
+  'transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]',
   'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
 ].join(' ');
 
@@ -31,6 +31,6 @@ export const LABEL_CLASS =
 
 export const SELECT_CLASS = [
   'w-full px-4 py-2 border border-input bg-background rounded-md text-foreground',
-  'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
+  'transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]',
   'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
 ].join(' ');
diff --git a/apps/web/src/features/tracks/components/track-history/TrackHistory.tsx b/apps/web/src/features/tracks/components/track-history/TrackHistory.tsx
index 3e1609ad0..cfef721ee 100644
--- a/apps/web/src/features/tracks/components/track-history/TrackHistory.tsx
+++ b/apps/web/src/features/tracks/components/track-history/TrackHistory.tsx
@@ -47,7 +47,7 @@ export function TrackHistory({
   return (
     <div
       className={cn(
-        'space-y-4 transition-opacity duration-[var(--duration-normal)]',
+        'space-y-4 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
@@ -58,7 +58,7 @@ export function TrackHistory({
       ) : (
         <>
           <div className="relative">
-            <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border/80 transition-colors duration-[var(--duration-normal)]" />
+            <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border/80 transition-colors duration-[var(--sumi-duration-normal)]" />
             <div className="space-y-6">
               {history.map((item) => (
                 <TrackHistoryItemRow key={item.id} item={item} />
diff --git a/apps/web/src/features/tracks/components/track-history/TrackHistoryEmpty.tsx b/apps/web/src/features/tracks/components/track-history/TrackHistoryEmpty.tsx
index 0015abe8a..bd5a8b0ab 100644
--- a/apps/web/src/features/tracks/components/track-history/TrackHistoryEmpty.tsx
+++ b/apps/web/src/features/tracks/components/track-history/TrackHistoryEmpty.tsx
@@ -3,7 +3,7 @@ import { History } from 'lucide-react';
 export function TrackHistoryEmpty() {
   return (
     <div className="text-center py-8 text-muted-foreground/90 text-sm tracking-tight rounded-xl">
-      <History className="h-12 w-12 mx-auto mb-4 opacity-50 transition-opacity duration-[var(--duration-normal)]" aria-hidden />
+      <History className="h-12 w-12 mx-auto mb-4 opacity-50 transition-opacity duration-[var(--sumi-duration-normal)]" aria-hidden />
       <p>Aucune modification enregistrée</p>
     </div>
   );
diff --git a/apps/web/src/features/tracks/components/track-history/TrackHistoryItemRow.tsx b/apps/web/src/features/tracks/components/track-history/TrackHistoryItemRow.tsx
index f38b7b9b0..f7800a5bb 100644
--- a/apps/web/src/features/tracks/components/track-history/TrackHistoryItemRow.tsx
+++ b/apps/web/src/features/tracks/components/track-history/TrackHistoryItemRow.tsx
@@ -21,7 +21,7 @@ export function TrackHistoryItemRow({ item }: TrackHistoryItemRowProps) {
   const newValue = parseValue(item.new_value);
 
   return (
-    <div className="relative flex gap-4 transition-colors duration-[var(--duration-normal)]">
+    <div className="relative flex gap-4 transition-colors duration-[var(--sumi-duration-normal)]">
       <div
         className={cn(
           'relative z-10 flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 border-background',
@@ -46,7 +46,7 @@ export function TrackHistoryItemRow({ item }: TrackHistoryItemRowProps) {
         </div>
 
         {(oldValue !== null || newValue !== null) && (
-          <div className="space-y-2 rounded-lg border border-border/80 bg-muted/50 p-4 text-sm transition-colors duration-[var(--duration-normal)]">
+          <div className="space-y-2 rounded-lg border border-border/80 bg-muted/50 p-4 text-sm transition-colors duration-[var(--sumi-duration-normal)]">
             {oldValue !== null && (
               <div>
                 <div className="text-xs font-medium text-muted-foreground/90 mb-1 tracking-tight">
diff --git a/apps/web/src/features/tracks/components/track-history/TrackHistoryPagination.tsx b/apps/web/src/features/tracks/components/track-history/TrackHistoryPagination.tsx
index ba732798e..e9a2eb1dc 100644
--- a/apps/web/src/features/tracks/components/track-history/TrackHistoryPagination.tsx
+++ b/apps/web/src/features/tracks/components/track-history/TrackHistoryPagination.tsx
@@ -21,7 +21,7 @@ export function TrackHistoryPagination({
   onNext,
 }: TrackHistoryPaginationProps) {
   return (
-    <div className="flex items-center justify-between border-t border-border/80 pt-4 transition-colors duration-[var(--duration-normal)]">
+    <div className="flex items-center justify-between border-t border-border/80 pt-4 transition-colors duration-[var(--sumi-duration-normal)]">
       <div className="text-sm text-muted-foreground/90 tracking-tight tabular-nums">
         Affichage {currentOffset + 1} -{' '}
         {Math.min(currentOffset + limit, total)} sur {total}
diff --git a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPagination.tsx b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPagination.tsx
index 901484f0a..470548adb 100644
--- a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPagination.tsx
+++ b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPagination.tsx
@@ -31,7 +31,7 @@ export function TrackListPagination({
     <nav
       className={cn(
         'flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-4 border-t border-border/80',
-        'transition-colors duration-[var(--duration-normal)]',
+        'transition-colors duration-[var(--sumi-duration-normal)]',
         className
       )}
       role="navigation"
diff --git a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationInfo.tsx b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationInfo.tsx
index ca52217de..132d21ec6 100644
--- a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationInfo.tsx
+++ b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationInfo.tsx
@@ -12,7 +12,7 @@ export function TrackListPaginationInfo({
   label = 'pistes',
 }: TrackListPaginationInfoProps) {
   return (
-    <div className="text-sm text-muted-foreground/90 tracking-tight transition-colors duration-[var(--duration-normal)]">
+    <div className="text-sm text-muted-foreground/90 tracking-tight transition-colors duration-[var(--sumi-duration-normal)]">
       Affichage de{' '}
       <span className="font-medium text-foreground tabular-nums">{startItem}</span>{' '}
       à{' '}
diff --git a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationNav.tsx b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationNav.tsx
index 33c3859f4..7875fa46e 100644
--- a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationNav.tsx
+++ b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationNav.tsx
@@ -18,14 +18,14 @@ interface TrackListPaginationNavProps {
 
 const navButtonClass = [
   'p-2 rounded-md text-muted-foreground/90',
-  'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
+  'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)]',
   'hover:bg-primary/10 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   'disabled:opacity-50 disabled:cursor-not-allowed active:scale-95',
 ].join(' ');
 
 const pageButtonClass = [
   'px-4 py-1.5 rounded-md text-sm font-medium tabular-nums tracking-tight',
-  'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
+  'transition-[color,background-color,transform] duration-[var(--sumi-duration-normal)]',
   'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   'disabled:opacity-50 disabled:cursor-not-allowed active:scale-95',
 ].join(' ');
@@ -50,7 +50,7 @@ export function TrackListPaginationNav({
   };
 
   return (
-    <div className="flex items-center gap-2 transition-opacity duration-[var(--duration-normal)]">
+    <div className="flex items-center gap-2 transition-opacity duration-[var(--sumi-duration-normal)]">
       <button
         type="button"
         onClick={() => canGoFirst && onPageChange(1)}
diff --git a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationSkeleton.tsx b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationSkeleton.tsx
index 7f45f35a5..8a43d85a3 100644
--- a/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationSkeleton.tsx
+++ b/apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationSkeleton.tsx
@@ -12,7 +12,7 @@ export function TrackListPaginationSkeleton({
     <div
       className={cn(
         'flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-4 border-t border-border/80',
-        'transition-opacity duration-[var(--duration-normal)]',
+        'transition-opacity duration-[var(--sumi-duration-normal)]',
         className
       )}
       role="presentation"
diff --git a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFilters.tsx b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFilters.tsx
index 8eede7fc3..dd22dde53 100644
--- a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFilters.tsx
+++ b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFilters.tsx
@@ -28,7 +28,7 @@ export function TrackSearchFilters({
   } = useTrackSearchFilters(filters, onFiltersChange);
 
   return (
-    <div className={cn('space-y-4 transition-opacity duration-[var(--duration-normal)]', className)}>
+    <div className={cn('space-y-4 transition-opacity duration-[var(--sumi-duration-normal)]', className)}>
       <TrackSearchFiltersBasic
         filters={filters}
         updateFilter={updateFilter}
@@ -40,7 +40,7 @@ export function TrackSearchFilters({
           variant="ghost"
           size="sm"
           onClick={() => setShowAdvanced(!showAdvanced)}
-          className="text-sm tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:bg-primary/10 hover:text-primary"
+          className="text-sm tracking-tight rounded-md transition-colors duration-[var(--sumi-duration-normal)] hover:bg-primary/10 hover:text-primary"
         >
           {showAdvanced ? 'Masquer' : 'Afficher'} les filtres avancés
         </Button>
diff --git a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersAdvanced.tsx b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersAdvanced.tsx
index fdcd85ebd..eedc0a73e 100644
--- a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersAdvanced.tsx
+++ b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersAdvanced.tsx
@@ -14,7 +14,7 @@ interface TrackSearchFiltersAdvancedProps {
 
 const labelClass = 'text-muted-foreground/90 tracking-tight';
 const inputClass =
-  'rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
+  'rounded-md transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]';
 
 export function TrackSearchFiltersAdvanced({
   filters,
@@ -23,7 +23,7 @@ export function TrackSearchFiltersAdvanced({
   updateFilter,
 }: TrackSearchFiltersAdvancedProps) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 border border-border rounded-xl bg-muted/30 transition-colors duration-[var(--duration-normal)]">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 border border-border rounded-xl bg-muted/30 transition-colors duration-[var(--sumi-duration-normal)]">
       <div className="space-y-2">
         <Label htmlFor="tags" className={labelClass}>
           Tags (séparés par des virgules)
diff --git a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersBasic.tsx b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersBasic.tsx
index 01151dae9..a491d021e 100644
--- a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersBasic.tsx
+++ b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersBasic.tsx
@@ -19,7 +19,7 @@ interface TrackSearchFiltersBasicProps {
 
 const labelClass = 'text-muted-foreground/90 tracking-tight';
 const selectClass =
-  'w-full mt-1 rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
+  'w-full mt-1 rounded-md transition-[border-color,box-shadow] duration-[var(--sumi-duration-normal)]';
 
 export function TrackSearchFiltersBasic({
   filters,
@@ -28,7 +28,7 @@ export function TrackSearchFiltersBasic({
   onClear,
 }: TrackSearchFiltersBasicProps) {
   return (
-    <div className="flex flex-wrap gap-4 items-end transition-opacity duration-[var(--duration-normal)]">
+    <div className="flex flex-wrap gap-4 items-end transition-opacity duration-[var(--sumi-duration-normal)]">
       <div className="flex-1 min-w-48">
         <Label htmlFor="genre" className={labelClass}>
           Genre
@@ -94,7 +94,7 @@ export function TrackSearchFiltersBasic({
           variant="outline"
           size="sm"
           onClick={onClear}
-          className="mb-0 rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
+          className="mb-0 rounded-md transition-[color,transform] duration-[var(--sumi-duration-normal)] active:scale-95"
         >
           <X className="h-4 w-4 mr-2 text-muted-foreground/90" />
           Réinitialiser
diff --git a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersSkeleton.tsx b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersSkeleton.tsx
index 8fabb73e4..71b5920f8 100644
--- a/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersSkeleton.tsx
+++ b/apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersSkeleton.tsx
@@ -15,7 +15,7 @@ export function TrackSearchFiltersSkeleton({
   return (
     <div
       className={cn(
-        'space-y-4 transition-opacity duration-[var(--duration-normal)]',
+        'space-y-4 transition-opacity duration-[var(--sumi-duration-normal)]',
         className,
       )}
     >
diff --git a/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageCoverAndActions.tsx b/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageCoverAndActions.tsx
index 74f4d402d..dab0ca978 100644
--- a/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageCoverAndActions.tsx
+++ b/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageCoverAndActions.tsx
@@ -48,7 +48,7 @@ export function TrackDetailPageCoverAndActions({
           className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/60 cursor-pointer"
           aria-label={isCurrentlyPlaying ? 'Pause' : 'Play'}
         >
-          <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center shadow-button-primary-glow transition-transform duration-300 hover:scale-110">
+          <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center shadow-sm transition-transform duration-300">
             {isCurrentlyPlaying ? (
               <Pause className="h-7 w-7 text-primary-foreground fill-current" />
             ) : (
@@ -65,7 +65,7 @@ export function TrackDetailPageCoverAndActions({
             <Button
               onClick={onPause}
               size="lg"
-              className="flex-1 h-12 bg-primary text-primary-foreground font-bold rounded-full shadow-button-primary-glow hover:shadow-button-primary-glow-hover hover:brightness-110 transition-all duration-300"
+              className="flex-1 h-12 bg-primary text-primary-foreground font-bold rounded-full shadow-sm hover:brightness-110 transition-all duration-300"
             >
               <Pause className="h-5 w-5 mr-2 fill-current" /> Pause
             </Button>
@@ -73,7 +73,7 @@ export function TrackDetailPageCoverAndActions({
             <Button
               onClick={onPlay}
               size="lg"
-              className="flex-1 h-12 bg-primary text-primary-foreground font-bold rounded-full shadow-button-primary-glow hover:shadow-button-primary-glow-hover hover:brightness-110 transition-all duration-300"
+              className="flex-1 h-12 bg-primary text-primary-foreground font-bold rounded-full shadow-sm hover:brightness-110 transition-all duration-300"
             >
               <Play className="h-5 w-5 mr-2 fill-current" /> Play
             </Button>
diff --git a/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageSkeleton.tsx b/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageSkeleton.tsx
index fc0db15bd..2eab83ec6 100644
--- a/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageSkeleton.tsx
+++ b/apps/web/src/features/tracks/pages/track-detail-page/TrackDetailPageSkeleton.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export function TrackDetailPageSkeleton() {
   return (
-    <div className="min-h-layout-page pb-24 relative overflow-hidden bg-background transition-opacity duration-[var(--duration-normal)]">
+    <div className="min-h-layout-page pb-24 relative overflow-hidden bg-background transition-opacity duration-[var(--sumi-duration-normal)]">
       {/* Hero background shimmer */}
       <div className="absolute inset-0 h-layout-lyrics bg-muted/30 pointer-events-none" />