Update CSS text variables

src/views/Home.vue

@@ -2,11 +2,12 @@
   <h1 class="sr-only">{{ data.content.title }}</h1>
   <div class="with-sidebar">  
     <Menu />
-    <!-- TODO: convert to Tabs.vue component -->
+    <!-- TODO: convert to TabList.vue component -->
     <main>
       <h2 id="tabslist" class="sr-only">Projets</h2>
       <header role="tablist"
               aria-labelledby="tablist">
+        <!-- Tab.vue -->
         <button id="projets-en-cours-label"
                 type="button"
                 role="tab"
@@ -30,6 +31,7 @@
           <span class="count">8</span>
         </button>
       </header>
+      <!-- TabPanel.vue -->
       <section id="projets-en-cours"
                role="tabpanel"
                tabindex="0"
@@ -78,7 +80,7 @@
   </div>
 </template>
 
-<style>
+<style scoped>
 
   /* TABS */
 
@@ -99,7 +101,7 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    font-size: var(--text-lg);
+    font-size: var(--text-md);
     border-radius: var(--rounded-full);
     background-color: var(--background, var(--color-background));
     color: var(--color, var(--color-text));
@@ -119,6 +121,7 @@
     font-family: var(--font-serif);
   }
   [role="tab"] .count {
+    font-size: var(--text-sm);
     font-weight: 500;
   }
 
@@ -160,7 +163,7 @@
   }
   .project-item h3 {
     font-family: var(--font-serif);
-    font-size: var(--text-xl);
+    font-size: var(--text-lg);
     margin-bottom: var(--space-sm);
   }
   .project-item p {