From 48b41aae5fe018030485502bc274c64cedbf0adb Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 30 Apr 2026 16:04:25 +0200
Subject: [PATCH] Add dark mode colors

---
 .../compatibility-questions-display.tsx       |  53 ++++----
 web/components/buttons/general-button.tsx     |   4 +-
 web/components/filters/location-filter.tsx    |   1 +
 web/components/filters/search.tsx             |   3 +-
 .../messaging/new-message-button.tsx          |   6 +-
 web/components/multi-checkbox.tsx             |   1 +
 web/components/nav/profile-summary.tsx        |   2 +-
 web/components/nav/sidebar-item.tsx           |   6 +-
 web/components/nav/sidebar.tsx                |  32 +++--
 web/components/optional-profile-form.tsx      |   5 +-
 web/components/profile-about.tsx              |   3 +-
 web/components/profile-grid.tsx               |  18 ++-
 web/components/searches/button.tsx            |   4 +-
 web/components/select-users.tsx               |   1 +
 .../widgets/hide-profile-button.tsx           |   2 +-
 web/components/widgets/input.tsx              |   7 +-
 web/components/widgets/searchable-select.tsx  |   1 +
 web/components/widgets/stat-box.tsx           |   6 +-
 web/pages/compatibility.tsx                   |   1 +
 web/styles/globals.css                        | 118 +++++++-----------
 20 files changed, 140 insertions(+), 134 deletions(-)

diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index 0609ef95..6a3b3d06 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -254,7 +254,7 @@ export function CompatibilityQuestionsDisplay(props: {
       )}
       <Row className="flex-wrap items-center justify-between gap-x-6 gap-y-4">
         {answeredQuestions.length > 0 && (
-          <div className="relative mt-3">
+          <div className="relative mt-3 w-full max-w-[50%] xl:max-w-[600px]">
             {/*<input*/}
             {/*  type="text"*/}
             {/*  placeholder={t('answers.search_placeholder', 'Search prompts...')}*/}
@@ -268,10 +268,11 @@ export function CompatibilityQuestionsDisplay(props: {
             <Input
               value={searchTerm}
               placeholder={t('answers.search_placeholder', 'Search prompts...')}
-              className={'w-48 xs:w-64'}
+              className={'w-full'}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setSearchTerm(e.target.value)
               }}
+              searchIcon
             />
           </div>
         )}
@@ -451,9 +452,7 @@ export function CompatibilityAnswerBlock(props: {
   return (
     <Col
       data-testid="profile-compatibility-section"
-      className={
-        'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl px-3 py-2 leading-relaxed'
-      }
+      className={'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'}
     >
       <Row
         className="justify-between gap-1 font-semibold"
@@ -582,28 +581,30 @@ export function CompatibilityAnswerBlock(props: {
             ))}
         </Row>
       )}
-      <Col>
-        {comparedProfile && isAnswered && (
-          <Row className="w-full justify-end sm:hidden">
-            <CompatibilityDisplay
-              question={question}
-              profile1={profile}
-              answer1={answer}
-              profile2={comparedProfile as Profile}
-              currentUserIsComparedProfile={!fromProfilePage}
-              currentUser={currentUser}
-            />
-          </Row>
-        )}
-        {isCurrentUser && isAnswered && (
-          <Row className="w-full justify-end sm:hidden">
-            <ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />
-          </Row>
-        )}
-        {/*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*/}
-      </Col>
+      {/*{isAnswered && (*/}
+      {/*  <Col>*/}
+      {/*    {comparedProfile && isAnswered && (*/}
+      {/*      <Row className="w-full justify-end sm:hidden">*/}
+      {/*        <CompatibilityDisplay*/}
+      {/*          question={question}*/}
+      {/*          profile1={profile}*/}
+      {/*          answer1={answer}*/}
+      {/*          profile2={comparedProfile as Profile}*/}
+      {/*          currentUserIsComparedProfile={!fromProfilePage}*/}
+      {/*          currentUser={currentUser}*/}
+      {/*        />*/}
+      {/*      </Row>*/}
+      {/*    )}*/}
+      {/*    {isCurrentUser && isAnswered && (*/}
+      {/*      <Row className="w-full justify-end sm:hidden">*/}
+      {/*        <ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />*/}
+      {/*      </Row>*/}
+      {/*    )}*/}
+      {/*    /!*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*!/*/}
+      {/*  </Col>*/}
+      {/*)}*/}
       {showCommunityInfo && (
-        <Row className={'mt-[-10px]'}>
+        <Row className={''}>
           {shortenedPopularity && (
             <Tooltip
               text={t(
diff --git a/web/components/buttons/general-button.tsx b/web/components/buttons/general-button.tsx
index 70dd4ff8..dbd30da1 100644
--- a/web/components/buttons/general-button.tsx
+++ b/web/components/buttons/general-button.tsx
@@ -7,9 +7,9 @@ export const GeneralButton = (props: {url: string; content: string}) => {
     <div className="rounded-xl p-3 flex flex-col items-center group">
       <Link
         href={url}
-        className="w-full px-8 py-3 rounded-full border-2 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg 
+        className="w-full px-8 py-3 rounded-full border-2 border-primary-200 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg
                   hover:translate-y-[-2px] transition-transform duration-200 ease-in-out
-                  bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/50"
+                  bg-canvas-50 hover:bg-canvas-100 dark:hover:bg-gray-800/50"
         target={url.startsWith('http') ? '_blank' : undefined}
         rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
       >
diff --git a/web/components/filters/location-filter.tsx b/web/components/filters/location-filter.tsx
index 6b1cba95..0c7e780d 100644
--- a/web/components/filters/location-filter.tsx
+++ b/web/components/filters/location-filter.tsx
@@ -120,6 +120,7 @@ export function LocationFilter(props: {
           className="h-8 w-full rounded-none border-0 bg-transparent px-1 focus:border-b focus:ring-0 focus:ring-transparent"
           autoFocus
           // onBlur // TODO
+          searchIcon
         />
       </Row>
 
diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx
index 86b6f1d8..21c8a440 100644
--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -171,6 +171,7 @@ export const Search = forwardRef<
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setKeywordInput(e.target.value)
           }}
+          searchIcon
         />
 
         <Row className="gap-2">
@@ -232,7 +233,7 @@ export const Search = forwardRef<
             }}
             size={'xs'}
             color={'none'}
-            className={'text-ink-100 bg-primary-500 hover:bg-primary-400 rounded-xl'}
+            className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl'}
           >
             🔔
             {bookmarked
diff --git a/web/components/messaging/new-message-button.tsx b/web/components/messaging/new-message-button.tsx
index 402f391e..475ee800 100644
--- a/web/components/messaging/new-message-button.tsx
+++ b/web/components/messaging/new-message-button.tsx
@@ -20,7 +20,11 @@ export default function NewMessageButton() {
   const t = useT()
   return (
     <>
-      <Button className="h-fit gap-1" color={'gray-outline'} onClick={() => setOpen(true)}>
+      <Button
+        className="h-fit gap-1 bg-canvas-50"
+        color={'gray-outline'}
+        onClick={() => setOpen(true)}
+      >
         <PlusIcon className="h-5 w-5" aria-hidden="true" />
         {t('messages.new_message', 'New Message')}
       </Button>
diff --git a/web/components/multi-checkbox.tsx b/web/components/multi-checkbox.tsx
index 34893501..11a75494 100644
--- a/web/components/multi-checkbox.tsx
+++ b/web/components/multi-checkbox.tsx
@@ -129,6 +129,7 @@ export const MultiCheckbox = (props: {
               }
             }}
             className="h-10"
+            searchIcon
           />
           <Button size="sm" onClick={submitAdd} loading={adding} disabled={adding}>
             {t('common.add', 'Add')}
diff --git a/web/components/nav/profile-summary.tsx b/web/components/nav/profile-summary.tsx
index e8dd8700..f78142c5 100644
--- a/web/components/nav/profile-summary.tsx
+++ b/web/components/nav/profile-summary.tsx
@@ -15,7 +15,7 @@ export function ProfileSummary(props: {user: User; className?: string}) {
       href={profile === null ? '/signup' : `/${user.username}`}
       onClick={trackCallback('sidebar: profile')}
       className={clsx(
-        'hover:bg-ink-100 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-md py-3',
+        'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3',
         className,
       )}
     >
diff --git a/web/components/nav/sidebar-item.tsx b/web/components/nav/sidebar-item.tsx
index 2c229cb0..a3fa471f 100644
--- a/web/components/nav/sidebar-item.tsx
+++ b/web/components/nav/sidebar-item.tsx
@@ -28,8 +28,8 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
   }
 
   const sidebarClass = clsx(
-    isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-100 hover:text-primary-700',
-    'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
+    isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'text-[#776f65] hover:text-primary-700',
+    'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
     'focus-visible:bg-ink-100 outline-none transition-all',
   )
 
@@ -40,7 +40,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
           className={clsx(
             isCurrentPage
               ? 'text-primary-700'
-              : 'text-ink-100 group-hover:text-primary-700 group-hover:translate-x-[2px]',
+              : 'text-[#574f45] group-hover:text-primary-700 group-hover:translate-x-[2px]',
             '-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
           )}
           aria-hidden="true"
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index ae301802..7fc1606d 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -49,26 +49,23 @@ export default function Sidebar(props: {
       )}
       style={style}
     >
-      <SiteLogo className={'invert'} />
+      <SiteLogo className={'text-white'} />
 
       {user === undefined && <div className="h-[24px]" />}
 
-      {user && !isMobile && <ProfileSummary user={user} className="mb-3 text-white" />}
+      {user && !isMobile && (
+        <>
+          <div className="h-px bg-canvas-900 mb-4" />
+          <ProfileSummary user={user} className="mb-3 text-white" />
+        </>
+      )}
+
+      <div className="h-px bg-canvas-900 mb-4" />
 
       <div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
         {navOptions.map((item) => (
           <SidebarItem key={item.key} item={item} currentPage={currentPage} />
         ))}
-        {!isAndroid && (
-          <Image
-            src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
-            alt="divider"
-            width={160}
-            height={80}
-            className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
-            onClick={() => router.push(ANDROID_APP_URL)}
-          />
-        )}
 
         {user === null && <SignUpButton className="mt-4" text={t('nav.sign_up', 'Sign up')} />}
 
@@ -79,6 +76,17 @@ export default function Sidebar(props: {
         )}
       </div>
       <div className="mb-[12px] mt-auto flex flex-col gap-1">
+        <div className="h-px bg-canvas-900" />
+        {!isAndroid && (
+          <Image
+            src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
+            alt="divider"
+            width={160}
+            height={80}
+            className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
+            onClick={() => router.push(ANDROID_APP_URL)}
+          />
+        )}
         {user === null && <LanguagePicker className={'w-fit mx-3 pr-12 mb-2'} />}
         {bottomNavOptions.map((item) => (
           <SidebarItem key={item.key} item={item} currentPage={currentPage} />
diff --git a/web/components/optional-profile-form.tsx b/web/components/optional-profile-form.tsx
index 6f42f602..fca7da59 100644
--- a/web/components/optional-profile-form.tsx
+++ b/web/components/optional-profile-form.tsx
@@ -849,7 +849,7 @@ export const OptionalProfileUserForm = (props: {
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setProfile('political_details', e.target.value)
             }
-            className={'w-full sm:w-96'}
+            className={'w-full sm:w-[700px]'}
             value={profile['political_details'] ?? undefined}
           />
         </Col>
@@ -873,7 +873,7 @@ export const OptionalProfileUserForm = (props: {
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setProfile('religious_beliefs', e.target.value)
             }
-            className={'w-full sm:w-96'}
+            className={'w-full sm:w-[700px]'}
             value={profile['religious_beliefs'] ?? undefined}
           />
         </Col>
@@ -1220,6 +1220,7 @@ const CitySearchBox = (props: {onCitySelected: (city: City | undefined) => void}
           // Set to the best guess (first city) if no option selected
           if (cities.length > 0) props.onCitySelected(cities[0])
         }}
+        searchIcon
       />
       <div className="relative w-full" ref={dropdownRef}>
         <Col className="bg-canvas-50 absolute left-0 right-0 top-1 z-10 w-full overflow-hidden rounded-md">
diff --git a/web/components/profile-about.tsx b/web/components/profile-about.tsx
index c1df309a..ca809e4c 100644
--- a/web/components/profile-about.tsx
+++ b/web/components/profile-about.tsx
@@ -20,7 +20,6 @@ import {formatHeight, MeasurementSystem} from 'common/measurement-utils'
 import {Profile} from 'common/profiles/profile'
 import {Socials} from 'common/socials'
 import {UserActivity} from 'common/user'
-import {capitalize} from 'lodash'
 import {
   BarChart2,
   Brain,
@@ -91,7 +90,7 @@ export function AboutRow(props: {
       <div className="text-ink-600 w-5 mt-0.5">{icon}</div>
       <Col className={'w-full'}>
         {children}
-        {suffix && <div className={'guidance'}>{capitalize(suffix)}</div>}
+        {suffix && <div className={'guidance'}>{suffix}</div>}
       </Col>
     </Row>
   )
diff --git a/web/components/profile-grid.tsx b/web/components/profile-grid.tsx
index f3243c45..6357ca86 100644
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -311,8 +311,6 @@ function ProfilePreview(props: {
     large: 'flex-col',
   }[cardSize ?? 'medium']
 
-  const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
-
   return (
     <div
       className={clsx(
@@ -327,13 +325,21 @@ function ProfilePreview(props: {
         onPointerUp={handlePointerUp}
         onClick={handleClick}
         className={clsx(
+          'relative overflow-hidden rounded-lg bg-canvas-50 person-card',
+          'border-[1.5px] border-[#E4DDD4]',
+          'transition-all duration-[120ms] ease-in',
+          'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]',
+          'before:bg-[#C17F3E] before:rounded-l-lg',
+          'before:opacity-0 before:transition-opacity before:duration-[120ms]',
+          'hover:before:opacity-100',
+          'hover:bg-canvas-100',
           'relative z-10 cursor-pointer group block rounded-lg overflow-hidden bg-transparent h-full border border-canvas-300',
-          hover,
+          // hover,
         )}
       >
         {/* Phase 1: Dim overlay */}
         {isLoading && (
-          <div className="absolute inset-0 bg-canvas-50/[0.32] rounded-lg z-20 pointer-events-none" />
+          <div className="absolute inset-0 bg-canvas-100/[0.32] rounded-lg z-20 pointer-events-none" />
         )}
         <Col className={clsx('relative w-full rounded transition-all')}>
           <Row className={clsx('absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10')}>
@@ -482,7 +488,7 @@ function ProfilePreview(props: {
                 <div
                   className={clsx(
                     'absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-canvas-50 to-transparent pointer-events-none',
-                    'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
+                    // 'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
                   )}
                 />
               )}
@@ -522,7 +528,7 @@ function ProfilePreview(props: {
           <div
             className="absolute -inset-[200%] animate-spin"
             style={{
-              background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #3b82f6)`,
+              background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #C17F3E)`,
               animationDuration: '1s',
             }}
           />
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index 8352087d..0eed6d88 100644
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -37,7 +37,7 @@ export function BookmarkSearchButton(props: {
         onClick={() => setOpen(true)}
         color="gray-outline"
         size={'xs'}
-        className={'rounded-xl'}
+        className={'rounded-xl bg-canvas-50'}
       >
         ⭐ {t('saved_searches.button', 'Saved Searches')}
       </Button>
@@ -165,7 +165,7 @@ export function BookmarkStarButton(props: {
         onClick={() => setOpen(true)}
         color="gray-outline"
         size={'xs'}
-        className={'rounded-xl'}
+        className={'rounded-xl bg-canvas-50'}
       >
         👥 {t('saved_people.button', 'Saved People')}
       </Button>
diff --git a/web/components/select-users.tsx b/web/components/select-users.tsx
index 6515f055..3dd6f584 100644
--- a/web/components/select-users.tsx
+++ b/web/components/select-users.tsx
@@ -84,6 +84,7 @@ export function SelectUsers(props: {
               value={query}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
               placeholder="Search users..."
+              searchIcon
             />
           </Col>
           {queryReady && (
diff --git a/web/components/widgets/hide-profile-button.tsx b/web/components/widgets/hide-profile-button.tsx
index 8c590e38..0f769681 100644
--- a/web/components/widgets/hide-profile-button.tsx
+++ b/web/components/widgets/hide-profile-button.tsx
@@ -77,7 +77,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
     >
       <button
         className={clsx(
-          'rounded-full p-1 hover:bg-canvas-200 shadow focus:outline-none',
+          'border border-canvas-200 rounded-md p-1 hover:bg-canvas-200 focus:outline-none',
           className,
         )}
         disabled={submitting}
diff --git a/web/components/widgets/input.tsx b/web/components/widgets/input.tsx
index 68786697..219bbe45 100644
--- a/web/components/widgets/input.tsx
+++ b/web/components/widgets/input.tsx
@@ -7,10 +7,11 @@ export const Input = forwardRef(
   (
     props: {
       error?: boolean
+      searchIcon?: boolean
     } & ComponentPropsWithoutRef<'input'>,
     ref: Ref<HTMLInputElement>,
   ) => {
-    const {error, className, ...rest} = props
+    const {error, searchIcon, className, ...rest} = props
 
     return (
       <Row
@@ -22,7 +23,7 @@ export const Input = forwardRef(
           className,
         )}
       >
-        <span className="search-icon">🔍</span>
+        {searchIcon && <span className="search-icon">🔍</span>}
         <input
           ref={ref}
           step={0.001} // default to 3 decimal places
@@ -30,7 +31,7 @@ export const Input = forwardRef(
             'bg-canvas-50 invalid:border-error invalid:text-error  invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
             error
               ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
-              : '',
+              : 'border-transparent focus:border-transparent focus:ring-transparent',
             className,
           )}
           {...rest}
diff --git a/web/components/widgets/searchable-select.tsx b/web/components/widgets/searchable-select.tsx
index fcdf24c1..75919685 100644
--- a/web/components/widgets/searchable-select.tsx
+++ b/web/components/widgets/searchable-select.tsx
@@ -64,6 +64,7 @@ export function SearchableSelect(props: {
                 onChange={(e: any) => setQuery(e.target.value)}
                 placeholder="Search..."
                 className="mb-2 w-full"
+                searchIcon
               />
               <div className="max-h-48 space-y-1 overflow-auto">
                 {filteredSuggestions.map((suggestion) => (
diff --git a/web/components/widgets/stat-box.tsx b/web/components/widgets/stat-box.tsx
index cc8e0a74..7d063b27 100644
--- a/web/components/widgets/stat-box.tsx
+++ b/web/components/widgets/stat-box.tsx
@@ -39,7 +39,11 @@ export function StatBox(props: StatBoxProps) {
         className,
       )}
     >
-      <div className={clsx('font-semibold leading-none tracking-tight', sizeClass)}>{value}</div>
+      <div
+        className={clsx('font-semibold leading-none tracking-tight text-primary-800', sizeClass)}
+      >
+        {value}
+      </div>
       {label && <div className="text-ink-700 text-sm">{label}</div>}
       {children}
     </Card>
diff --git a/web/pages/compatibility.tsx b/web/pages/compatibility.tsx
index 628b430b..a194212f 100644
--- a/web/pages/compatibility.tsx
+++ b/web/pages/compatibility.tsx
@@ -142,6 +142,7 @@ export default function CompatibilityPage() {
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 setSearchTerm(e.target.value)
               }}
+              searchIcon
             />
             <Checkbox
               label={t('compatibility.pinned_only', 'Pinned only')}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index b575e44d..e7133cf8 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -102,12 +102,6 @@
     --color-ink-900: 30 26 20; /* Deep Warm Black (#1E1A14) */
     --color-ink-500: 140 128 112; /* Muted Warm Gray (#8C8070) */
 
-    /* Canvas - Backgrounds & Surfaces */
-    --color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
-    --color-canvas-100: 237 232 224; /* Background - Warm Beige (#EDE8E0) */
-    --color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
-    --color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
-
     /* Green - Accents */
     --color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
 
@@ -127,49 +121,34 @@
     --color-ink-950: 0 0 0;
     --color-ink-1000: 0 0 0; /* black */
 
-    /* Medium Contrast */
-    /*--color-ink-0: 255 255 255; !* white *!*/
-    /*--color-ink-50: 245 245 245;*/
-    /*--color-ink-100: 230 230 230;*/
-    /*--color-ink-200: 200 200 200;*/
-    /*--color-ink-300: 170 170 170;*/
-    /*--color-ink-400: 140 140 140;*/
-    /*--color-ink-500: 110 110 110;*/
-    /*--color-ink-600: 85 85 85;*/
-    /*--color-ink-700: 60 60 60;*/
-    /*--color-ink-800: 40 40 40;*/
-    /*--color-ink-900: 25 25 25;*/
-    /*--color-ink-950: 12 12 12;*/
-    /*--color-ink-1000: 0 0 0; !* black *!*/
-
-    /* Background / Canvas Grey Scale */
+    /* Canvas - Backgrounds & Surfaces */
     --color-canvas-0: 255 255 255; /* white */
     --color-canvas-25: 242 240 232;
-    /*--color-canvas-50: 248 247 255;*/
-    /*--color-canvas-100: 220 220 220;*/
-    /*--color-canvas-200: 210 210 210;*/
-    --color-canvas-300: 190 190 190;
+    --color-canvas-50: 247 244 239; /* Cards - Cream White (#F7F4EF) */
+    --color-canvas-100: 237 232 224; /* Main Page Background - Warm Beige (#EDE8E0) */
+    --color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
+    --color-canvas-300: 222 203 178;
     --color-canvas-400: 160 160 160;
     --color-canvas-500: 130 130 130;
     --color-canvas-600: 100 100 100;
     --color-canvas-700: 75 75 75;
     --color-canvas-800: 50 50 50;
-    --color-canvas-900: 30 30 30;
-    /*--color-canvas-950: 15 15 15;*/
+    --color-canvas-900: 68 52 34; /* Sidebar pressed */
+    --color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
     --color-canvas-1000: 0 0 0; /* black */
 
     /* Primary - Warm Amber */
-    --color-primary-950: 250 243 233; /* #FAF3E9 */
-    --color-primary-900: 243 228 206; /* #F3E4CE */
-    --color-primary-800: 232 201 157; /* #E8C99D */
-    --color-primary-700: 220 171 113; /* #DCAB71 */
-    --color-primary-600: 208 147 82; /* #D09352 */
+    --color-primary-50: 250 243 233; /* #FAF3E9 */
+    --color-primary-100: 243 228 206; /* #F3E4CE */
+    --color-primary-200: 232 201 157; /* #E8C99D */
+    --color-primary-300: 220 171 113; /* #DCAB71 */
+    --color-primary-400: 208 147 82; /* #D09352 */
     --color-primary-500: 193 127 62; /* #C17F3E - Base */
-    --color-primary-400: 166 104 46; /* #A6682E */
-    --color-primary-300: 133 80 34; /* #855022 */
-    --color-primary-200: 101 58 24; /* #653A18 */
-    --color-primary-100: 71 39 16; /* #472710 */
-    --color-primary-50: 43 21 8; /* #2B1508 */
+    --color-primary-600: 166 104 46; /* #A6682E */
+    --color-primary-700: 133 80 34; /* #855022 */
+    --color-primary-800: 101 58 24; /* #653A18 */
+    --color-primary-900: 71 39 16; /* #472710 */
+    --color-primary-950: 43 21 8; /* #2B1508 */
 
     --color-yes-0: 255 255 255;
     --color-yes-50: 249 249 249;
@@ -239,53 +218,50 @@
   .dark {
     color-scheme: dark;
 
+    /* Ink - Text becomes light */
+    --color-ink-950: 255 255 255; /* Purest highlight */
+    --color-ink-900: 247 244 239; /* Main Body Text (Old Card color) */
+    --color-ink-500: 176 160 140; /* Muted Text - shifted to warm tan */
+
+    /* Green - Sage looks great on dark brown */
+    --color-green-500: 125 160 131; /* Lightened Sage */
+
     /* High Contrast */
     --color-ink-1000: 255 255 255; /* white */
-    --color-ink-950: 255 255 255;
-    --color-ink-900: 255 255 255;
+    /*--color-ink-950: 255 255 255;*/
+    /*--color-ink-900: 255 255 255;*/
     --color-ink-800: 255 255 255;
     --color-ink-700: 255 255 255;
     --color-ink-600: 255 255 255;
-    --color-ink-500: 200 200 200;
+    /*--color-ink-500: 200 200 200;*/
     --color-ink-400: 100 100 100;
     --color-ink-300: 100 100 100;
     --color-ink-200: 0 0 0;
     --color-ink-100: 0 0 0;
     --color-ink-50: 0 0 0;
     --color-ink-0: 0 0 0; /* black */
-    /* Medium Contrast */
-    /*--color-ink-1000: 255 255 255; !* white *!*/
-    /*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
-    /*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
-    /*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
-    /*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
-    /*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
-    /*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
-    /*--color-ink-400: 115 115 115; !* #737373 *!*/
-    /*--color-ink-300: 89 89 89; !* #595959 *!*/
-    /*--color-ink-200: 64 64 64; !* #404040 *!*/
-    /*--color-ink-100: 34 34 34; !* #222222 *!*/
-    /*--color-ink-50: 17 17 17; !* #111111 *!*/
-    /*--color-ink-0: 0 0 0; !* black *!*/
 
+    /* Canvas - Backgrounds become dark */
     --color-canvas-0: 0 0 0;
     --color-canvas-25: 20 20 20;
-    --color-canvas-50: 20 20 20;
-    --color-canvas-100: 40 40 40;
-    --color-canvas-200: 60 60 60;
-    --color-canvas-300: 90 90 90;
+    --color-canvas-50: 35 31 26; /* Elevated surfaces (Cards) */
+    --color-canvas-100: 26 22 18; /* Main Page Background (#2C2416) */
+    --color-canvas-200: 68 52 34; /* UI Elements/Tags */
+    --color-canvas-300: 78 62 44;
+    --color-canvas-950: 15 13 10; /* Deepest depth (Sidebar/Bottom) */
 
-    --color-primary-50: 10 14 26; /* Deepest Navy (Background-adjacent) */
-    --color-primary-100: 15 23 42; /* Dark Navy Layer */
-    --color-primary-200: 30 41 59; /* Slate Blue */
-    --color-primary-300: 30 58 138; /* Deep Brand Blue */
-    --color-primary-400: 29 78 216; /* Strong Royal Blue */
-    --color-primary-500: 59 130 246; /* Your Standard Blue (Anchor) */
-    --color-primary-600: 96 165 250; /* Bright Sky Blue */
-    --color-primary-700: 147 197 253; /* Light Luminous Blue */
-    --color-primary-800: 191 219 254; /* Soft Pastel Blue */
-    --color-primary-900: 219 234 254; /* Pale Ice Blue */
-    --color-primary-950: 240 247 255; /* Brightest Blue-White */
+    /* Dark Mode Primary - Luminous Amber */
+    --color-primary-50: 43 21 8; /* Deepest Shadow (Old 950) */
+    --color-primary-100: 71 39 16; /* Deep Bronze */
+    --color-primary-200: 101 58 24; /* Muted Gold */
+    --color-primary-300: 133 80 34; /* Antique Brass */
+    --color-primary-400: 166 104 46; /* Warm Gold */
+    --color-primary-500: 193 127 62; /* YOUR BASE (#C17F3E) */
+    --color-primary-600: 208 147 82; /* Lighter (Hover State in Dark) */
+    --color-primary-700: 220 171 113; /* Bright (Active State in Dark) */
+    --color-primary-800: 232 201 157; /* Highlight Tint */
+    --color-primary-900: 243 228 206; /* Near-Cream Tint */
+    --color-primary-950: 250 243 233; /* Glow Tint */
 
     --color-no-950: 255 255 255; /* white */
     --color-no-900: 242 242 242;
@@ -318,7 +294,7 @@
     --color-green-200: 187 247 208;
     --color-green-300: 134 239 172;
     --color-green-400: 74 222 128;
-    --color-green-500: 34 197 94; /* standard green */
+    /*--color-green-500: 34 197 94; !* standard green *!*/
     --color-green-600: 22 163 74;
     --color-green-700: 21 128 61;
     --color-green-800: 22 101 52;