From 03bfe62ea789c5666b5b0d00f14c3e034a07b151 Mon Sep 17 00:00:00 2001
From: Cameron Custer <custer.cameron@gmail.com>
Date: Sat, 19 Apr 2025 14:02:35 -0700
Subject: [PATCH] blue theme

---
 src/app.css                            | 58 +++++++++++++-------------
 src/lib/components/Header.svelte       | 49 ++++++++++++----------
 src/lib/components/ProblemTable.svelte | 26 ++++++------
 3 files changed, 69 insertions(+), 64 deletions(-)

diff --git a/src/app.css b/src/app.css
index 14a18ea..f330f8a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -10,39 +10,39 @@
       'Open Sans', 'Helvetica Neue', sans-serif;
     --font-mono: 'Fira Mono', monospace;
 
-    /* Colors */
+    /* Colors - Cosmic Gradient Theme */
     --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-primary: oklch(0.15 0.05 250); /* Deep cosmic blue */
+    --color-secondary: oklch(0.22 0.06 260); /* Slightly lighter cosmic blue */
+    --color-tertiary: oklch(0.3 0.07 270); /* Medium cosmic blue with hint of purple */
+    --color-accent: oklch(0.7 0.18 140); /* Vibrant teal-green */
+    --color-heading: oklch(1 0 0 / 0.9); /* Bright white headings */
+    --color-text: oklch(0.9 0.03 260 / 0.8); /* Light blue-tinted text */
+    --color-text-muted: oklch(0.8 0.02 260 / 0.5); /* Muted blue-tinted text */
+    --color-background: oklch(0.19 0.05 250 / 0.7); /* Cosmic blue background */
+    --color-border: oklch(0.35 0.08 270); /* Subtle purple-blue border */
+    --color-link: oklch(0.7 0.18 140); /* Vibrant teal-green links */
+    --color-link-subtle: oklch(0.65 0.12 140); /* Subtle teal-green links */
+    --color-link-nav: oklch(1 0 0 / 0.8); /* Bright navigation links */
+    --color-username: oklch(0.7 0.15 40); /* Warm golden username color */
     --color-solved-row: color-mix(
       in oklab,
-      rgb(34 197 94) 15%,
+      oklch(0.7 0.18 140) 15%,
       transparent
-    ); /* Light green for solved rows */
-
-    /* Codeforces rating colors */
-    --color-legendary-grandmaster: oklch(0.65 0.27 29.23);
-    --color-international-grandmaster: oklch(0.65 0.27 29.23);
-    --color-grandmaster: oklch(0.65 0.27 29.23);
-    --color-international-master: oklch(0.71 0.19 54.65);
-    --color-master: oklch(0.71 0.19 54.65);
-    --color-candidate-master: oklch(0.55 0.32 328.88);
-    --color-expert: oklch(0.45 0.26 264.05);
-    --color-specialist: oklch(0.6 0.17 196.09);
-    --color-pupil: oklch(0.51 0.18 142.5);
-    --color-newbie: oklch(0.54 0 0);
+    ); /* Teal-tinted solved rows */
+
+    /* Codeforces rating colors - Enhanced for cosmic theme */
+    --color-legendary-grandmaster: oklch(0.65 0.27 29.23); /* Keep red */
+    --color-international-grandmaster: oklch(0.65 0.27 29.23); /* Keep red */
+    --color-grandmaster: oklch(0.65 0.27 29.23); /* Keep red */
+    --color-international-master: oklch(0.71 0.19 54.65); /* Keep orange */
+    --color-master: oklch(0.71 0.19 54.65); /* Keep orange */
+    --color-candidate-master: oklch(0.55 0.32 328.88); /* Keep purple */
+    --color-expert: oklch(0.45 0.26 264.05); /* Keep blue */
+    --color-specialist: oklch(0.6 0.17 196.09); /* Keep cyan */
+    --color-pupil: oklch(0.51 0.18 142.5); /* Keep green */
+    --color-newbie: oklch(0.54 0.05 270); /* Subtle purple-blue for newbie */
 
     /* Spacing */
     --spacing: 0.25rem;
@@ -226,7 +226,7 @@ img {
 }
 
 .badge-easy {
-  background-color: oklch(0.73 0.2 142.5);
+  background-color: oklch(0.65 0.18 142.5);
   color: white;
 }
 
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index bf7cbd1..3cc0886 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -168,57 +168,57 @@ $: if ($page) {
       <ul class="m-0 flex list-none gap-2 p-0 lg:gap-3 xl:gap-4">
         <li
           class="relative {$page.url.pathname === '/'
-            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:shadow-[0_0_8px_var(--color-accent)] after:content-['']"
             : ''}"
         >
           <a
             href="/"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="hover:text-shadow-sm block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Problems</a
           >
         </li>
         <li
           class="relative {$page.url.pathname === '/contests'
-            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:shadow-[0_0_8px_var(--color-accent)] after:content-['']"
             : ''}"
         >
           <a
             href="/contests"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="hover:text-shadow-sm block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Contests</a
           >
         </li>
         <li
           class="relative {$page.url.pathname === '/leaderboard'
-            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:shadow-[0_0_8px_var(--color-accent)] after:content-['']"
             : ''}"
         >
           <a
             href="/leaderboard"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="hover:text-shadow-sm block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Leaderboard</a
           >
         </li>
         <li
           class="relative {$page.url.pathname === '/about'
-            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:shadow-[0_0_8px_var(--color-accent)] after:content-['']"
             : ''}"
         >
           <a
             href="/about"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="hover:text-shadow-sm block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >About</a
           >
         </li>
         {#if $user && isUserAdmin}
           <li
             class="relative {$page.url.pathname === '/submit'
-              ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+              ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:shadow-[0_0_8px_var(--color-accent)] after:content-['']"
               : ''}"
           >
             <a
               href="/submit"
-              class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+              class="hover:text-shadow-sm block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:text-[var(--color-accent)] lg:text-base"
               >Submit</a
             >
           </li>
@@ -242,7 +242,7 @@ $: if ($page) {
             </a>
             <a
               href="/settings"
-              class="flex items-center justify-center rounded-full p-1.5 text-[var(--color-text)] transition-colors hover:bg-[var(--color-tertiary)] hover:text-[var(--color-accent)]"
+              class="flex items-center justify-center rounded-full p-1.5 text-[var(--color-text)] transition-all duration-300 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-accent)] hover:shadow-[0_0_8px_var(--color-accent)]"
               title="Settings"
               aria-label="Settings"
             >
@@ -264,7 +264,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:bg-[color-mix(in_oklab,var(--color-tertiary)_80%,transparent)] hover:text-[var(--color-heading)]"
               on:click={handleLogout}
             >
               Logout
@@ -272,7 +272,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:border-[color-mix(in_oklab,var(--color-accent)_80%,white)] hover:bg-[color-mix(in_oklab,var(--color-accent)_80%,white)] hover:shadow"
             on:click={handleLogin}
             title="Login with GitHub"
           >
@@ -286,35 +286,35 @@ $: 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-md backdrop-blur-sm lg:hidden"
     >
       <nav class="flex flex-col gap-4">
         <ul class="m-0 flex list-none flex-col gap-4 p-0">
           <li>
             <a
               href="/"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:translate-x-1 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
               >Problems</a
             >
           </li>
           <li>
             <a
               href="/contests"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:translate-x-1 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
               >Contests</a
             >
           </li>
           <li>
             <a
               href="/leaderboard"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:translate-x-1 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
               >Leaderboard</a
             >
           </li>
           <li>
             <a
               href="/about"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:translate-x-1 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
               >About</a
             >
           </li>
@@ -322,7 +322,7 @@ $: if ($page) {
             <li>
               <a
                 href="/submit"
-                class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
+                class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-all duration-200 hover:translate-x-1 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
                 >Submit</a
               >
             </li>
@@ -344,7 +344,7 @@ $: if ($page) {
               </a>
               <a
                 href="/settings"
-                class="flex items-center justify-center rounded-full p-1.5 text-[var(--color-text)] transition-colors hover:bg-[var(--color-tertiary)] hover:text-[var(--color-accent)]"
+                class="flex items-center justify-center rounded-full p-1.5 text-[var(--color-text)] transition-all duration-300 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-accent)] hover:shadow-[0_0_8px_var(--color-accent)]"
                 title="Settings"
                 aria-label="Settings"
               >
@@ -367,14 +367,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:bg-[color-mix(in_oklab,var(--color-tertiary)_80%,transparent)] hover:text-[var(--color-heading)]"
               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:border-[color-mix(in_oklab,var(--color-accent)_80%,white)] hover:bg-[color-mix(in_oklab,var(--color-accent)_80%,white)] hover:shadow"
               on:click={handleLogin}
               title="Login with GitHub"
             >
@@ -418,4 +418,9 @@ a[href*='github.com'] {
 a[href*='github.com']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
 }
+
+/* Text shadow utility */
+.hover\:text-shadow-sm:hover {
+  text-shadow: 0 0 8px var(--color-accent);
+}
 </style>
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index d068212..df61606 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -127,14 +127,14 @@ 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 rounded-lg bg-[var(--color-secondary)] shadow-md">
     <table
-      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
+      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] shadow-md"
     >
       <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-all duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_80%,var(--color-accent)_20%,transparent)] hover:shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
             on:click={handleSolvedFilter}
             title="Filter by solved status"
           >
@@ -194,7 +194,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-all duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_80%,var(--color-accent)_20%,transparent)] hover:shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
             on:click={handleSourceFilter}
             title="Filter by source"
           >
@@ -240,7 +240,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-all duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_80%,var(--color-accent)_20%,transparent)] hover:shadow-[0_2px_4px_rgba(0,0,0,0.1)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -284,8 +284,8 @@ function getDifficultyTooltip(problem: Problem): string {
           <tr
             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'}"
+              ? 'border-l-4 border-l-[var(--color-accent)] bg-[var(--color-solved-row)]'
+              : 'hover:bg-[var(--color-tertiary)]/10'}"
           >
             <td class="p-3 text-center">
               {#if problem.id}
@@ -293,8 +293,8 @@ function getDifficultyTooltip(problem: Problem): string {
                 <button
                   class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full 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-[var(--color-accent)] text-white shadow-[0_0_8px_var(--color-accent)]'
+                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[var(--color-accent)] hover:bg-[color-mix(in_oklab,var(--color-accent)_10%,transparent)] hover:text-[var(--color-accent)] hover:shadow-[0_0_5px_var(--color-accent)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleSolved(problem.id!, !isSolved)}
                   title={!isAuthenticated
@@ -391,8 +391,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,var(--color-accent)_50%,transparent)] bg-[color-mix(in_oklab,var(--color-accent)_10%,transparent)] text-[var(--color-accent)]'
+                        : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,var(--color-accent)_50%,transparent)] hover:bg-[color-mix(in_oklab,var(--color-accent)_10%,transparent)] hover:text-[var(--color-accent)]'
                       } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                     on:click={() => isAuthenticated && onLike(problem.id!, true)}
                     title={!isAuthenticated
@@ -533,10 +533,10 @@ a[href*='github.com']:hover {
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
+    box-shadow: 0 0 5px var(--color-accent);
   }
   100% {
-    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
+    box-shadow: 0 0 12px var(--color-accent);
   }
 }
 </style>