style(ui): update semantic color variants to use opacity-based tailwind classes

src/shared/components/Button.js

@@ -20,10 +20,10 @@ const Button = ({
     const variants = {
         primary: 'bg-neutral-900 text-white hover:bg-neutral-800 focus:ring-neutral-900/20 dark:bg-white dark:text-black dark:hover:bg-neutral-100 dark:focus:ring-white/20',
         secondary: 'bg-transparent border border-neutral-300 text-neutral-700 hover:bg-neutral-100 focus:ring-neutral-500/20 dark:bg-neutral-800/60 dark:border-neutral-700/50 dark:text-white dark:hover:bg-neutral-800/80 dark:focus:ring-neutral-600/20',
-        danger: 'bg-red-50 border border-red-200 text-red-700 hover:bg-red-100 focus:ring-red-500/20 dark:bg-red-500/20 dark:border-red-500/30 dark:text-red-400 dark:hover:bg-red-500/30 dark:focus:ring-red-500/20',
+        danger: 'bg-red-700/10 border border-red-800/30 text-red-700 hover:bg-red-700/15 focus:ring-red-700/20 dark:bg-red-600/10 dark:border-red-600/20 dark:text-red-600 dark:hover:bg-red-600/15 dark:focus:ring-red-600/20',
         ghost: 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20 dark:text-neutral-400 dark:hover:text-white dark:hover:bg-neutral-700/30 dark:focus:ring-neutral-600/20',
-        success: 'bg-green-50 border border-green-200 text-green-700 hover:bg-green-100 focus:ring-green-500/20 dark:bg-green-500/20 dark:border-green-500/30 dark:text-green-400 dark:hover:bg-green-500/30 dark:focus:ring-green-500/20',
+        success: 'bg-green-700/10 border border-green-800/30 text-green-700 hover:bg-green-700/15 focus:ring-green-700/20 dark:bg-green-600/10 dark:border-green-600/20 dark:text-green-600 dark:hover:bg-green-600/15 dark:focus:ring-green-600/20',
-        warning: 'bg-yellow-50 border border-yellow-200 text-yellow-700 hover:bg-yellow-100 focus:ring-yellow-500/20 dark:bg-yellow-500/20 dark:border-yellow-500/30 dark:text-yellow-400 dark:hover:bg-yellow-500/30 dark:focus:ring-yellow-500/20'
+        warning: 'bg-yellow-700/10 border border-yellow-800/30 text-yellow-700 hover:bg-yellow-700/15 focus:ring-yellow-700/20 dark:bg-yellow-600/10 dark:border-yellow-600/20 dark:text-yellow-600 dark:hover:bg-yellow-600/15 dark:focus:ring-yellow-600/20'
     };
 
     const sizes = {

src/shared/components/Card.js

@@ -24,10 +24,10 @@ const Card = ({
         outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50',
         solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700',
         lightDark: 'rounded-xl bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50',
-        success: 'rounded-xl bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50',
+        success: 'rounded-xl bg-green-700/10 dark:bg-green-600/10 border-green-800/30 dark:border-green-600/20',
-        info: 'rounded-xl bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50',
+        info: 'rounded-xl bg-blue-700/10 dark:bg-blue-600/10 border-blue-800/30 dark:border-blue-600/20',
-        warning: 'rounded-xl bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50',
+        warning: 'rounded-xl bg-yellow-700/10 dark:bg-yellow-600/10 border-yellow-800/30 dark:border-yellow-600/20',
-        danger: 'rounded-xl bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50'
+        danger: 'rounded-xl bg-red-700/10 dark:bg-red-600/10 border-red-800/30 dark:border-red-600/20'
     };
 
     const variantsHover = {
@@ -36,10 +36,10 @@ const Card = ({
         outline: 'hover:border-neutral-400 dark:hover:border-neutral-600/50',
         solid: 'hover:bg-neutral-200 dark:hover:bg-neutral-700/80',
         lightDark: 'hover:bg-neutral-50/90 hover:border-neutral-300/80 dark:hover:bg-neutral-900/50 dark:hover:border-neutral-700/50',
-        success: 'hover:bg-green-100 dark:hover:bg-green-900/40 hover:border-green-300 dark:hover:border-green-900/50',
+        success: 'hover:bg-green-700/15 dark:hover:bg-green-600/15 hover:border-green-800/40 dark:hover:border-green-600/30',
-        info: 'hover:bg-blue-100 dark:hover:bg-blue-900/40 hover:border-blue-300 dark:hover:border-blue-900/50',
+        info: 'hover:bg-blue-700/15 dark:hover:bg-blue-600/15 hover:border-blue-800/40 dark:hover:border-blue-600/30',
-        warning: 'hover:bg-yellow-100 dark:hover:bg-yellow-900/40 hover:border-yellow-300 dark:hover:border-yellow-900/50',
+        warning: 'hover:bg-yellow-700/15 dark:hover:bg-yellow-600/15 hover:border-yellow-800/40 dark:hover:border-yellow-600/30',
-        danger: 'hover:bg-red-100 dark:hover:bg-red-900/40 hover:border-red-300 dark:hover:border-red-900/50'
+        danger: 'hover:bg-red-700/15 dark:hover:bg-red-600/15 hover:border-red-800/40 dark:hover:border-red-600/30'
     };
     
     const paddings = {

src/shared/components/PasswordStrengthIndicator.js

@@ -99,15 +99,15 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
     switch (strength) {
       case 0:
       case 1:
-        return 'text-red-700 dark:text-red-400';
+        return 'text-red-700 dark:text-red-600';
       case 2:
-        return 'text-orange-700 dark:text-orange-400';
+        return 'text-orange-700 dark:text-orange-600';
       case 3:
-        return 'text-yellow-700 dark:text-yellow-500';
+        return 'text-yellow-700 dark:text-yellow-600';
       case 4:
-        return 'text-blue-700 dark:text-blue-400';
+        return 'text-blue-700 dark:text-blue-600';
       case 5:
-        return 'text-green-700 dark:text-green-400';
+        return 'text-green-700 dark:text-green-600';
       default:
         return 'text-neutral-600 dark:text-neutral-400';
     }
@@ -144,7 +144,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
             {!requirements.length && (
               <div className="flex items-center space-x-2">
                 <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
-                <span className="text-xs text-red-700 dark:text-red-400">
+                <span className="text-xs text-red-700 dark:text-red-600">
                   Au moins 8 caractères
                 </span>
               </div>
@@ -152,7 +152,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
             {!requirements.maxLength && (
               <div className="flex items-center space-x-2">
                 <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
-                <span className="text-xs text-red-700 dark:text-red-400">
+                <span className="text-xs text-red-700 dark:text-red-600">
                   Maximum 128 caractères
                 </span>
               </div>
@@ -160,7 +160,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
             {!requirements.uppercase && (
               <div className="flex items-center space-x-2">
                 <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
-                <span className="text-xs text-red-700 dark:text-red-400">
+                <span className="text-xs text-red-700 dark:text-red-600">
                   Au moins une majuscule
                 </span>
               </div>
@@ -168,7 +168,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
             {!requirements.lowercase && (
               <div className="flex items-center space-x-2">
                 <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
-                <span className="text-xs text-red-700 dark:text-red-400">
+                <span className="text-xs text-red-700 dark:text-red-600">
                   Au moins une minuscule
                 </span>
               </div>
@@ -176,7 +176,7 @@ export default function PasswordStrengthIndicator({ password = '', showRequireme
             {!requirements.number && (
               <div className="flex items-center space-x-2">
                 <div className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-red-500" />
-                <span className="text-xs text-red-700 dark:text-red-400">
+                <span className="text-xs text-red-700 dark:text-red-600">
                   Au moins un chiffre
                 </span>
               </div>

src/shared/components/Switch.js

@@ -27,9 +27,9 @@ const Switch = ({
         aria-checked={checked}
         disabled={disabled}
         onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked); }}
-        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
+        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
           checked
-            ? 'bg-blue-600'
+            ? 'bg-blue-700'
             : 'bg-neutral-300 dark:bg-neutral-600'
         } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
       >

src/shared/components/TagInput.js

@@ -102,7 +102,7 @@ const TagInput = ({
       <div
         className={`relative min-h-[42px] w-full flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-xl border text-sm bg-white dark:bg-neutral-900 cursor-text transition-shadow ${
           isOpen
-            ? 'border-blue-500 ring-2 ring-blue-500/20'
+            ? 'border-blue-700 ring-2 ring-blue-700/20'
             : error
             ? 'border-red-400 dark:border-red-500'
             : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'