1.1

public/styles/variables.css

@@ -1,11 +1,36 @@
-:root{
-    --background-color : #0F172A;
-    --infos-box-color: #f1f1f1 ;
-    --title-color: ;
-    --subtitle-color : #a3aab4;
-    --mp3-text-color: #0F172A;
-    --default-text-color: #F8FAFC;
+:root {
+  /* Couleurs générales */
+  --background-color: #001224;            /* body background bleu nuit */
+  --default-text-color: #eee;             /* texte clair principal */
+  --subtitle-color: #007bff;              /* sous-titres, header p */
+  --mp3-text-color: #000000;              /* couleur texte checkbox inline */
 
-    --checkbox-pulse-color:#9bbcf1;
+  /* Formulaire */
+  --form-bg-color: #ffffff;               /* fond du formulaire */
+  --form-input-bg-color: #f9f9f9;         /* fond inputs */
+  --form-input-border-color: #cccccc;     /* bordure inputs */
+  --form-input-border-focus-color: #0056b3; /* bordure focus */
+  --form-input-text-color: #333333;       /* texte inputs */
+  --form-input-placeholder-color: #aaaaaa; /* placeholder */
+  --form-button-bg-color: #007bff;         /* bouton bg */
+  --form-button-text-color: #ffffff;       /* texte bouton */
+  --form-button-bg-hover-color: #0056b3;   /* bouton hover */
 
-}
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #3B82F6;
+  --checkbox-checkmark-border-color: #E0E0E2;
+  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #f0f0f0;
+  --video-info-text-color: #222222;
+  --video-info-heading-color: #007bff;
+  --video-info-list-color: #444444;
+  --video-info-list-strong-color: #000000;
+  --video-info-link-color: #007bff;
+  --video-info-link-hover-color: #0056b3;
+}