feat: complete application updates

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/assets/styles/main.css

@@ -1,13 +1,13 @@
 :root {
-  /* Brand — sampled from mockups/11-my-profile + FAB/CTA screens */
-  --color-primary: #0a353c;
-  --color-primary-hover: #072a2f;
-  --color-primary-soft: color-mix(in srgb, var(--color-primary) 14%, #ffffff);
-  --color-primary-dark: #062428;
+  /* Brand — sampled from the Nademitex logo */
+  --color-primary: #091d36;
+  --color-primary-hover: #061426;
+  --color-primary-soft: #e9edf2;
+  --color-primary-dark: #04101f;
   --color-primary-light: var(--color-primary-soft);
-  --color-primary-rgb: 10, 53, 60;
-  --color-accent-navy: #0a353c;
-  --color-accent-navy-rgb: 10, 53, 60;
+  --color-primary-rgb: 9, 29, 54;
+  --color-accent-navy: #091d36;
+  --color-accent-navy-rgb: 9, 29, 54;
   --color-success: #1b8a5a;
   --color-success-light: #eaf8f1;
   --color-success-soft: #eaf8f1;
@@ -19,19 +19,19 @@
   --color-purple-light: #ede9fe;
   --color-info: #3b6fa0;
   --color-info-light: #eef3f7;
-  --color-bg: #eef1f0;
-  --color-page-background: #eef1f0;
-  --color-shell-bg: #eef1f0;
-  --color-surface: #eef1f0;
-  --color-border: #d8dedc;
-  --color-text: #121212;
-  --color-text-primary: #121212;
+  --color-bg: #f3f5f7;
+  --color-page-background: #f3f5f7;
+  --color-shell-bg: #f3f5f7;
+  --color-surface: #ffffff;
+  --color-border: #dfe4ea;
+  --color-text: #121821;
+  --color-text-primary: #121821;
   --color-text-muted: #6b7280;
   --color-text-secondary: #6b7280;
-  --color-tab-inactive-bg: #e4e8e6;
+  --color-tab-inactive-bg: #e8ecf1;
   --color-tab-inactive-text: #64748b;
-  --color-summary-bg: #e4e8e6;
-  --color-elevated: #eef1f0;
+  --color-summary-bg: #e8ecf1;
+  --color-elevated: #ffffff;
   --color-brand-warm: #f3ece3;
   --color-brand-warm-text: #1a202c;
   --color-brand-warm-muted: #718096;
@@ -63,14 +63,14 @@
 }
 
 html.dark {
-  --color-primary: #5eb8ad;
-  --color-primary-hover: #7ad0c5;
-  --color-primary-soft: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg));
-  --color-primary-dark: #7ad0c5;
+  --color-primary: #7d8695;
+  --color-primary-hover: #aeb6c2;
+  --color-primary-soft: #27303d;
+  --color-primary-dark: #aeb6c2;
   --color-primary-light: var(--color-primary-soft);
-  --color-primary-rgb: 94, 184, 173;
-  --color-accent-navy: #5eb8ad;
-  --color-accent-navy-rgb: 94, 184, 173;
+  --color-primary-rgb: 125, 134, 149;
+  --color-accent-navy: #7d8695;
+  --color-accent-navy-rgb: 125, 134, 149;
   --color-success: #3dd68c;
   --color-success-light: #123528;
   --color-success-soft: #123528;
@@ -88,8 +88,8 @@ html.dark {
   --color-surface: #0b0f14;
   --color-elevated: #0b0f14;
   --color-border: #2a3444;
-  --color-text: #eef2f8;
-  --color-text-primary: #eef2f8;
+  --color-text: #ffffff;
+  --color-text-primary: #ffffff;
   --color-text-muted: #9aa8bc;
   --color-text-secondary: #9aa8bc;
   --color-tab-inactive-bg: #1a2230;

src/components/icons/IconQemashMark.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import logoUrl from '@/assets/images/nademitex-logo.png'
-
 withDefaults(defineProps<{ size?: number }>(), { size: 72 })
+
+const logoUrl = `${import.meta.env.BASE_URL}brand-mark.png`
 </script>
 
 <template>

src/main.ts

@@ -21,3 +21,11 @@ app.use(router)
 useThemeStore(pinia)
 
 app.mount('#app')
+
+if (import.meta.env.PROD && 'serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    void navigator.serviceWorker.register(`${import.meta.env.BASE_URL}sw.js`, {
+      scope: import.meta.env.BASE_URL,
+    })
+  })
+}

src/views/auth/LoginView.vue

@@ -409,8 +409,8 @@ onMounted(async () => {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: #0a353c;
-  color: #f7f4ef;
+  background: var(--color-primary);
+  color: var(--color-surface);
   font-family: inherit;
   font-size: 0.9375rem;
   font-weight: 600;
@@ -420,11 +420,11 @@ onMounted(async () => {
 
 .login-submit:not(:disabled):hover,
 .login-submit:not(:disabled):focus-visible {
-  background: #072a2f;
+  background: var(--color-primary-hover);
 }
 
 .login-submit:focus-visible {
-  outline: 2px solid #c9a56a;
+  outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
 

src/views/auth/OtpView.vue

@@ -492,8 +492,8 @@ onMounted(() => {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: #0a353c;
-  color: #f7f4ef;
+  background: var(--color-primary);
+  color: var(--color-surface);
   font-family: inherit;
   font-size: 0.9375rem;
   font-weight: 600;
@@ -503,7 +503,7 @@ onMounted(() => {
 
 .otp-submit:not(:disabled):hover,
 .otp-submit:not(:disabled):focus-visible {
-  background: #072a2f;
+  background: var(--color-primary-hover);
 }
 
 .otp-submit:disabled {

src/views/auth/RegisterView.vue

@@ -534,8 +534,8 @@ async function submit() {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: #0a353c;
-  color: #f7f4ef;
+  background: var(--color-primary);
+  color: var(--color-surface);
   font: inherit;
   font-size: 0.9375rem;
   font-weight: 600;
@@ -545,7 +545,7 @@ async function submit() {
 
 .register-submit:not(:disabled):hover,
 .register-submit:not(:disabled):focus-visible {
-  background: #072a2f;
+  background: var(--color-primary-hover);
 }
 
 .register-submit:disabled {

src/views/auth/WelcomeView.vue

@@ -202,7 +202,7 @@ function goLogin() {
   height: 1.5px;
   margin-top: 16px;
   border-radius: 1px;
-  background: #c9a56a;
+  background: var(--color-primary);
 }
 
 .welcome-features {
@@ -286,7 +286,12 @@ function goLogin() {
   border: 1px solid rgba(244, 237, 228, 0.28);
   border-radius: 999px;
   background:
-    linear-gradient(135deg, rgba(20, 78, 82, 0.55) 0%, rgba(10, 53, 60, 0.42) 48%, rgba(8, 42, 48, 0.48) 100%);
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--color-primary) 65%, transparent) 0%,
+      color-mix(in srgb, var(--color-primary) 42%, transparent) 48%,
+      color-mix(in srgb, var(--color-accent-navy) 48%, transparent) 100%
+    );
   color: #fff;
   font: inherit;
   font-size: 0.9375rem;

src/views/catalogs/CatalogDetailView.vue

@@ -810,7 +810,7 @@ html.dark .calite-detail__error {
 }
 
 html.dark .inquiry-bar {
-  background: #5eb8ad;
+  background: var(--color-primary);
   color: #0b0f14;
 }
 

src/views/companies/components/MobileCompanySelect.vue

@@ -149,7 +149,7 @@ defineEmits<{
 }
 
 .company-brand-card--par {
-  background: linear-gradient(145deg, #1a4a52 0%, #0a353c 70%);
+  background: linear-gradient(145deg, var(--color-primary-hover) 0%, var(--color-primary) 70%);
 }
 
 .company-brand-card--fam-baft {

src/views/home/HomeView.vue

@@ -420,7 +420,7 @@ async function toggleFavorite(productId: string) {
                 <IconHeart
                   :size="16"
                   :filled="favorites.isFavorite(item.id)"
-                  :color="favorites.isFavorite(item.id) ? '#0a353c' : '#b0b7c0'"
+                  :color="favorites.isFavorite(item.id) ? 'var(--color-primary)' : '#b0b7c0'"
                 />
               </button>
             </div>
@@ -1057,6 +1057,18 @@ async function toggleFavorite(productId: string) {
   color: var(--color-primary);
 }
 
+html.dark .section__title,
+html.dark .home-desk-head__title,
+html.dark .level-card__name,
+html.dark .suggest-card__title,
+html.dark .product-card__name {
+  color: #fff;
+}
+
+html.dark .product-card__sub {
+  color: #c5d0de;
+}
+
 @media (min-width: 768px) {
   .home-page {
     max-width: var(--content-max-width);

src/views/products/ProductDetailView.vue

@@ -302,7 +302,7 @@ function onAddressSubmit(address: string) {
           <IconHeart
             :size="20"
             :filled="favorites.isFavorite(product.id)"
-            :color="favorites.isFavorite(product.id) ? '#0a353c' : undefined"
+            :color="favorites.isFavorite(product.id) ? 'var(--color-primary)' : undefined"
           />
         </button>
         <button type="button" class="icon-btn" aria-label="اشتراک‌گذاری" @click="shareProduct">
@@ -331,7 +331,7 @@ function onAddressSubmit(address: string) {
           <IconHeart
             :size="20"
             :filled="favorites.isFavorite(product.id)"
-            :color="favorites.isFavorite(product.id) ? '#0a353c' : undefined"
+            :color="favorites.isFavorite(product.id) ? 'var(--color-primary)' : undefined"
           />
         </button>
         <button type="button" class="icon-btn" aria-label="اشتراک‌گذاری" @click="shareProduct">
@@ -689,7 +689,7 @@ function onAddressSubmit(address: string) {
 
 .thumb--active {
   padding: 3px;
-  border: 2px solid #0a353c;
+  border: 2px solid var(--color-primary);
 }
 
 .thumb--active .thumb__swatch {
@@ -885,7 +885,7 @@ function onAddressSubmit(address: string) {
 
 .color-dot--active {
   border-color: transparent;
-  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0a353c;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--color-primary);
 }
 
 .tags {

src/views/products/ProductsView.vue

@@ -811,7 +811,7 @@ onUnmounted(() => {
               <IconHeart
                 :size="18"
                 :filled="favorites.isFavorite(item.id)"
-                :color="favorites.isFavorite(item.id) ? '#0a353c' : '#9ca3af'"
+                :color="favorites.isFavorite(item.id) ? 'var(--color-primary)' : '#9ca3af'"
               />
             </button>
           </div>