From bc7d5106dccdd23c6d38b9a709f5635ac101de6a Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 15:07:02 -0700
Subject: [PATCH] modern theme

---
 src/app.css                            | 116 +++++++++++++++++--------
 src/lib/components/Header.svelte       |  19 ++--
 src/lib/components/ProblemTable.svelte |  38 ++++----
 src/lib/components/TopicSidebar.svelte |  26 +++---
 tailwind.config.js                     |  46 ++++++++++
 5 files changed, 168 insertions(+), 77 deletions(-)
 create mode 100644 tailwind.config.js

diff --git a/src/app.css b/src/app.css
index 14a18ea..89899b1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,34 +1,38 @@
 @import '@fontsource/fira-mono';
 
+/* Import fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+
 @import 'tailwindcss';
 
 @layer theme {
   :root {
     /* Fonts */
     --font-sans:
-      Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
       'Open Sans', 'Helvetica Neue', sans-serif;
-    --font-mono: 'Fira Mono', monospace;
+    --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
 
-    /* Colors */
+    /* Colors - Clean White Theme with Sleek Accents */
     --color-white: oklch(1 0 0);
-    --color-black: oklch(0 0 0);
-    --color-primary: oklch(0.12 0 0);
-    --color-secondary: oklch(0.19 0 0);
-    --color-tertiary: oklch(0.28 0 0);
-    --color-accent: oklch(0.65 0.26 296.88);
-    --color-heading: oklch(1 0 0 / 0.87);
-    --color-text: oklch(1 0 0 / 0.6);
-    --color-text-muted: oklch(1 0 0 / 0.4);
-    --color-background: oklch(0.19 0 0 / 0.7);
-    --color-border: oklch(0.44 0 0);
-    --color-link: oklch(0.65 0.26 296.88);
-    --color-link-subtle: oklch(0.8 0.1 296.88);
-    --color-link-nav: oklch(1 0 0 / 0.8);
-    --color-username: oklch(0.65 0.26 296.88); /* Purple color for usernames */
+    --color-black: oklch(0.15 0 0);
+    --color-primary: oklch(0.99 0.005 250); /* Pure white background */
+    --color-secondary: oklch(1 0 0); /* White for cards */
+    --color-tertiary: oklch(0.97 0.01 250); /* Very light gray for hover states */
+    --color-accent: oklch(0.5 0.2 250); /* Blue accent */
+    --color-heading: oklch(0.15 0 0 / 0.95); /* Near black text for headings */
+    --color-text: oklch(0.25 0 0 / 0.9); /* Dark text for better readability */
+    --color-text-muted: oklch(0.45 0 0 / 0.6); /* Muted text */
+    --color-background: oklch(0.99 0.005 250); /* Pure white background */
+    --color-border: oklch(0.9 0.01 250); /* Very light gray border */
+    --color-link: oklch(0.5 0.2 250); /* Blue for links */
+    --color-link-subtle: oklch(0.6 0.1 250); /* Lighter blue for subtle links */
+    --color-link-nav: oklch(0.25 0 0 / 0.9); /* Dark text for nav links */
+    --color-username: oklch(0.5 0.2 250); /* Blue for usernames */
     --color-solved-row: color-mix(
       in oklab,
-      rgb(34 197 94) 15%,
+      rgb(34 197 94) 12%,
       transparent
     ); /* Light green for solved rows */
 
@@ -48,18 +52,19 @@
     --spacing: 0.25rem;
 
     /* Shadows */
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08);
+    --shadow-accent: 0 2px 8px rgba(0, 100, 255, 0.1);
 
     /* Border radius */
     --rounded-sm: 0.125rem;
-    --rounded: 0.25rem;
-    --rounded-md: 0.375rem;
-    --rounded-lg: 0.5rem;
-    --rounded-xl: 0.75rem;
-    --rounded-2xl: 1rem;
+    --rounded: 0.125rem;
+    --rounded-md: 0.25rem;
+    --rounded-lg: 0.25rem;
+    --rounded-xl: 0.375rem;
+    --rounded-2xl: 0.5rem;
     --rounded-full: 9999px;
   }
 }
@@ -74,6 +79,8 @@ body {
   background-color: var(--color-primary);
   color: var(--color-text);
   overscroll-behavior: none;
+  font-family: var(--font-sans);
+  line-height: 1.6;
 }
 
 #app {
@@ -111,12 +118,13 @@ h2 {
 pre {
   font-size: 1rem;
   font-family: var(--font-mono);
-  background-color: color-mix(in oklab, black 30%, transparent);
-  border-radius: 0.25rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
+  background-color: color-mix(in oklab, var(--color-tertiary) 80%, transparent);
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  padding: 1rem;
   overflow-x: auto;
   color: var(--color-heading);
+  border: 1px solid var(--color-border);
 }
 
 input,
@@ -128,7 +136,10 @@ button {
 a {
   color: var(--color-text);
   text-decoration: none;
-  transition: color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease;
+  position: relative;
 }
 
 a:hover {
@@ -141,6 +152,7 @@ a.link-accent,
 .content a,
 nav.main-nav a {
   color: var(--color-accent);
+  position: relative;
 }
 
 a.link-accent:hover,
@@ -149,6 +161,20 @@ nav.main-nav a:hover {
   color: color-mix(in oklab, var(--color-accent) 80%, white);
 }
 
+/* Simple hover effect for accent links */
+a.link-accent,
+.content a {
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.2s ease;
+}
+
+a.link-accent:hover,
+.content a:hover {
+  border-bottom: 1px solid var(--color-accent);
+  text-decoration: none;
+}
+
 /* Table links - more subtle styling for dense information displays */
 .table a,
 table a {
@@ -190,10 +216,16 @@ img {
 /* Component styles */
 .card {
   background-color: var(--color-secondary);
-  border-radius: 0.5rem;
+  border-radius: var(--rounded);
   padding: 1.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  transition: box-shadow 0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
 }
 
 .table {
@@ -204,25 +236,33 @@ img {
 .table th {
   text-align: left;
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
   color: var(--color-heading);
+  font-weight: 600;
 }
 
 .table td {
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .table tr:hover {
   background-color: var(--color-tertiary);
+  transition: background-color 0.2s ease;
 }
 
 .badge {
   display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--rounded);
   font-size: 0.75rem;
   font-weight: 600;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease;
+}
+
+.badge:hover {
+  box-shadow: var(--shadow);
 }
 
 .badge-easy {
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index bf7cbd1..b10be2d 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -123,7 +123,9 @@ $: if ($page) {
 }
 </script>
 
-<header class="sticky top-0 z-50 w-full bg-[var(--color-secondary)] py-3 shadow-sm">
+<header
+  class="sticky top-0 z-50 w-full border-b border-[var(--color-border)] bg-[var(--color-secondary)] py-3 shadow-sm"
+>
   <div class="mx-auto flex max-w-[1200px] items-center justify-between px-3 sm:px-4 md:px-5">
     <div class="flex items-center">
       <a
@@ -140,7 +142,7 @@ $: if ($page) {
 
     <!-- Mobile menu button -->
     <button
-      class="flex items-center rounded-md border border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] lg:hidden"
+      class="flex items-center rounded border border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] transition-colors duration-200 hover:bg-[var(--color-tertiary)] lg:hidden"
       aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
       on:click={toggleMobileMenu}
     >
@@ -264,7 +266,7 @@ $: if ($page) {
               </svg>
             </a>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:border-[var(--color-accent)] hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
@@ -272,7 +274,7 @@ $: if ($page) {
           </div>
         {:else}
           <button
-            class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+            class="cursor-pointer rounded border border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:opacity-90"
             on:click={handleLogin}
             title="Login with GitHub"
           >
@@ -286,7 +288,7 @@ $: if ($page) {
   <!-- Mobile menu -->
   {#if mobileMenuOpen}
     <div
-      class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-md lg:hidden"
+      class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-sm lg:hidden"
     >
       <nav class="flex flex-col gap-4">
         <ul class="m-0 flex list-none flex-col gap-4 p-0">
@@ -367,14 +369,14 @@ $: if ($page) {
               </a>
             </div>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:border-[var(--color-accent)] hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
             </button>
           {:else}
             <button
-              class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+              class="cursor-pointer rounded border border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:opacity-90"
               on:click={handleLogin}
               title="Login with GitHub"
             >
@@ -410,9 +412,10 @@ header {
   right: 0;
 }
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
+  position: relative;
 }
 
 a[href*='github.com']:hover {
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index d068212..a93f82b 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -127,14 +127,16 @@ function getDifficultyTooltip(problem: Problem): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <div
+    class="table-wrapper overflow-hidden rounded border border-[var(--color-border)] bg-[var(--color-secondary)] shadow-sm"
+  >
     <table
       class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
     >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_20%,transparent)]"
             on:click={handleSolvedFilter}
             title="Filter by solved status"
           >
@@ -194,7 +196,7 @@ function getDifficultyTooltip(problem: Problem): string {
             </div>
           </th>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_20%,transparent)]"
             on:click={handleSourceFilter}
             title="Filter by source"
           >
@@ -240,7 +242,7 @@ function getDifficultyTooltip(problem: Problem): string {
             >Problem</th
           >
           <th
-            class="sticky top-0 z-10 w-[10%] cursor-pointer bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[10%] cursor-pointer bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_20%,transparent)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -285,16 +287,16 @@ function getDifficultyTooltip(problem: Problem): string {
             class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0
             ${problem.id && userSolvedProblems.has(problem.id)
               ? 'border-l-4 border-l-[rgb(34_197_94)] bg-[var(--color-solved-row)]'
-              : 'hover:bg-black/5'}"
+              : 'hover:bg-[var(--color-tertiary)]'}"
           >
             <td class="p-3 text-center">
               {#if problem.id}
                 {@const isSolved = userSolvedProblems.has(problem.id)}
                 <button
-                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full shadow-sm transition-all duration-300
+                  class={`flex h-7 w-7 cursor-pointer items-center justify-center rounded shadow-sm transition-all duration-300
                     ${isSolved
-                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_4px_rgba(34,197,94,0.2)]'
+                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_15%,transparent)] hover:text-[rgb(34_197_94)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleSolved(problem.id!, !isSolved)}
                   title={!isAuthenticated
@@ -344,14 +346,14 @@ function getDifficultyTooltip(problem: Problem): string {
             </td>
             <td class="p-3 text-center">
               <span
-                class="group relative inline-block rounded px-2 py-1 font-bold
-                  text-white
+                class="group relative inline-block rounded px-2 py-1 font-medium
+                  text-white shadow-sm
                    {problem.source === 'codeforces' ? 'cursor-default' : 'cursor-help'}"
                 style="background-color: var(--color-{getRatingColor(problem.difficulty)})"
               >
                 {problem.difficulty}
                 <span
-                  class="invisible absolute bottom-full left-1/2 z-50 -translate-x-1/2 transform rounded-md border border-[var(--color-border)] bg-[var(--color-secondary)] text-left text-xs leading-relaxed font-normal whitespace-pre-line text-[var(--color-text)] opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100 {problem.source === 'codeforces'
+                  class="invisible absolute bottom-full left-1/2 z-50 -translate-x-1/2 transform rounded border border-[var(--color-border)] bg-[var(--color-secondary)] text-left text-xs leading-relaxed font-normal whitespace-pre-line text-[var(--color-text)] opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100 {problem.source === 'codeforces'
                     ? 'w-auto max-w-fit min-w-0 p-1.5 px-3 text-center whitespace-nowrap'
                     : 'w-[280px] p-2.5'} mb-0.3"
                 >
@@ -391,8 +393,8 @@ function getDifficultyTooltip(problem: Problem): string {
                   <button
                     class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
                       ${hasLiked
-                        ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] text-[rgb(34_197_94)]'
-                        : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
+                        ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_15%,transparent)] text-[rgb(34_197_94)]'
+                        : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_15%,transparent)] hover:text-[rgb(34_197_94)]'
                       } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                     on:click={() => isAuthenticated && onLike(problem.id!, true)}
                     title={!isAuthenticated
@@ -425,8 +427,8 @@ function getDifficultyTooltip(problem: Problem): string {
                   <button
                     class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
                       ${hasDisliked
-                        ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] text-[rgb(239_68_68)]'
-                        : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] hover:text-[rgb(239_68_68)]'
+                        ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_15%,transparent)] text-[rgb(239_68_68)]'
+                        : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_15%,transparent)] hover:text-[rgb(239_68_68)]'
                       } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                     on:click={() => isAuthenticated && onLike(problem.id!, false)}
                     title={!isAuthenticated
@@ -522,7 +524,7 @@ th {
 
 /* Select styling is now handled in the RecommendersFilter component */
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
 }
@@ -533,10 +535,10 @@ a[href*='github.com']:hover {
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
+    box-shadow: 0 0 4px rgba(34, 197, 94, 0.2);
   }
   100% {
-    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
   }
 }
 </style>
diff --git a/src/lib/components/TopicSidebar.svelte b/src/lib/components/TopicSidebar.svelte
index 60a112c..f88cfd1 100644
--- a/src/lib/components/TopicSidebar.svelte
+++ b/src/lib/components/TopicSidebar.svelte
@@ -62,7 +62,7 @@ onMount(() => {
 
 <!-- Mobile sidebar toggle -->
 <button
-  class="sidebar-toggle fixed bottom-6 left-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--color-primary)] text-white shadow-lg transition-transform hover:scale-105 active:scale-95 md:hidden"
+  class="sidebar-toggle fixed bottom-6 left-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--color-accent)] text-white shadow-lg transition-transform hover:scale-105 active:scale-95 md:hidden"
   on:click={onToggle}
   aria-label="Toggle filters"
 >
@@ -99,14 +99,14 @@ onMount(() => {
 
 <!-- Desktop sidebar (always visible) -->
 <div
-  class="absolute top-[60px] bottom-auto left-0 hidden w-[13rem] bg-[var(--color-primary)] md:block"
+  class="absolute top-[60px] left-0 hidden h-auto w-[13rem] border-r border-[var(--color-border)] bg-[var(--color-secondary)] md:block"
 >
-  <div class="h-[calc(100vh-140px)] overflow-y-auto">
+  <div class="max-h-[calc(100vh-140px)] overflow-y-auto">
     <div class="w-full space-y-1 p-3">
       <button
-        class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
+        class={`w-full rounded-sm px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
             : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
@@ -116,9 +116,9 @@ onMount(() => {
 
       {#each topics as topic}
         <button
-          class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
+          class={`w-full rounded-sm px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
               : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
@@ -138,9 +138,9 @@ onMount(() => {
   <div class="h-full overflow-y-auto p-4 pt-16">
     <div class="space-y-1">
       <button
-        class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
+        class={`w-full rounded-sm px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
             : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
@@ -150,9 +150,9 @@ onMount(() => {
 
       {#each topics as topic}
         <button
-          class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
+          class={`w-full rounded-sm px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
               : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
@@ -187,12 +187,12 @@ onMount(() => {
   transform: scale(1.02);
 }
 
-/* Ensure sidebar doesn't overlap footer */
+/* Ensure sidebar has proper styling */
 @media (min-width: 768px) {
   /* Desktop styles */
   div[class*='absolute top-[60px]'] {
     height: auto;
-    min-height: calc(100vh - 140px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   }
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..db21927
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        // These are just for reference - we're using CSS variables for the actual colors
+        primary: 'var(--color-primary)',
+        secondary: 'var(--color-secondary)',
+        tertiary: 'var(--color-tertiary)',
+        accent: 'var(--color-accent)',
+        heading: 'var(--color-heading)',
+        text: 'var(--color-text)',
+        'text-muted': 'var(--color-text-muted)',
+        border: 'var(--color-border)',
+      },
+      fontFamily: {
+        sans: 'var(--font-sans)',
+        mono: 'var(--font-mono)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        accent: 'var(--shadow-accent)',
+      },
+      borderRadius: {
+        sm: 'var(--rounded-sm)',
+        DEFAULT: 'var(--rounded)',
+        md: 'var(--rounded-md)',
+        lg: 'var(--rounded-lg)',
+        xl: 'var(--rounded-xl)',
+        '2xl': 'var(--rounded-2xl)',
+        full: 'var(--rounded-full)',
+      },
+      animation: {
+        'pulse-subtle': 'pulse 1.5s infinite alternate',
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'),
+  ],
+};