refactor: reorganizing the App.css styles

src/styles/App.css

@@ -1,17 +1,36 @@
-html {
+/* ─── Design Tokens ─────────────────────────────────── */
-    font-family: Arial, sans-serif;
+:root {
+    --color-border: #ccc;
+    --color-bg-sidebar: #eee;
+    --sidebar-width: 250px;
+    --gap-nav: 1rem;
 }
 
+/* ─── Base ───────────────────────────────────────────── */
+html,
+body {
+    font-family: system-ui, Arial, sans-serif;
+}
+
+/* ─── Layout ─────────────────────────────────────────── */
 #root {
-    min-height: 100vh;
     display: flex;
+    min-height: 100vh;
+}
+
+.app-body {
+    display: flex;
+    flex: 1;
 }
 
 header {
-    flex-basis: 250px;
+    flex: 0 0 var(--sidebar-width);
     padding: 1rem;
-    border-right: 3px solid #ccc;
+    display: flex;
-    background-color: #eee;
+    flex-direction: column;
+    gap: var(--gap-nav);
+    border-right: 3px solid var(--color-border);
+    background-color: var(--color-bg-sidebar);
 }
 
 main {
@@ -20,16 +39,31 @@ main {
 }
 
 footer {
-    padding-block: 0.5rem;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-
+    margin: 0 auto;
-    display: flex;
+    padding-block: 0.5rem;
-    justify-content: center;
+    text-align: center;
 }
 
+/* ─── Navigation ─────────────────────────────────────── */
+nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-nav);
+}
+
+ul {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    list-style: none;
+}
+
+/* ─── Form & Interactive Elements ────────────────────── */
 a,
 input,
 button,
@@ -39,8 +73,3 @@ textarea {
     font-size: inherit;
     color: inherit;
 }
-
-ul {
-    list-style: none;
-    padding: 0;
-}