Sync primitive colors (#512)

# Motivation

Currently, the primitive CSS variable values are lagging behind the
updates in Figma.

# Changes

- Mark the variables unused in the design as deprecated to ensure they
are not used in the future.
- Update the changed variable values.

# Screenshots

Tested locally by checking multiple nns-dapp pages to ensure there are
no color issues.

<img width="1434" alt="image"
src="https://github.com/user-attachments/assets/ddf47813-d216-4162-b5be-50ea3df5e96e">

<img width="1440" alt="image"
src="https://github.com/user-attachments/assets/a7f9db2c-83be-4177-b933-b819462838fc">

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/lib/styles/global/colors.scss

@@ -10,60 +10,74 @@
   --cp-light-75: #f9f7ff;
   --cp-light-100: var(--cp-light-50);
   --cp-light-125: #dadef2;
-  --cp-light-150: #ebedf9;
+  // @deprecated (same as --cp-light-125)
+  --cp-light-150: #dadef2;
   --cp-light-200: #eef1fe;
   --cp-light-250: #6f7fcd;
+  // @deprecated
   --cp-light-400: #34407c;
-  --cp-light-500: #32449e;
+  // @deprecated (same as --cp-light-600)
+  --cp-light-500: #3d4d99;
   --cp-light-600: #3d4d99;
   --cp-light-900: #151a33;
+  // @deprecated
   --cp-light-opaque: #ffffff40; // --cp-light-50 with 40% opacity
   --cp-light-gradient-1: #d4e7fa;
   --cp-light-gradient-2: #f2dae2;
+  // @deprecated (same as  --cp-light-50-45)
   --cp-light-hover-overlay: rgba(255, 255, 255, 0.45);
   --cp-light-50-45: rgba(var(--cp-light-50-rgb), 0.45);
 
   // dark theme
   --cp-dark-accent: #906bff;
   --cp-dark-50: #fff;
   --cp-dark-75: var(--cp-dark-50);
-  --cp-dark-100: #d7cdf6;
+  --cp-dark-100: #897dad;
   --cp-dark-200: #b0a3d9;
+  // @deprecated
   --cp-dark-250: #a688ff;
+  // @deprecated
   --cp-dark-350: #4b3bf8;
   --cp-dark-400: #3d3061;
   --cp-dark-450: #2b1b4d;
   --cp-dark-500: #342759;
-  --cp-dark-550: #3c2e66;
+  --cp-dark-550: #56497a;
   --cp-dark-600: #170c36;
   --cp-dark-650: #150c31;
   --cp-dark-900: #130a2c;
   --cp-dark-1000: rgb(var(--cp-dark-1000-rgb));
   --cp-dark-1000-rgb: 0, 0, 0;
+  // @deprecated (same as  --cp-dark-1000-20)
   --cp-dark-opaque: #00000020;
   --cp-dark-gradient-1: #0f0f4d;
   --cp-dark-gradient-2: #4d1259;
+  // @deprecated (same as --cp-dark-1000-20)
   --cp-dark-hover-overlay: rgba(0, 0, 0, 0.2);
   --cp-dark-1000-20: rgba(var(--cp-dark-1000-rgb), 0.2);
 
   // Accessory
-  --fade: #24143d60;
-  --fade-dark: #24143d80;
-  --orchid-tint: #b871d9;
-  --orchid: #af63db;
-  --indigo: #553b75;
-  --indigo-tint: #e1cfef;
+  --fade: #0e0b2660;
+  --fade-dark: #05070a80;
+  --orchid-tint: #bb5fea25;
+  --orchid: #bb5fea;
+  --indigo: #906bff;
+  --indigo-tint: #906bff25;
+  // @deprecated
   --deep-violet: #603a68;
+  // @deprecated
   --deep-violet-tint: #634a65;
+  // @deprecated
   --blue-dark: #3d4c7a;
-  --blue: #198ae3;
-  --blue-tint: #c1d4f1;
-  --orange: #e38b1b;
+  --blue: #4d79ff;
+  --blue-tint: #4d79ff25;
+  --orange: #faa123;
+  // @deprecated
   --orange-mid: #fdc087;
-  --orange-tint: #f3ddbb;
+  --orange-tint: #faa12325;
+  // @deprecated
   --green-dark: #3c586d;
-  --green: #30af91;
-  --green-tint: #c7e3e1;
-  --pink: #ea6c99;
-  --pink-tint: #ebd4e7;
+  --green: #2db286;
+  --green-tint: #2db28625;
+  --pink: #f2556f;
+  --pink-tint: #f2556f25;
 }

src/lib/styles/themes/dark.scss

@@ -68,7 +68,7 @@
 
   //Tooltip
   --tooltip-background: var(--cp-light-75);
-  --tooltip-border-color: var(--cp-light-hover-overlay);
+  --tooltip-border-color: var(--cp-light-50-45);
   --tooltip-divider: var(--cp-light-150);
   --tooltip-description-color: var(--cp-light-600);
   --tooltip-text-color: var(--cp-light-900);
@@ -127,7 +127,7 @@
   );
   --body-color: var(--cp-dark-100);
 
-  --content-background: var(--cp-dark-opaque);
+  --content-background: var(--cp-dark-1000-20);
   --content-color: var(--text-color);
   --content-start-background: var(--cp-dark-600);
   --content-start-color: var(--text-color);
@@ -180,7 +180,7 @@
   --card-background-contrast-rgb: var(--text-color-rgb);
   --card-background-shade: var(--cp-dark-450);
   --card-background-tint: var(--cp-dark-400);
-  --card-background-disabled: var(--cp-dark-opaque);
+  --card-background-disabled: var(--cp-dark-1000-20);
 
   /* Design: Dark/Bg/Background-02 */
   --background: var(--cp-dark-550);