From c5b4b44bb8198edd35da020414a61e954ffb6d67 Mon Sep 17 00:00:00 2001
From: Thibault Pouch <thibault.pouch@epitech.eu>
Date: Wed, 18 Feb 2026 12:38:18 +0100
Subject: [PATCH] refactor: Update font styles and improve button sizing for
 better UI consistency

---
 nest-front/client/src/index.css | 35 +++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/nest-front/client/src/index.css b/nest-front/client/src/index.css
index 08f3121..d343e8f 100644
--- a/nest-front/client/src/index.css
+++ b/nest-front/client/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Courier+Prime:wght@400;700&family=Share+Tech+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
 @import "tailwindcss";
 
 /* ── Design Tokens — White Theme ─────────────────── */
@@ -36,8 +36,8 @@
   --color-amber:       #d97706;
   --color-amber-dim:   #b45309;
 
-  --font-mono:    'Share Tech Mono', 'Courier Prime', monospace;
-  --font-heading: 'VT323', 'Press Start 2P', monospace;
+  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
+  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 /* ── Base ──────────────────────────────────────────────── */
@@ -54,10 +54,13 @@ body {
   background-color: var(--color-bg);
   color: var(--color-text);
   font-family: var(--font-mono);
+  font-size: 17px;
   min-height: 100vh;
   overflow-x: hidden;
-  line-height: 1.6;
+  line-height: 1.7;
   display: block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #root {
@@ -73,8 +76,8 @@ body {
 /* ── Typography ────────────────────────────────────────── */
 h1, h2, h3, h4, h5 {
   font-family: var(--font-heading);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: -0.02em;
   margin: 0;
 }
 
@@ -138,17 +141,18 @@ a:hover { color: var(--color-yellow-dim); }
   background: var(--color-bg);
   border: 2px solid var(--color-yellow);
   color: var(--color-yellow);
-  padding: 0.4rem 1.1rem;
+  padding: 0.6rem 1.3rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  font-size: 0.85rem;
+  gap: 0.5rem;
+  font-size: 1rem;
   border-radius: 6px;
   text-decoration: none;
+  font-weight: 500;
 }
 .btn-terminal::before { display: none; }
 .btn-terminal:hover {
@@ -181,8 +185,8 @@ a:hover { color: var(--color-yellow-dim); }
   border-radius: 6px;
   color: var(--color-text);
   font-family: var(--font-mono);
-  font-size: 0.9rem;
-  padding: 0.4rem 0.7rem;
+  font-size: 1.05rem;
+  padding: 0.6rem 0.9rem;
   width: 100%;
   transition: border-color 0.15s, box-shadow 0.15s;
   outline: none;
@@ -203,10 +207,11 @@ a:hover { color: var(--color-yellow-dim); }
 /* ── Section label ─────────────────────────────────────── */
 .section-label {
   font-family: var(--font-mono);
-  font-size: 0.72rem;
+  font-size: 0.85rem;
+  font-weight: 500;
   color: var(--color-text-dim);
   text-transform: uppercase;
-  letter-spacing: 0.2em;
+  letter-spacing: 0.15em;
   margin-bottom: 0.5rem;
 }
 
@@ -222,8 +227,8 @@ a:hover { color: var(--color-yellow-dim); }
 /* ── Status badges — clean style ──────────────────────── */
 .badge {
   font-family: var(--font-mono);
-  font-size: 0.65rem;
-  padding: 0.1rem 0.45rem;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   border-radius: 4px;