Refactor CSS for theme variables and styles

Author: Hamad-Rashid

style.css

@@ -1,47 +1,81 @@
+/* ======================
+   THEME VARIABLES
+====================== */
+
+:root {
+    --bg: #0f172a;
+    --text: #e5e7eb;
+    --card: #020617;
+    --muted: #94a3b8;
+    --accent: #38bdf8;
+    --border: #1e293b;
+}
+
+[data-theme="light"] {
+    --bg: #ffffff;
+    --text: #0f172a;
+    --card: #f8fafc;
+    --muted: #475569;
+    --accent: #2563eb;
+    --border: #e2e8f0;
+}
+
+/* ======================
+   BASE STYLES
+====================== */
+
+* {
+    box-sizing: border-box;
+}
+
 body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-    background: #0f172a;
-    color: #e5e7eb;
     margin: 0;
-    line-height: 1.6;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.7;
+    transition: background 0.3s ease, color 0.3s ease;
 }
 
 header {
     text-align: center;
-    padding: 4rem 1rem;
+    padding: 4rem 1rem 3rem;
+    border-bottom: 1px solid var(--border);
 }
 
 h1 {
     font-size: 3rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
 }
 
 .subtitle {
     font-size: 1.3rem;
-    color: #38bdf8;
+    color: var(--accent);
 }
 
 .tagline {
-    max-width: 600px;
+    max-width: 650px;
     margin: 1rem auto;
+    color: var(--muted);
 }
 
 .links a {
     margin: 0 10px;
-    color: #38bdf8;
+    color: var(--accent);
     text-decoration: none;
     font-weight: 500;
 }
 
 section {
     max-width: 900px;
     margin: auto;
-    padding: 2rem 1rem;
+    padding: 2.5rem 1.2rem;
 }
 
 h2 {
-    border-bottom: 1px solid #334155;
+    border-bottom: 1px solid var(--border);
     padding-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
 }
 
 ul {
@@ -50,11 +84,34 @@ ul {
 }
 
 li {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.6rem;
 }
 
 footer {
     text-align: center;
     padding: 2rem;
-    color: #94a3b8;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+}
+
+/* ======================
+   THEME TOGGLE BUTTON
+====================== */
+
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 8px 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.theme-toggle:hover {
+    background: var(--accent);
+    color: #fff;
 }