restructur root and body var for heading, refactor footer code, add new bg and fontsize

public/css/app.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 
 /*!
  * Bootstrap  v5.3.2 (https://getbootstrap.com/)
@@ -165,15 +166,38 @@ [data-bs-theme=light] {
     --bs-black-rgb: 0, 0, 0;
 
     /* =========================================
-       4. TYPOGRAPHY (Pengaturan Font)
+       4. TYPOGRAPHY SYSTEM (Poppins)
        ========================================= */
-    --bs-body-font-family: "Nunito";
-    --bs-body-font-size: 1rem;
-    --bs-body-font-weight: 400;
-    --bs-body-line-height: 1.5;
+    /* A. FONT FAMILY UTAMA */
+    --bs-body-font-family: 'Poppins', sans-serif;
+    --bs-font-sans-serif: 'Poppins', sans-serif;
 
-    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    /* B. FONT SIZES (Ukuran) */
+    --fs-display: 2.5rem;
+    /* Judul Besar (Dashboard Number) */
+    --fs-h1: 2rem;
+    /* Judul Halaman */
+    --fs-h2: 1.5rem;
+    /* Sub-judul / Card Title */
+    --fs-h3: 1.25rem;
+    /* Section Title */
+    --fs-body: 1rem;
+    /* Teks Normal (16px) */
+    --fs-small: 0.875rem;
+    /* Teks Kecil / Placeholder (14px) */
+    --fs-tiny: 0.75rem;
+    /* Caption sangat kecil (12px) */
+
+    /* C. FONT WEIGHTS (Ketebalan) */
+    --fw-light: 300;
+    --fw-regular: 400;
+    --fw-medium: 500;
+    --fw-semibold: 600;
+    --fw-bold: 700;
+
+    /* D. LINE HEIGHT (Jarak Antar Baris) */
+    --bs-body-line-height: 1.6;
+    /* Poppins butuh napas lebih lega drpd Nunito */
 
     /* =========================================
        5. BODY & BACKGROUND (Warna Dasar Web)
@@ -184,7 +208,7 @@ [data-bs-theme=light] {
     --bs-body-color: #607080;
     /* Warna Teks Paragraf */
     --bs-body-color-rgb: 96, 112, 128;
-    --bs-heading-color: #25396f;
+    --bs-heading-color: black;
     /* Warna Judul (H1-H6) - Biru Gelap */
 
     /* =========================================
@@ -293,17 +317,21 @@ @media (prefers-reduced-motion: no-preference) {
     }
 }
 
+/* =========================================
+   1. GLOBAL BODY STYLES
+   ========================================= */
 body {
     margin: 0;
     font-family: var(--bs-body-font-family);
-    font-size: var(--bs-body-font-size);
-    font-weight: var(--bs-body-font-weight);
+    font-size: var(--fs-body);
+    font-weight: var(--fw-regular);
     line-height: var(--bs-body-line-height);
     color: var(--bs-body-color);
-    text-align: var(--bs-body-text-align);
-    background-color: var(--bs-body-bg);
+    text-align: left;
+    background-color: rgba(var(--bs-primary-rgb), 0.04);
+
     -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 hr {
@@ -314,6 +342,11 @@ hr {
     opacity: .25
 }
 
+/* =========================================
+   2. HEADING STYLES (JUDUL) - RESPONSIVE VERSION
+   ========================================= */
+
+/* 1. Setting Dasar (Warna & Ketebalan) */
 h6,
 .h6,
 h5,
@@ -328,71 +361,73 @@ h1,
 .h1 {
     margin-top: 0;
     margin-bottom: .5rem;
-    font-weight: 700;
+    font-weight: var(--fw-bold);
+    /* Pakai Variable Bold (700) */
     line-height: 1.2;
-    color: var(--bs-heading-color)
+    color: var(--bs-heading-color);
+    /* Warna Biru Gelap */
 }
 
 h1,
 .h1 {
-    font-size: calc(1.375rem + 1.5vw)
+    font-size: calc(1.375rem + 1.5vw);
 }
 
 @media (min-width: 1200px) {
 
     h1,
     .h1 {
-        font-size: 2.5rem
+        font-size: var(--fs-h1);
     }
 }
 
 h2,
 .h2 {
-    font-size: calc(1.325rem + .9vw)
+    font-size: calc(1.325rem + .9vw);
 }
 
 @media (min-width: 1200px) {
 
     h2,
     .h2 {
-        font-size: 2rem
+        font-size: var(--fs-h2);
     }
 }
 
 h3,
 .h3 {
-    font-size: calc(1.3rem + .6vw)
+    font-size: calc(1.3rem + .6vw);
 }
 
 @media (min-width: 1200px) {
 
     h3,
     .h3 {
-        font-size: 1.75rem
+        font-size: var(--fs-h3);
     }
 }
 
 h4,
 .h4 {
-    font-size: calc(1.275rem + .3vw)
+    font-size: calc(1.275rem + .3vw);
 }
 
 @media (min-width: 1200px) {
 
     h4,
     .h4 {
-        font-size: 1.5rem
+        font-size: 1.5rem;
     }
 }
 
 h5,
 .h5 {
-    font-size: 1.25rem
+    font-size: 1.25rem;
 }
 
 h6,
 .h6 {
-    font-size: 1rem
+    font-size: var(--fs-small);
 }
 
 p {
@@ -838,8 +873,10 @@ .blockquote-footer:before {
 }
 
 .footer-full {
-    background-color: #ffffff;
-    padding: 1.5rem;
+    background-color: var(--bs-primary);
+    color: white;
+    font-size: var(--fs-small);
+    padding: 1rem;
     margin-top: 2rem;
     margin-left: -2rem;
     margin-right: -2rem;