@schandlergarcia/sf-web-components 2.3.2 → 2.3.3

package/brands/engine/app/pages/PartnerHubDashboard.tsx

@@ -222,7 +222,7 @@ export default function PartnerHubDashboard() {
       .sort((a, b) => a.key.localeCompare(b.key));
 
     const months = sortedMonths.map(m => m.label);
-    const colors = ["#7DCBD9", "#1E9D6D", "#FF6B6B", "#FFA726"];
+    const colors = ["var(--color-dash-accent)", "var(--color-dash-success)", "var(--color-dash-chart-3)", "var(--color-dash-chart-4)"];
 
     // Distribute monthly revenue across properties (weighted)
     const properties = (liveData.properties || []).map((prop: any, idx: number) => {
@@ -342,11 +342,11 @@ export default function PartnerHubDashboard() {
 
     gradient.append("stop")
       .attr("offset", "0%")
-      .attr("stop-color", "#7DCBD9");
+      .attr("stop-color", "var(--color-dash-accent)");
 
     gradient.append("stop")
       .attr("offset", "100%")
-      .attr("stop-color", "#1E9D6D");
+      .attr("stop-color", "var(--color-dash-success)");
 
     g.selectAll(".bar")
       .data(data)
@@ -411,7 +411,7 @@ export default function PartnerHubDashboard() {
       .attr("text-anchor", "middle")
       .attr("font-size", "14px")
       .attr("font-weight", "600")
-      .attr("fill", "#ffffff")
+      .attr("fill", "var(--color-dash-surface)")
       .attr("paint-order", "stroke")
       .attr("stroke", "rgba(0,0,0,0.3)")
       .attr("stroke-width", "2px")
@@ -425,7 +425,7 @@ export default function PartnerHubDashboard() {
       })
       .attr("text-anchor", "middle")
       .attr("font-size", "12px")
-      .attr("fill", "#ffffff")
+      .attr("fill", "var(--color-dash-surface)")
       .attr("paint-order", "stroke")
       .attr("stroke", "rgba(0,0,0,0.3)")
       .attr("stroke-width", "2px")
@@ -473,14 +473,14 @@ export default function PartnerHubDashboard() {
     // Total area
     g.append("path")
       .datum(data)
-      .attr("fill", "#7DCBD9")
+      .attr("fill", "var(--color-dash-accent)")
       .attr("fill-opacity", 0.3)
       .attr("d", areaTotal);
 
     // Commission area
     g.append("path")
       .datum(data)
-      .attr("fill", "#1E9D6D")
+      .attr("fill", "var(--color-dash-success)")
       .attr("fill-opacity", 0.5)
       .attr("d", areaCommission);
 
@@ -488,7 +488,7 @@ export default function PartnerHubDashboard() {
     g.append("path")
       .datum(data)
       .attr("fill", "none")
-      .attr("stroke", "#7DCBD9")
+      .attr("stroke", "var(--color-dash-accent)")
       .attr("stroke-width", 2)
       .attr("d", d3.line()
         .x((d) => (x(d.month) || 0) + x.bandwidth() / 2)
@@ -499,7 +499,7 @@ export default function PartnerHubDashboard() {
     g.append("path")
       .datum(data)
       .attr("fill", "none")
-      .attr("stroke", "#1E9D6D")
+      .attr("stroke", "var(--color-dash-success)")
       .attr("stroke-width", 2)
       .attr("d", d3.line()
         .x((d) => (x(d.month) || 0) + x.bandwidth() / 2)
@@ -530,7 +530,7 @@ export default function PartnerHubDashboard() {
       .append("rect")
       .attr("width", 12)
       .attr("height", 12)
-      .attr("fill", "#7DCBD9");
+      .attr("fill", "var(--color-dash-accent)");
 
     legend
       .append("text")
@@ -545,7 +545,7 @@ export default function PartnerHubDashboard() {
       .attr("y", 20)
       .attr("width", 12)
       .attr("height", 12)
-      .attr("fill", "#1E9D6D");
+      .attr("fill", "var(--color-dash-success)");
 
     legend
       .append("text")
@@ -663,9 +663,9 @@ export default function PartnerHubDashboard() {
   }, []);
 
   return (
-    <div className="heroui-scope min-h-screen bg-[#F3F3F4] dark:bg-[#0D1117] transition-colors duration-300">
+    <div className="heroui-scope min-h-screen bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-text)] transition-colors duration-300">
       {/* Header - Refined Engine Brand */}
-      <header className="bg-white/95 dark:bg-[#0D1117]/95 backdrop-blur-xl border-b border-[#B0B1B3]/20 dark:border-[#616368]/30 sticky top-0 z-50 shadow-sm">
+      <header className="bg-white/95 dark:bg-[var(--color-dash-text)]/95 backdrop-blur-xl border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 sticky top-0 z-50 shadow-sm">
         <div className="max-w-[1600px] mx-auto px-8 py-5">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-8">
@@ -675,17 +675,17 @@ export default function PartnerHubDashboard() {
                 className="h-11 w-auto dark:invert dark:brightness-0 dark:contrast-100 transition-all duration-300"
               />
               <div className="flex items-center gap-4">
-                <div className="h-10 w-px bg-gradient-to-b from-transparent via-[#B0B1B3]/40 to-transparent" />
+                <div className="h-10 w-px bg-gradient-to-b from-transparent via-[var(--color-dash-label)]/40 to-transparent" />
                 <div className="space-y-0.5">
-                  <p className="text-sm font-semibold text-[#0D1117] dark:text-white transition-colors">
+                  <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white transition-colors">
                     {currentPartner.name}
                   </p>
                   <div className="flex items-center gap-2">
                     <span className="relative flex h-2 w-2">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#1E9D6D] opacity-75"></span>
-                      <span className="relative inline-flex rounded-full h-2 w-2 bg-[#1E9D6D]"></span>
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-dash-success)] opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-dash-success)]"></span>
                     </span>
-                    <p className="text-xs font-medium text-[#B0B1B3] uppercase tracking-wide">
+                    <p className="text-xs font-medium text-[var(--color-dash-label)] uppercase tracking-wide">
                       {currentPartner.tier} Partner
                     </p>
                   </div>
@@ -695,19 +695,19 @@ export default function PartnerHubDashboard() {
             <div className="flex items-center gap-3">
               <button
                 onClick={toggle}
-                className="group p-3 rounded-xl hover:bg-[#F3F3F4] dark:hover:bg-[#616368]/20 transition-colors duration-200"
+                className="group p-3 rounded-xl hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 transition-colors duration-200"
                 aria-label="Toggle theme"
               >
                 {mode === "dark" ? (
-                  <SunIcon className="h-5 w-5 text-[#7DCBD9] transition-transform group-hover:rotate-45 duration-300" />
+                  <SunIcon className="h-5 w-5 text-[var(--color-dash-accent)] transition-transform group-hover:rotate-45 duration-300" />
                 ) : (
-                  <MoonIcon className="h-5 w-5 text-[#616368] transition-transform group-hover:-rotate-12 duration-300" />
+                  <MoonIcon className="h-5 w-5 text-[var(--color-dash-muted)] transition-transform group-hover:-rotate-12 duration-300" />
                 )}
               </button>
 
               <Dropdown>
                 <Button variant="ghost" size="sm" className="p-2">
-                  <UserCircleIcon className="h-6 w-6 text-[#616368] dark:text-[#B0B1B3]" />
+                  <UserCircleIcon className="h-6 w-6 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]" />
                 </Button>
                 <Dropdown.Popover className="min-w-[200px]">
                   <Dropdown.Menu
@@ -723,22 +723,22 @@ export default function PartnerHubDashboard() {
                     <Dropdown.Item
                       id="settings"
                       textValue="Settings"
-                      className="px-3 py-2 rounded-lg hover:bg-[#F3F3F4] dark:hover:bg-[#616368]/20 cursor-pointer"
+                      className="px-3 py-2 rounded-lg hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 cursor-pointer"
                     >
                       <div className="flex items-center gap-3">
-                        <Cog6ToothIcon className="h-5 w-5 text-[#616368] dark:text-[#B0B1B3]" />
-                        <span className="text-sm font-medium text-[#0D1117] dark:text-white">Settings</span>
+                        <Cog6ToothIcon className="h-5 w-5 text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]" />
+                        <span className="text-sm font-medium text-[var(--color-dash-text)] dark:text-white">Settings</span>
                       </div>
                     </Dropdown.Item>
                     <Dropdown.Item
                       id="logout"
                       textValue="Logout"
                       variant="danger"
-                      className="px-3 py-2 rounded-lg hover:bg-[#FD4B23]/10 cursor-pointer"
+                      className="px-3 py-2 rounded-lg hover:bg-[var(--color-dash-danger)]/10 cursor-pointer"
                     >
                       <div className="flex items-center gap-3">
-                        <ArrowRightOnRectangleIcon className="h-5 w-5 text-[#FD4B23]" />
-                        <span className="text-sm font-medium text-[#FD4B23]">Logout</span>
+                        <ArrowRightOnRectangleIcon className="h-5 w-5 text-[var(--color-dash-danger)]" />
+                        <span className="text-sm font-medium text-[var(--color-dash-danger)]">Logout</span>
                       </div>
                     </Dropdown.Item>
                   </Dropdown.Menu>
@@ -750,7 +750,7 @@ export default function PartnerHubDashboard() {
       </header>
 
       {/* Hero Section - Partnership Overview */}
-      <div className="relative bg-gradient-to-br from-[#0D1117] via-[#1a1f2e] to-[#0D1117] dark:from-[#0D1117] dark:via-[#0D1117] dark:to-[#0a0d12] overflow-hidden">
+      <div className="relative bg-gradient-to-br from-[var(--color-dash-text)] via-[var(--color-dash-dark)] to-[var(--color-dash-text)] dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-text)] dark:to-[var(--color-dash-darker)] overflow-hidden">
         {/* Subtle background pattern */}
         <div className="absolute inset-0 opacity-5">
           <div className="absolute inset-0" style={{
@@ -760,8 +760,8 @@ export default function PartnerHubDashboard() {
         </div>
 
         {/* Gradient orbs for depth */}
-        <div className="absolute top-0 right-0 w-96 h-96 bg-[#7DCBD9]/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#1E9D6D]/10 rounded-full blur-3xl" />
+        <div className="absolute top-0 right-0 w-96 h-96 bg-[var(--color-dash-accent)]/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-[var(--color-dash-success)]/10 rounded-full blur-3xl" />
 
         <div className="relative max-w-[1600px] mx-auto px-8 py-12 pb-20">
           <div className="max-w-3xl space-y-3 animate-fade-in">
@@ -784,30 +784,30 @@ export default function PartnerHubDashboard() {
             onClick={() => !isLoading && setIsRevenueModalOpen(true)}
             className={isLoading ? "" : "cursor-pointer"}
           >
-            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
               {isLoading ? (
                 <div className="space-y-3">
                   <div className="flex items-center justify-between">
-                    <div className="bg-[#B0B1B3]/20 rounded-lg h-9 w-9 animate-pulse"></div>
-                    <div className="bg-[#B0B1B3]/20 rounded-full h-5 w-16 animate-pulse"></div>
+                    <div className="bg-[var(--color-dash-label)]/20 rounded-lg h-9 w-9 animate-pulse"></div>
+                    <div className="bg-[var(--color-dash-label)]/20 rounded-full h-5 w-16 animate-pulse"></div>
                   </div>
-                  <div className="h-3 w-24 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
-                  <div className="h-10 w-32 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
-                  <div className="h-3 w-28 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+                  <div className="h-3 w-24 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
+                  <div className="h-10 w-32 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
+                  <div className="h-3 w-28 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
                 </div>
               ) : (
                 <>
                   <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[#1E9D6D]/10 rounded-lg p-2">
-                      <BanknotesIcon className="h-5 w-5 text-[#1E9D6D]" />
+                    <div className="bg-[var(--color-dash-success)]/10 rounded-lg p-2">
+                      <BanknotesIcon className="h-5 w-5 text-[var(--color-dash-success)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[#1E9D6D]/10 text-[#1E9D6D]">
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)]">
                       +45%
                     </span>
                   </div>
-                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
-                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">${(myRevenue / 1000).toFixed(0)}K</p>
-                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">earned with Engine</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Total Revenue</p>
+                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">${(myRevenue / 1000).toFixed(0)}K</p>
+                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">earned with Engine</p>
                 </>
               )}
             </div>
@@ -818,22 +818,22 @@ export default function PartnerHubDashboard() {
             onClick={() => !isLoading && setIsDisputesModalOpen(true)}
             className={isLoading ? "" : "cursor-pointer"}
           >
-            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#FFB200]/50 dark:border-[#FFB200]/30 h-full">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-warning)]/50 dark:border-[var(--color-dash-warning)]/30 h-full">
               {isLoading ? (
                 <CardSkeleton lines={4} />
               ) : (
                 <>
                   <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[#FFB200]/10 rounded-lg p-2">
-                      <ExclamationTriangleIcon className="h-5 w-5 text-[#FFB200]" />
+                    <div className="bg-[var(--color-dash-warning)]/10 rounded-lg p-2">
+                      <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
                     </div>
-                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[#FFB200] text-white">
+                    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold bg-[var(--color-dash-warning)] text-white">
                       REVIEW
                     </span>
                   </div>
-                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
-                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myOpenDisputes}</p>
-                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">items need attention</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Things to Review</p>
+                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myOpenDisputes}</p>
+                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">items need attention</p>
                 </>
               )}
             </div>
@@ -844,19 +844,19 @@ export default function PartnerHubDashboard() {
             onClick={() => !isLoading && setIsPropertiesModalOpen(true)}
             className={isLoading ? "" : "cursor-pointer"}
           >
-            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
               {isLoading ? (
                 <CardSkeleton lines={4} />
               ) : (
                 <>
                   <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[#7DCBD9]/10 rounded-lg p-2">
-                      <BuildingOfficeIcon className="h-5 w-5 text-[#7DCBD9]" />
+                    <div className="bg-[var(--color-dash-accent)]/10 rounded-lg p-2">
+                      <BuildingOfficeIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
                     </div>
                   </div>
-                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Properties</p>
-                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myProperties}</p>
-                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">active locations</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Properties</p>
+                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myProperties}</p>
+                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">active locations</p>
                 </>
               )}
             </div>
@@ -867,19 +867,19 @@ export default function PartnerHubDashboard() {
             onClick={() => !isLoading && setIsReservationsModalOpen(true)}
             className={isLoading ? "" : "cursor-pointer"}
           >
-            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
               {isLoading ? (
                 <CardSkeleton lines={4} />
               ) : (
                 <>
                   <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[#157DE5]/10 rounded-lg p-2">
-                      <ClockIcon className="h-5 w-5 text-[#157DE5]" />
+                    <div className="bg-[var(--color-dash-info)]/10 rounded-lg p-2">
+                      <ClockIcon className="h-5 w-5 text-[var(--color-dash-info)]" />
                     </div>
                   </div>
-                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Reservations</p>
-                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myReservations}</p>
-                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">through Engine</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Reservations</p>
+                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myReservations}</p>
+                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">through Engine</p>
                 </>
               )}
             </div>
@@ -890,19 +890,19 @@ export default function PartnerHubDashboard() {
             onClick={() => !isLoading && setIsInvoicesModalOpen(true)}
             className={isLoading ? "" : "cursor-pointer"}
           >
-            <div className="bg-white dark:bg-[#0D1117] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[#B0B1B3]/20 dark:border-[#616368]/30 h-full">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 h-full">
               {isLoading ? (
                 <CardSkeleton lines={4} />
               ) : (
                 <>
                   <div className="flex items-center justify-between mb-3">
-                    <div className="bg-[#FD4B23]/10 rounded-lg p-2">
-                      <ShieldCheckIcon className="h-5 w-5 text-[#FD4B23]" />
+                    <div className="bg-[var(--color-dash-danger)]/10 rounded-lg p-2">
+                      <ShieldCheckIcon className="h-5 w-5 text-[var(--color-dash-danger)]" />
                     </div>
                   </div>
-                  <p className="text-[#616368] dark:text-[#B0B1B3] text-xs font-semibold mb-2 uppercase tracking-wider">Invoices</p>
-                  <p className="text-4xl font-black text-[#0D1117] dark:text-white mb-1">{myPendingInvoices}</p>
-                  <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">ready to pay</p>
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xs font-semibold mb-2 uppercase tracking-wider">Invoices</p>
+                  <p className="text-4xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">{myPendingInvoices}</p>
+                  <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">ready to pay</p>
                 </>
               )}
             </div>
@@ -911,10 +911,10 @@ export default function PartnerHubDashboard() {
 
         {/* Property Leaderboard - NEW SECTION */}
         {isLoading ? (
-          <div className="bg-gradient-to-br from-white via-[#F3F3F4] to-white dark:from-[#0D1117] dark:via-[#1a1f2e] dark:to-[#0D1117] rounded-2xl p-8 shadow-xl border border-[#B0B1B3]/20 dark:border-[#616368]/30">
+          <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
             <div className="mb-6">
-              <div className="h-9 w-96 bg-[#B0B1B3]/20 rounded animate-pulse mb-2"></div>
-              <div className="h-6 w-72 bg-[#B0B1B3]/20 rounded animate-pulse"></div>
+              <div className="h-9 w-96 bg-[var(--color-dash-label)]/20 rounded animate-pulse mb-2"></div>
+              <div className="h-6 w-72 bg-[var(--color-dash-label)]/20 rounded animate-pulse"></div>
             </div>
             <div className="space-y-4">
               <CardSkeleton lines={4} />
@@ -924,12 +924,12 @@ export default function PartnerHubDashboard() {
             </div>
           </div>
         ) : (
-          <div className="bg-gradient-to-br from-white via-[#F3F3F4] to-white dark:from-[#0D1117] dark:via-[#1a1f2e] dark:to-[#0D1117] rounded-2xl p-8 shadow-xl border border-[#B0B1B3]/20 dark:border-[#616368]/30">
+          <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
             <div className="mb-6">
-              <h2 className="text-3xl font-black text-[#0D1117] dark:text-white tracking-tight mb-2">
+              <h2 className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white tracking-tight mb-2">
                 Property Performance Leaderboard
               </h2>
-              <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+              <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                 Your 4 properties ranked by total revenue (last 6 months)
               </p>
             </div>
@@ -938,31 +938,31 @@ export default function PartnerHubDashboard() {
               {propertyLeaderboard.map((property, idx) => {
                 // Determine icon and color based on rank
                 let RankIcon = StarIcon;
-                let iconColor = "text-[#B0B1B3]";
-                let bgColor = "bg-[#B0B1B3]/10";
+                let iconColor = "text-[var(--color-dash-label)]";
+                let bgColor = "bg-[var(--color-dash-label)]/10";
 
                 if (idx === 0) {
                   RankIcon = TrophyIcon;
-                  iconColor = "text-[#FFB200]";
-                  bgColor = "bg-[#FFB200]/10";
+                  iconColor = "text-[var(--color-dash-warning)]";
+                  bgColor = "bg-[var(--color-dash-warning)]/10";
                 } else if (idx === 1) {
                   RankIcon = StarIcon;
-                  iconColor = "text-[#90A4AE]";
-                  bgColor = "bg-[#90A4AE]/10";
+                  iconColor = "text-[var(--color-dash-label)]";
+                  bgColor = "bg-[var(--color-dash-label)]/10";
                 } else if (idx === 2) {
                   RankIcon = StarIcon;
-                  iconColor = "text-[#CD7F32]";
-                  bgColor = "bg-[#CD7F32]/10";
+                  iconColor = "text-[var(--color-dash-warning)]";
+                  bgColor = "bg-[var(--color-dash-warning)]/10";
                 } else {
                   RankIcon = RocketLaunchIcon;
-                  iconColor = "text-[#7DCBD9]";
-                  bgColor = "bg-[#7DCBD9]/10";
+                  iconColor = "text-[var(--color-dash-accent)]";
+                  bgColor = "bg-[var(--color-dash-accent)]/10";
                 }
 
                 return (
                   <div
                     key={idx}
-                    className="group bg-white dark:bg-[#0D1117] rounded-xl p-6 border-2 border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#1E9D6D] hover:shadow-lg transition-all duration-300"
+                    className="group bg-white dark:bg-[var(--color-dash-text)] rounded-xl p-6 border-2 border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-success)] hover:shadow-lg transition-all duration-300"
                   >
                     <div className="flex items-center justify-between gap-6">
                       <div className="flex items-center gap-4 flex-1">
@@ -974,32 +974,32 @@ export default function PartnerHubDashboard() {
                         {/* Property info */}
                         <div className="flex-1">
                           <div className="flex items-center gap-3 mb-2">
-                            <h3 className="text-xl font-bold text-[#0D1117] dark:text-white">
+                            <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
                               {property.name}
                             </h3>
-                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[#1E9D6D]/20 text-[#1E9D6D] border border-[#1E9D6D]/30">
+                            <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-success)]/20 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
                               +{property.growth}% growth
                             </span>
                           </div>
-                          <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-1">
+                          <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">
                             {property.insight}
                           </p>
                           <div className="flex items-center gap-6 text-sm">
-                            <span className="text-[#616368] dark:text-[#B0B1B3]">
-                              Total: <strong className="text-[#0D1117] dark:text-white">${property.revenue.toLocaleString()}</strong>
+                            <span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                              Total: <strong className="text-[var(--color-dash-text)] dark:text-white">${property.revenue.toLocaleString()}</strong>
                             </span>
-                            <span className="text-[#616368] dark:text-[#B0B1B3]">
-                              Latest: <strong className="text-[#0D1117] dark:text-white">${property.latestRevenue.toLocaleString()}</strong>
+                            <span className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                              Latest: <strong className="text-[var(--color-dash-text)] dark:text-white">${property.latestRevenue.toLocaleString()}</strong>
                             </span>
                           </div>
                         </div>
 
                         {/* Growth indicator */}
                         <div className="text-right flex-shrink-0">
-                          <p className="text-4xl font-black text-[#1E9D6D] mb-1">
+                          <p className="text-4xl font-black text-[var(--color-dash-success)] mb-1">
                             {property.growth}%
                           </p>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                             Growth
                           </p>
                         </div>
@@ -1011,12 +1011,12 @@ export default function PartnerHubDashboard() {
             </div>
 
             {/* Summary insight */}
-            <div className="mt-6 bg-[#157DE5]/10 border-l-4 border-[#157DE5] rounded-r-lg p-5">
+            <div className="mt-6 bg-[var(--color-dash-info)]/10 border-l-4 border-[var(--color-dash-info)] rounded-r-lg p-5">
               <div className="flex items-start gap-3">
                 <div className="flex-shrink-0">
-                  <LightBulbIcon className="h-5 w-5 text-[#157DE5]" />
+                  <LightBulbIcon className="h-5 w-5 text-[var(--color-dash-info)]" />
                 </div>
-                <p className="text-base text-[#0D1117] dark:text-white font-medium">
+                <p className="text-base text-[var(--color-dash-text)] dark:text-white font-medium">
                   <strong>Key Insight:</strong> Austin is driving 41% of bookings through Engine and growing 60%.
                   SF Bay doubled in 6 months (100% growth) — strong performance across your portfolio.
                 </p>
@@ -1027,24 +1027,24 @@ export default function PartnerHubDashboard() {
 
         {/* Penalty Calculation Issue Card */}
         {!isLoading && myPenalties.filter((p: any) => p.isHero).length > 0 && (
-          <div className="bg-white dark:bg-[#0D1117] border-2 border-[#FFB200]/50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
+          <div className="bg-white dark:bg-[var(--color-dash-text)] border-2 border-[var(--color-dash-warning)]/50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
             <div className="flex items-start gap-4 mb-6">
               <div className="flex-shrink-0">
-                <div className="bg-[#FFB200]/10 rounded-xl p-3">
-                  <ExclamationTriangleIcon className="h-8 w-8 text-[#FFB200]" />
+                <div className="bg-[var(--color-dash-warning)]/10 rounded-xl p-3">
+                  <ExclamationTriangleIcon className="h-8 w-8 text-[var(--color-dash-warning)]" />
                 </div>
               </div>
               <div className="flex-1">
                 <div className="flex items-start justify-between gap-4 mb-2">
                   <div>
-                    <h3 className="text-2xl font-bold text-[#0D1117] dark:text-white mb-1">
+                    <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
                       Penalty Calculation Issue
                     </h3>
-                    <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                    <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                       ATR-00001 · Summit Austin Convention Center · TechCorp Inc. booking
                     </p>
                   </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[#FFB200] text-white flex-shrink-0">
+                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold bg-[var(--color-dash-warning)] text-white flex-shrink-0">
                     NEEDS REVIEW
                   </span>
                 </div>
@@ -1052,27 +1052,27 @@ export default function PartnerHubDashboard() {
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-              <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30">
-                <p className="text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Current Penalty</p>
-                <p className="text-3xl font-black text-[#0D1117] dark:text-white mb-1">$9,000</p>
-                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">You owe Engine</p>
+              <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Current Penalty</p>
+                <p className="text-3xl font-black text-[var(--color-dash-text)] dark:text-white mb-1">$9,000</p>
+                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">You owe Engine</p>
               </div>
-              <div className="bg-[#1E9D6D]/5 dark:bg-[#1E9D6D]/10 rounded-xl p-5 border border-[#1E9D6D]/30">
-                <p className="text-xs font-semibold text-[#1E9D6D] mb-2 uppercase tracking-wider">Resale Credit Missing</p>
-                <p className="text-3xl font-black text-[#1E9D6D] mb-1">-$2,400</p>
-                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">Should reduce penalty</p>
+              <div className="bg-[var(--color-dash-success)]/5 dark:bg-[var(--color-dash-success)]/10 rounded-xl p-5 border border-[var(--color-dash-success)]/30">
+                <p className="text-xs font-semibold text-[var(--color-dash-success)] mb-2 uppercase tracking-wider">Resale Credit Missing</p>
+                <p className="text-3xl font-black text-[var(--color-dash-success)] mb-1">-$2,400</p>
+                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">Should reduce penalty</p>
               </div>
-              <div className="bg-[#7DCBD9]/5 dark:bg-[#7DCBD9]/10 rounded-xl p-5 border border-[#7DCBD9]/30">
-                <p className="text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Corrected Amount</p>
-                <p className="text-3xl font-black text-[#7DCBD9] mb-1">$6,600</p>
-                <p className="text-xs text-[#616368] dark:text-[#B0B1B3]">What you should owe</p>
+              <div className="bg-[var(--color-dash-accent)]/5 dark:bg-[var(--color-dash-accent)]/10 rounded-xl p-5 border border-[var(--color-dash-accent)]/30">
+                <p className="text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Corrected Amount</p>
+                <p className="text-3xl font-black text-[var(--color-dash-accent)] mb-1">$6,600</p>
+                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">What you should owe</p>
               </div>
             </div>
 
-            <div className="bg-[#FFB200]/10 border-l-4 border-[#FFB200] rounded-r-lg p-4 mb-6">
-              <p className="text-sm text-[#0D1117] dark:text-white leading-relaxed">
+            <div className="bg-[var(--color-dash-warning)]/10 border-l-4 border-[var(--color-dash-warning)] rounded-r-lg p-4 mb-6">
+              <p className="text-sm text-[var(--color-dash-text)] dark:text-white leading-relaxed">
                 Your contract specifies a <strong>50% resale credit</strong> for rooms that were resold. Based on <strong>8 rooms at $200/night for 3 nights</strong>,
-                you should receive a <strong className="text-[#1E9D6D]">$2,400 credit</strong> that wasn't applied. This should reduce your penalty from $9,000 to <strong>$6,600</strong>.
+                you should receive a <strong className="text-[var(--color-dash-success)]">$2,400 credit</strong> that wasn't applied. This should reduce your penalty from $9,000 to <strong>$6,600</strong>.
               </p>
             </div>
 
@@ -1081,7 +1081,7 @@ export default function PartnerHubDashboard() {
                 setSelectedPenalty(myPenalties.find((p: any) => p.isHero));
                 setIsPenaltyModalOpen(true);
               }}
-              className="inline-flex items-center gap-2 px-6 py-3 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-xl transition-all duration-200 hover:shadow-lg group"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-xl transition-all duration-200 hover:shadow-lg group"
             >
               <ExclamationTriangleIcon className="h-5 w-5" />
               Review This Calculation
@@ -1094,10 +1094,10 @@ export default function PartnerHubDashboard() {
 
         {/* Section - Conversational with Better Spacing */}
         <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
             Recent activity
           </h2>
-          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
             Here's what's been happening with your properties
           </p>
         </div>
@@ -1112,7 +1112,7 @@ export default function PartnerHubDashboard() {
           </div>
         ) : myDisputes.length > 0 ? (
           <div className="space-y-5">
-            <h3 className="text-xl font-bold text-[#0D1117] dark:text-white">
+            <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">
               Items that need your attention
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
@@ -1123,33 +1123,33 @@ export default function PartnerHubDashboard() {
                     toast.info(`Opening ${d.title}`);
                     setSelectedDispute(d);
                   }}
-                  className="group bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl p-6 hover:border-[#7DCBD9] dark:hover:border-[#7DCBD9] transition-all duration-300 hover:shadow-lg cursor-pointer"
+                  className="group bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl p-6 hover:border-[var(--color-dash-accent)] dark:hover:border-[var(--color-dash-accent)] transition-all duration-300 hover:shadow-lg cursor-pointer"
                 >
                   <div className="flex items-start justify-between gap-3 mb-3">
-                    <h4 className="font-semibold text-[#0D1117] dark:text-white flex-1">
+                    <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white flex-1">
                       {d.title}
                     </h4>
                     <span
                       className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
                         d.status === "critical"
-                          ? "bg-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                          ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
                           : d.status === "warning"
-                          ? "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/30"
-                          : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                          ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
+                          : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
                       }`}
                     >
                       {d.badge}
                     </span>
                   </div>
-                  <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-4">
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
                     {d.description}
                   </p>
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                    <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
                       ${d.amount.toLocaleString()}
                     </span>
                     {d.agentHandled && (
-                      <span className="text-xs text-[#7DCBD9] flex items-center gap-1">
+                      <span className="text-xs text-[var(--color-dash-accent)] flex items-center gap-1">
                         <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                           <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                         </svg>
@@ -1167,43 +1167,43 @@ export default function PartnerHubDashboard() {
         {isLoading ? (
           <CardSkeleton lines={8} />
         ) : (
-          <div className="bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300">
-            <div className="p-8 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
-              <h3 className="text-2xl font-bold text-[#0D1117] dark:text-white mb-2">
+          <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow duration-300">
+            <div className="p-8 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+              <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-2">
                 All attrition penalties
               </h3>
-              <p className="text-base text-[#616368] dark:text-[#B0B1B3]">
+              <p className="text-base text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                 {myPenalties.length} {myPenalties.length === 1 ? 'penalty' : 'penalties'} · Showing recent calculations and adjustments
               </p>
             </div>
             <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-[#F3F3F4] dark:bg-[#616368]/10 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+              <thead className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Penalty ID
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Property
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Customer
                   </th>
-                  <th className="px-6 py-3 text-left text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-left text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Method
                   </th>
-                  <th className="px-6 py-3 text-right text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-right text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Penalty
                   </th>
-                  <th className="px-6 py-3 text-right text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-right text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Credit
                   </th>
-                  <th className="px-6 py-3 text-center text-xs font-semibold text-[#616368] dark:text-[#B0B1B3] uppercase tracking-wider">
+                  <th className="px-6 py-3 text-center text-xs font-semibold text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] uppercase tracking-wider">
                     Status
                   </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-[#B0B1B3]/20 dark:divide-[#616368]/30">
+              <tbody className="divide-y divide-[var(--color-dash-label)]/20 dark:divide-[var(--color-dash-muted)]/30">
                 {myPenalties.map((penalty) => (
                   <tr
                     key={penalty.id}
@@ -1211,47 +1211,47 @@ export default function PartnerHubDashboard() {
                       setSelectedPenalty(penalty);
                       setIsPenaltyModalOpen(true);
                     }}
-                    className={`hover:bg-[#F3F3F4]/50 dark:hover:bg-[#616368]/5 transition-colors cursor-pointer ${
-                      penalty.isHero ? "bg-[#FFB200]/5" : ""
+                    className={`hover:bg-[var(--color-dash-surface)]/50 dark:hover:bg-[var(--color-dash-muted)]/5 transition-colors cursor-pointer ${
+                      penalty.isHero ? "bg-[var(--color-dash-warning)]/5" : ""
                     }`}
                   >
                     <td className="px-6 py-4 whitespace-nowrap">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium text-[#0D1117] dark:text-white">
+                        <span className="text-sm font-medium text-[var(--color-dash-text)] dark:text-white">
                           {penalty.name}
                         </span>
                         {penalty.isHero && (
-                          <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-[#FFB200]/20 text-[#FFB200] border border-[#FFB200]/30">
+                          <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-[var(--color-dash-warning)]/20 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30">
                             Review
                           </span>
                         )}
                       </div>
                     </td>
-                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                       {penalty.property}
                     </td>
-                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                       {penalty.customer}
                     </td>
-                    <td className="px-6 py-4 text-sm text-[#616368] dark:text-[#B0B1B3]">
+                    <td className="px-6 py-4 text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                       {penalty.method}
                     </td>
-                    <td className="px-6 py-4 text-sm font-semibold text-right text-[#0D1117] dark:text-white">
+                    <td className="px-6 py-4 text-sm font-semibold text-right text-[var(--color-dash-text)] dark:text-white">
                       ${penalty.penalty.toLocaleString()}
                     </td>
-                    <td className="px-6 py-4 text-sm font-semibold text-right text-[#1E9D6D]">
+                    <td className="px-6 py-4 text-sm font-semibold text-right text-[var(--color-dash-success)]">
                       ${penalty.credit.toLocaleString()}
                     </td>
                     <td className="px-6 py-4 text-center">
                       <span
                         className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
                           penalty.status === "Approved"
-                            ? "bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30"
+                            ? "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30"
                             : penalty.status === "Reviewed"
-                            ? "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
                             : penalty.status === "Calculated"
-                            ? "bg-[#B0B1B3]/10 text-[#616368] border border-[#B0B1B3]/30"
-                            : "bg-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                            ? "bg-[var(--color-dash-label)]/10 text-[var(--color-dash-muted)] border border-[var(--color-dash-label)]/30"
+                            : "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
                         }`}
                       >
                         {penalty.status}
@@ -1267,10 +1267,10 @@ export default function PartnerHubDashboard() {
 
         {/* Section */}
         <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
             Billing & contract details
           </h2>
-          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
             Keep track of invoices and your partnership terms
           </p>
         </div>
@@ -1279,14 +1279,14 @@ export default function PartnerHubDashboard() {
         {isLoading ? (
           <CardSkeleton lines={6} />
         ) : (
-        <div className="bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-          <div className="p-8 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+        <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+          <div className="p-8 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
             <div className="flex items-start justify-between gap-4">
               <div>
-                <h3 className="text-2xl font-bold text-[#0D1117] dark:text-white mb-1">
+                <h3 className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
                   Revenue trend by property
                 </h3>
-                <p className="text-base text-[#616368] dark:text-[#B0B1B3]">
+                <p className="text-base text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                   Monthly revenue earned through Engine across your {revenueTrendByProperty.properties?.length || 4} properties
                 </p>
               </div>
@@ -1299,7 +1299,7 @@ export default function PartnerHubDashboard() {
                     className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
                     style={{ backgroundColor: prop.color }}
                   />
-                  <span className="text-xs font-medium text-[#616368] dark:text-[#B0B1B3]">
+                  <span className="text-xs font-medium text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                     {prop.name}
                   </span>
                 </div>
@@ -1318,7 +1318,7 @@ export default function PartnerHubDashboard() {
                 />
               </div>
             ) : (
-              <div className="h-[260px] flex items-center justify-center text-[#616368] dark:text-[#B0B1B3]">
+              <div className="h-[260px] flex items-center justify-center text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                 Loading chart data...
               </div>
             )}
@@ -1357,52 +1357,52 @@ export default function PartnerHubDashboard() {
               loading={isLoading}
             />
 
-            <div className="bg-white dark:bg-[#0D1117] border border-[#B0B1B3]/20 dark:border-[#616368]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
-              <div className="p-6 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
-                <h3 className="text-xl font-bold text-[#0D1117] dark:text-white mb-1">
+            <div className="bg-white dark:bg-[var(--color-dash-text)] border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden">
+              <div className="p-6 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
+                <h3 className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white mb-1">
                   Your Contract
                 </h3>
-                <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                   Partnership terms
                 </p>
               </div>
               <div className="p-6 space-y-4">
-                <div className="flex items-center justify-between pb-4 border-b border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                <div className="flex items-center justify-between pb-4 border-b border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
                   <div>
-                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Contract ID</p>
-                    <p className="text-lg font-bold text-[#0D1117] dark:text-white">CNTR-00002</p>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract ID</p>
+                    <p className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">CNTR-00002</p>
                   </div>
-                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30">
+                  <span className="inline-flex items-center rounded-full px-3 py-1 text-xs font-medium bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30">
                     Active
                   </span>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Commission Rate</p>
-                    <p className="text-2xl font-bold text-[#1E9D6D]">17%</p>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Commission Rate</p>
+                    <p className="text-2xl font-bold text-[var(--color-dash-success)]">17%</p>
                   </div>
                   <div>
-                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Contract Term</p>
-                    <p className="text-sm font-semibold text-[#0D1117] dark:text-white">Mar 2025 - Feb 2027</p>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Contract Term</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Mar 2025 - Feb 2027</p>
                   </div>
                 </div>
 
-                <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-4 space-y-3">
+                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-4 space-y-3">
                   <div>
-                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Attrition Method</p>
-                    <p className="text-sm font-semibold text-[#0D1117] dark:text-white">Per Night (80% threshold)</p>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Attrition Method</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Per Night (80% threshold)</p>
                   </div>
                   <div>
-                    <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
-                    <p className="text-sm font-semibold text-[#0D1117] dark:text-white">Partial Credit (50%)</p>
+                    <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1 uppercase tracking-wider">Resale Credit Policy</p>
+                    <p className="text-sm font-semibold text-[var(--color-dash-text)] dark:text-white">Partial Credit (50%)</p>
                   </div>
                 </div>
 
                 <div className="pt-2">
                   <button
                     onClick={() => toast.info("Opening full contract PDF...")}
-                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-[#F3F3F4] dark:bg-[#616368]/20 hover:bg-[#7DCBD9]/10 dark:hover:bg-[#7DCBD9]/10 text-[#0D1117] dark:text-white font-semibold rounded-lg border border-[#B0B1B3]/30 dark:border-[#616368]/50 hover:border-[#7DCBD9] transition-colors text-sm"
+                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 hover:bg-[var(--color-dash-accent)]/10 dark:hover:bg-[var(--color-dash-accent)]/10 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors text-sm"
                   >
                     <DocumentArrowDownIcon className="h-4 w-4" />
                     Download Full Contract
@@ -1415,10 +1415,10 @@ export default function PartnerHubDashboard() {
 
         {/* Section */}
         <div className="pt-8 space-y-2">
-          <h2 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+          <h2 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
             What's been happening
           </h2>
-          <p className="text-lg text-[#616368] dark:text-[#B0B1B3]">
+          <p className="text-lg text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
             A quick timeline of recent updates
           </p>
         </div>
@@ -1447,17 +1447,17 @@ export default function PartnerHubDashboard() {
         )}
 
         {/* Help Section - Enhanced */}
-        <div className="bg-gradient-to-br from-white to-[#F3F3F4] dark:from-[#0D1117] dark:to-[#1a1f2e] rounded-2xl p-12 border border-[#B0B1B3]/20 dark:border-[#616368]/30 shadow-lg">
+        <div className="bg-gradient-to-br from-white to-[var(--color-dash-surface)] dark:from-[var(--color-dash-text)] dark:to-[var(--color-dash-dark)] rounded-2xl p-12 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 shadow-lg">
           <div className="text-center max-w-2xl mx-auto space-y-6">
-            <h3 className="text-3xl font-bold text-[#0D1117] dark:text-white tracking-tight">
+            <h3 className="text-3xl font-bold text-[var(--color-dash-text)] dark:text-white tracking-tight">
               Questions? We're here to help
             </h3>
-            <p className="text-[#616368] dark:text-[#B0B1B3] text-xl leading-relaxed">
+            <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] text-xl leading-relaxed">
               Our partner team is standing by if you need anything — from billing questions to contract details.
             </p>
             <div className="flex gap-4 justify-center flex-wrap pt-2">
               <Modal>
-                <button className="group px-8 py-4 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-xl transition-colors duration-200 hover:shadow-xl">
+                <button className="group px-8 py-4 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-xl transition-colors duration-200 hover:shadow-xl">
                   Get in touch
                 </button>
                 <Modal.Backdrop>
@@ -1465,52 +1465,52 @@ export default function PartnerHubDashboard() {
                     <Modal.Dialog className="max-w-2xl">
                       <Modal.CloseTrigger />
                       <Modal.Header>
-                        <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                        <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                           Contact Support
                         </Modal.Heading>
                       </Modal.Header>
                       <Modal.Body className="space-y-6">
-                        <p className="text-[#616368] dark:text-[#B0B1B3]">
+                        <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                           Our partner support team is here to help with billing questions, contract details, or any other issues you may have.
                         </p>
 
                         {/* Contact Options */}
                         <div className="space-y-4">
-                          <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6 hover:border hover:border-[#7DCBD9] transition-colors cursor-pointer">
+                          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6 hover:border hover:border-[var(--color-dash-accent)] transition-colors cursor-pointer">
                             <div className="flex items-start gap-4">
-                              <div className="bg-[#7DCBD9]/20 rounded-lg p-3">
-                                <svg className="h-6 w-6 text-[#7DCBD9]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <div className="bg-[var(--color-dash-accent)]/20 rounded-lg p-3">
+                                <svg className="h-6 w-6 text-[var(--color-dash-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                 </svg>
                               </div>
                               <div>
-                                <h4 className="font-semibold text-[#0D1117] dark:text-white mb-1">Email Support</h4>
-                                <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">
+                                <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">Email Support</h4>
+                                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">
                                   Get help via email - we typically respond within 2-4 hours
                                 </p>
-                                <a href="mailto:partners@engine.com" className="text-sm font-medium text-[#7DCBD9] hover:underline">
+                                <a href="mailto:partners@engine.com" className="text-sm font-medium text-[var(--color-dash-accent)] hover:underline">
                                   partners@engine.com
                                 </a>
                               </div>
                             </div>
                           </div>
 
-                          <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6 hover:border hover:border-[#7DCBD9] transition-colors cursor-pointer">
+                          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6 hover:border hover:border-[var(--color-dash-accent)] transition-colors cursor-pointer">
                             <div className="flex items-start gap-4">
-                              <div className="bg-[#1E9D6D]/20 rounded-lg p-3">
-                                <svg className="h-6 w-6 text-[#1E9D6D]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <div className="bg-[var(--color-dash-success)]/20 rounded-lg p-3">
+                                <svg className="h-6 w-6 text-[var(--color-dash-success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                 </svg>
                               </div>
                               <div>
-                                <h4 className="font-semibold text-[#0D1117] dark:text-white mb-1">Phone Support</h4>
-                                <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">
+                                <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">Phone Support</h4>
+                                <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">
                                   Speak with a partner specialist directly
                                 </p>
-                                <a href="tel:+18005551234" className="text-sm font-medium text-[#1E9D6D] hover:underline">
+                                <a href="tel:+18005551234" className="text-sm font-medium text-[var(--color-dash-success)] hover:underline">
                                   1-800-555-1234
                                 </a>
-                                <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mt-1">
+                                <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">
                                   Mon-Fri, 8am-6pm EST
                                 </p>
                               </div>
@@ -1520,7 +1520,7 @@ export default function PartnerHubDashboard() {
                       </Modal.Body>
                       <Modal.Footer>
                         <div className="flex gap-3 justify-end">
-                          <Modal.CloseTrigger className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors">
+                          <Modal.CloseTrigger className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors">
                             Close
                           </Modal.CloseTrigger>
                         </div>
@@ -1532,7 +1532,7 @@ export default function PartnerHubDashboard() {
 
               <button
                 onClick={() => toast.info("Opening help documentation...")}
-                className="group px-8 py-4 bg-transparent hover:bg-[#F3F3F4] dark:hover:bg-[#616368]/20 text-[#0D1117] dark:text-white font-semibold rounded-xl border-2 border-[#B0B1B3]/30 dark:border-[#616368]/50 hover:border-[#7DCBD9] transition-colors duration-200"
+                className="group px-8 py-4 bg-transparent hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-xl border-2 border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 hover:border-[var(--color-dash-accent)] transition-colors duration-200"
               >
                 Browse help docs
               </button>
@@ -1541,7 +1541,7 @@ export default function PartnerHubDashboard() {
         </div>
 
         {/* Footer */}
-        <div className="text-center py-8 text-sm text-[#B0B1B3]">
+        <div className="text-center py-8 text-sm text-[var(--color-dash-label)]">
           <p>© 2026 Engine · Welcome to modern travel management</p>
         </div>
       </div>
@@ -1553,30 +1553,30 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="max-w-4xl">
               <Modal.CloseTrigger />
               <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                   Your Properties
                 </Modal.Heading>
               </Modal.Header>
               <Modal.Body className="space-y-4">
-                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
                   {myProperties} active properties in your portfolio
                 </p>
                 <div className="space-y-3">
                   {revenueTrendByProperty.properties?.map((prop, idx) => (
                     <div
                       key={idx}
-                      className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#7DCBD9] transition-colors"
+                      className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-accent)] transition-colors"
                     >
                       <div className="flex items-start justify-between gap-4">
                         <div className="flex items-start gap-3 flex-1">
                           <div className="mt-1">
-                            <BuildingOfficeIcon className="h-5 w-5 text-[#7DCBD9]" />
+                            <BuildingOfficeIcon className="h-5 w-5 text-[var(--color-dash-accent)]" />
                           </div>
                           <div>
-                            <h4 className="font-semibold text-[#0D1117] dark:text-white mb-1">
+                            <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-1">
                               {prop.name}
                             </h4>
-                            <p className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                            <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                               Latest revenue: ${prop.values[prop.values.length - 1].toLocaleString()}
                             </p>
                           </div>
@@ -1592,7 +1592,7 @@ export default function PartnerHubDashboard() {
               </Modal.Body>
               <Modal.Footer>
                 <Modal.CloseTrigger asChild>
-                  <button className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors">
+                  <button className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors">
                     Close
                   </button>
                 </Modal.CloseTrigger>
@@ -1609,18 +1609,18 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="max-w-4xl">
               <Modal.CloseTrigger />
               <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                   Revenue Breakdown
                 </Modal.Heading>
               </Modal.Header>
               <Modal.Body className="space-y-4">
-                <div className="bg-gradient-to-br from-[#1E9D6D]/10 to-[#7DCBD9]/10 rounded-xl p-6 mb-4">
-                  <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Total Revenue</p>
-                  <p className="text-4xl font-bold text-[#0D1117] dark:text-white">
+                <div className="bg-gradient-to-br from-[var(--color-dash-success)]/10 to-[var(--color-dash-accent)]/10 rounded-xl p-6 mb-4">
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Total Revenue</p>
+                  <p className="text-4xl font-bold text-[var(--color-dash-text)] dark:text-white">
                     ${myRevenue.toLocaleString()}
                   </p>
                 </div>
-                <h3 className="font-semibold text-[#0D1117] dark:text-white mb-3">By Property</h3>
+                <h3 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-3">By Property</h3>
                 <div className="space-y-3">
                   {revenueTrendByProperty.properties?.map((prop, idx) => {
                     const totalRevenue = prop.values.reduce((sum, val) => sum + val, 0);
@@ -1628,7 +1628,7 @@ export default function PartnerHubDashboard() {
                     return (
                       <div
                         key={idx}
-                        className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30"
+                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30"
                       >
                         <div className="flex items-center justify-between mb-3">
                           <div className="flex items-center gap-3">
@@ -1636,16 +1636,16 @@ export default function PartnerHubDashboard() {
                               className="inline-block h-3 w-3 rounded-full"
                               style={{ backgroundColor: prop.color }}
                             />
-                            <span className="font-semibold text-[#0D1117] dark:text-white">
+                            <span className="font-semibold text-[var(--color-dash-text)] dark:text-white">
                               {prop.name}
                             </span>
                           </div>
-                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
                             ${totalRevenue.toLocaleString()}
                           </span>
                         </div>
                         <div className="flex items-center gap-3">
-                          <div className="flex-1 bg-[#B0B1B3]/20 rounded-full h-2">
+                          <div className="flex-1 bg-[var(--color-dash-label)]/20 rounded-full h-2">
                             <div
                               className="h-2 rounded-full"
                               style={{
@@ -1654,7 +1654,7 @@ export default function PartnerHubDashboard() {
                               }}
                             />
                           </div>
-                          <span className="text-sm text-[#616368] dark:text-[#B0B1B3] w-12 text-right">
+                          <span className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] w-12 text-right">
                             {percentage}%
                           </span>
                         </div>
@@ -1666,7 +1666,7 @@ export default function PartnerHubDashboard() {
               <Modal.Footer>
                 <button
                   onClick={() => setIsRevenueModalOpen(false)}
-                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors"
+                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
                 >
                   Close
                 </button>
@@ -1683,17 +1683,17 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="max-w-4xl">
               <Modal.CloseTrigger />
               <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                   Reservations
                 </Modal.Heading>
               </Modal.Header>
               <Modal.Body>
-                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
                   {myReservations} total reservations through Engine
                 </p>
-                <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
-                  <ClockIcon className="h-12 w-12 text-[#157DE5] mx-auto mb-3" />
-                  <p className="text-[#616368] dark:text-[#B0B1B3]">
+                <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
+                  <ClockIcon className="h-12 w-12 text-[var(--color-dash-info)] mx-auto mb-3" />
+                  <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                     Detailed reservation data is available in your full property management dashboard
                   </p>
                 </div>
@@ -1701,7 +1701,7 @@ export default function PartnerHubDashboard() {
               <Modal.Footer>
                 <button
                   onClick={() => setIsReservationsModalOpen(false)}
-                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors"
+                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
                 >
                   Close
                 </button>
@@ -1718,12 +1718,12 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="max-w-4xl">
               <Modal.CloseTrigger />
               <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                   Items to Review
                 </Modal.Heading>
               </Modal.Header>
               <Modal.Body className="space-y-4">
-                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
                   {myOpenDisputes} {myOpenDisputes === 1 ? 'item needs' : 'items need'} your attention
                 </p>
                 {myDisputes.length > 0 ? (
@@ -1731,33 +1731,33 @@ export default function PartnerHubDashboard() {
                     {myDisputes.map((d) => (
                       <div
                         key={d.id}
-                        className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#FFB200] transition-colors"
+                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-warning)] transition-colors"
                       >
                         <div className="flex items-start justify-between gap-3 mb-2">
-                          <h4 className="font-semibold text-[#0D1117] dark:text-white flex-1">
+                          <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white flex-1">
                             {d.title}
                           </h4>
                           <span
                             className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
                               d.status === "critical"
-                                ? "bg-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
+                                ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
                                 : d.status === "warning"
-                                ? "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/30"
-                                : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                                ? "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
+                                : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
                             }`}
                           >
                             {d.badge}
                           </span>
                         </div>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-3">
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-3">
                           {d.description}
                         </p>
                         <div className="flex items-center justify-between">
-                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
                             ${d.amount.toLocaleString()}
                           </span>
                           {d.agentHandled && (
-                            <span className="text-xs text-[#7DCBD9] flex items-center gap-1">
+                            <span className="text-xs text-[var(--color-dash-accent)] flex items-center gap-1">
                               <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                 <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                               </svg>
@@ -1769,15 +1769,15 @@ export default function PartnerHubDashboard() {
                     ))}
                   </div>
                 ) : (
-                  <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
-                    <p className="text-[#616368] dark:text-[#B0B1B3]">No items need attention</p>
+                  <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
+                    <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">No items need attention</p>
                   </div>
                 )}
               </Modal.Body>
               <Modal.Footer>
                 <button
                   onClick={() => setIsDisputesModalOpen(false)}
-                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors"
+                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
                 >
                   Close
                 </button>
@@ -1794,7 +1794,7 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="w-[95vw] max-w-4xl max-h-[90vh] overflow-y-auto">
               <Modal.CloseTrigger />
               <Modal.Header className="p-8 pb-4">
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white pr-8">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white pr-8">
                   Penalty Review: {selectedPenalty?.name}
                 </Modal.Heading>
               </Modal.Header>
@@ -1804,44 +1804,44 @@ export default function PartnerHubDashboard() {
                     {/* Property & Customer Info */}
                     <div className="grid grid-cols-2 gap-4">
                       <div>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-1">Property</p>
-                        <p className="font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.property}</p>
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">Property</p>
+                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.property}</p>
                       </div>
                       <div>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-1">Customer</p>
-                        <p className="font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.customer}</p>
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-1">Customer</p>
+                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.customer}</p>
                       </div>
                     </div>
 
                     {/* Booking Details */}
-                    <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-6">
-                      <h4 className="font-semibold text-[#0D1117] dark:text-white mb-4">Booking Details</h4>
+                    <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-6">
+                      <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-4">Booking Details</h4>
                       <div className="grid grid-cols-3 gap-6">
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Original Block</p>
-                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">{selectedPenalty.originalRoomBlock} rooms</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Original Block</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.originalRoomBlock} rooms</p>
                         </div>
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Rooms Used</p>
-                          <p className="text-xl font-bold text-[#1E9D6D]">{selectedPenalty.actualRoomsUsed} rooms</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Rooms Used</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-success)]">{selectedPenalty.actualRoomsUsed} rooms</p>
                         </div>
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Unused</p>
-                          <p className="text-xl font-bold text-[#FD4B23]">{selectedPenalty.unusedRooms} rooms</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Unused</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-danger)]">{selectedPenalty.unusedRooms} rooms</p>
                         </div>
                       </div>
-                      <div className="grid grid-cols-3 gap-6 mt-6 pt-6 border-t border-[#B0B1B3]/20 dark:border-[#616368]/30">
+                      <div className="grid grid-cols-3 gap-6 mt-6 pt-6 border-t border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Room Rate</p>
-                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">${selectedPenalty.roomRate}/night</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Room Rate</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">${selectedPenalty.roomRate}/night</p>
                         </div>
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Number of Nights</p>
-                          <p className="text-xl font-bold text-[#0D1117] dark:text-white">{selectedPenalty.numberOfNights}</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Number of Nights</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.numberOfNights}</p>
                         </div>
                         <div>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Rooms Resold</p>
-                          <p className="text-xl font-bold text-[#7DCBD9]">{selectedPenalty.roomsResold} rooms</p>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Rooms Resold</p>
+                          <p className="text-xl font-bold text-[var(--color-dash-accent)]">{selectedPenalty.roomsResold} rooms</p>
                         </div>
                       </div>
                     </div>
@@ -1849,42 +1849,42 @@ export default function PartnerHubDashboard() {
                     {/* Calculation Method & Policy */}
                     <div className="grid grid-cols-2 gap-6">
                       <div>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Calculation Method</p>
-                        <p className="text-lg font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.method}</p>
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Calculation Method</p>
+                        <p className="text-lg font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.method}</p>
                       </div>
                       <div>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Resale Policy</p>
-                        <p className="text-lg font-semibold text-[#0D1117] dark:text-white">{selectedPenalty.resalePolicy}</p>
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Resale Policy</p>
+                        <p className="text-lg font-semibold text-[var(--color-dash-text)] dark:text-white">{selectedPenalty.resalePolicy}</p>
                       </div>
                     </div>
 
                     {/* Financial Details */}
                     <div>
-                      <h4 className="font-semibold text-[#0D1117] dark:text-white mb-4">Financial Summary</h4>
+                      <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-4">Financial Summary</h4>
                       <div className="grid grid-cols-3 gap-6">
-                        <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-5">
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Calculated Penalty</p>
-                          <p className="text-2xl font-bold text-[#0D1117] dark:text-white">${selectedPenalty.penaltyCalculated.toLocaleString()}</p>
+                        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-5">
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Calculated Penalty</p>
+                          <p className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">${selectedPenalty.penaltyCalculated.toLocaleString()}</p>
                         </div>
-                        <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-lg p-5">
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Credit Applied</p>
-                          <p className="text-2xl font-bold text-[#1E9D6D]">${selectedPenalty.credit.toLocaleString()}</p>
+                        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-lg p-5">
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Credit Applied</p>
+                          <p className="text-2xl font-bold text-[var(--color-dash-success)]">${selectedPenalty.credit.toLocaleString()}</p>
                         </div>
-                        <div className={`rounded-lg p-5 border ${selectedPenalty.isHero ? 'bg-[#FFB200]/10 border-[#FFB200]/30' : 'bg-[#F3F3F4] dark:bg-[#616368]/10 border-transparent'}`}>
-                          <p className="text-xs text-[#616368] dark:text-[#B0B1B3] mb-2 uppercase tracking-wider">Final Penalty</p>
-                          <p className={`text-2xl font-bold ${selectedPenalty.isHero ? 'text-[#FFB200]' : 'text-[#0D1117] dark:text-white'}`}>${selectedPenalty.penalty.toLocaleString()}</p>
+                        <div className={`rounded-lg p-5 border ${selectedPenalty.isHero ? 'bg-[var(--color-dash-warning)]/10 border-[var(--color-dash-warning)]/30' : 'bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border-transparent'}`}>
+                          <p className="text-xs text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2 uppercase tracking-wider">Final Penalty</p>
+                          <p className={`text-2xl font-bold ${selectedPenalty.isHero ? 'text-[var(--color-dash-warning)]' : 'text-[var(--color-dash-text)] dark:text-white'}`}>${selectedPenalty.penalty.toLocaleString()}</p>
                         </div>
                       </div>
                     </div>
 
                     {/* Issue Description */}
                     {selectedPenalty.isHero && (
-                      <div className="bg-[#FFB200]/10 border-l-4 border-[#FFB200] rounded-lg p-5">
-                        <p className="font-semibold text-[#0D1117] dark:text-white mb-3 flex items-center gap-2">
-                          <ExclamationTriangleIcon className="h-5 w-5 text-[#FFB200]" />
+                      <div className="bg-[var(--color-dash-warning)]/10 border-l-4 border-[var(--color-dash-warning)] rounded-lg p-5">
+                        <p className="font-semibold text-[var(--color-dash-text)] dark:text-white mb-3 flex items-center gap-2">
+                          <ExclamationTriangleIcon className="h-5 w-5 text-[var(--color-dash-warning)]" />
                           Why this needs review:
                         </p>
-                        <p className="text-sm text-[#616368] dark:text-[#B0B1B3] leading-relaxed">
+                        <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] leading-relaxed">
                           Your contract specifies a {selectedPenalty.resalePolicy.toLowerCase()}. Based on {selectedPenalty.roomsResold} rooms resold at ${selectedPenalty.roomRate}/night for {selectedPenalty.numberOfNights} {selectedPenalty.numberOfNights === 1 ? 'night' : 'nights'},
                           we'd expect to see a ${(selectedPenalty.roomsResold * selectedPenalty.roomRate * selectedPenalty.numberOfNights * 0.5).toLocaleString()} credit that doesn't appear to be fully applied.
                         </p>
@@ -1893,16 +1893,16 @@ export default function PartnerHubDashboard() {
 
                     {/* Status */}
                     <div>
-                      <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mb-2">Status</p>
+                      <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-2">Status</p>
                       <span
                         className={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${
                           selectedPenalty.status === "Approved"
-                            ? "bg-[#1E9D6D]/10 text-[#1E9D6D] border border-[#1E9D6D]/30"
+                            ? "bg-[var(--color-dash-success)]/10 text-[var(--color-dash-success)] border border-[var(--color-dash-success)]/30"
                             : selectedPenalty.status === "Reviewed"
-                            ? "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                            ? "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
                             : selectedPenalty.status === "Calculated"
-                            ? "bg-[#B0B1B3]/10 text-[#616368] border border-[#B0B1B3]/30"
-                            : "bg-[#FFB200]/10 text-[#FFB200] border border-[#FFB200]/30"
+                            ? "bg-[var(--color-dash-label)]/10 text-[var(--color-dash-muted)] border border-[var(--color-dash-label)]/30"
+                            : "bg-[var(--color-dash-warning)]/10 text-[var(--color-dash-warning)] border border-[var(--color-dash-warning)]/30"
                         }`}
                       >
                         {selectedPenalty.status}
@@ -1915,7 +1915,7 @@ export default function PartnerHubDashboard() {
                 <div className="flex gap-4 justify-end flex-wrap">
                   <button
                     onClick={() => setIsPenaltyModalOpen(false)}
-                    className="px-6 py-2.5 bg-transparent hover:bg-[#F3F3F4] dark:hover:bg-[#616368]/20 text-[#0D1117] dark:text-white font-semibold rounded-lg border border-[#B0B1B3]/30 dark:border-[#616368]/50 transition-colors"
+                    className="px-6 py-2.5 bg-transparent hover:bg-[var(--color-dash-surface)] dark:hover:bg-[var(--color-dash-muted)]/20 text-[var(--color-dash-text)] dark:text-white font-semibold rounded-lg border border-[var(--color-dash-label)]/30 dark:border-[var(--color-dash-muted)]/50 transition-colors"
                   >
                     Close
                   </button>
@@ -1924,7 +1924,7 @@ export default function PartnerHubDashboard() {
                       toast.success("Dispute has been filed. Support team will follow up.");
                       setIsPenaltyModalOpen(false);
                     }}
-                    className="px-6 py-2.5 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors whitespace-nowrap"
+                    className="px-6 py-2.5 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors whitespace-nowrap"
                   >
                     File Dispute
                   </button>
@@ -1942,12 +1942,12 @@ export default function PartnerHubDashboard() {
             <Modal.Dialog className="max-w-4xl">
               <Modal.CloseTrigger />
               <Modal.Header>
-                <Modal.Heading className="text-2xl font-bold text-[#0D1117] dark:text-white">
+                <Modal.Heading className="text-2xl font-bold text-[var(--color-dash-text)] dark:text-white">
                   Your Invoices
                 </Modal.Heading>
               </Modal.Header>
               <Modal.Body className="space-y-4">
-                <p className="text-[#616368] dark:text-[#B0B1B3] mb-4">
+                <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mb-4">
                   {myPendingInvoices} {myPendingInvoices === 1 ? 'invoice' : 'invoices'} ready to pay
                 </p>
                 {myInvoices.length > 0 ? (
@@ -1955,32 +1955,32 @@ export default function PartnerHubDashboard() {
                     {myInvoices.map((inv) => (
                       <div
                         key={inv.id}
-                        className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-5 border border-[#B0B1B3]/20 dark:border-[#616368]/30 hover:border-[#1E9D6D] transition-colors"
+                        className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-5 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 hover:border-[var(--color-dash-success)] transition-colors"
                       >
                         <div className="flex items-start justify-between gap-3 mb-2">
                           <div>
-                            <h4 className="font-semibold text-[#0D1117] dark:text-white">
+                            <h4 className="font-semibold text-[var(--color-dash-text)] dark:text-white">
                               {inv.title}
                             </h4>
-                            <p className="text-sm text-[#616368] dark:text-[#B0B1B3] mt-1">
+                            <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)] mt-1">
                               {inv.description}
                             </p>
                           </div>
                           <span
                             className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium flex-shrink-0 ${
                               inv.status === "critical"
-                                ? "bg-[#FD4B23]/10 text-[#FD4B23] border border-[#FD4B23]/30"
-                                : "bg-[#157DE5]/10 text-[#157DE5] border border-[#157DE5]/30"
+                                ? "bg-[var(--color-dash-danger)]/10 text-[var(--color-dash-danger)] border border-[var(--color-dash-danger)]/30"
+                                : "bg-[var(--color-dash-info)]/10 text-[var(--color-dash-info)] border border-[var(--color-dash-info)]/30"
                             }`}
                           >
                             {inv.badge}
                           </span>
                         </div>
                         <div className="flex items-center justify-between mt-3">
-                          <span className="text-lg font-bold text-[#0D1117] dark:text-white">
+                          <span className="text-lg font-bold text-[var(--color-dash-text)] dark:text-white">
                             ${inv.amount.toLocaleString()}
                           </span>
-                          <span className="text-sm text-[#616368] dark:text-[#B0B1B3]">
+                          <span className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
                             Due {inv.due}
                           </span>
                         </div>
@@ -1988,15 +1988,15 @@ export default function PartnerHubDashboard() {
                     ))}
                   </div>
                 ) : (
-                  <div className="bg-[#F3F3F4] dark:bg-[#616368]/10 rounded-xl p-8 text-center">
-                    <p className="text-[#616368] dark:text-[#B0B1B3]">No pending invoices</p>
+                  <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 rounded-xl p-8 text-center">
+                    <p className="text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">No pending invoices</p>
                   </div>
                 )}
               </Modal.Body>
               <Modal.Footer>
                 <button
                   onClick={() => setIsInvoicesModalOpen(false)}
-                  className="px-6 py-2 bg-[#0D1117] dark:bg-white hover:bg-[#616368] dark:hover:bg-[#F3F3F4] text-white dark:text-[#0D1117] font-semibold rounded-lg transition-colors"
+                  className="px-6 py-2 bg-[var(--color-dash-text)] dark:bg-white hover:bg-[var(--color-dash-muted)] dark:hover:bg-[var(--color-dash-surface)] text-white dark:text-[var(--color-dash-text)] font-semibold rounded-lg transition-colors"
                 >
                   Close
                 </button>