@aquera/nile-elements 1.9.11 → 2.0.0

package/demo/nxtgen-dark.css

@@ -0,0 +1,2265 @@
+/* _Primitives - Style */
+
+:root {
+  --ng-color-base-white: #FFFFFFFF;
+  --ng-color-base-black: #000000FF;
+  --ng-color-base-transparent: #FFFFFF00;
+  --ng-color-graylightmode-25: #FDFDFDFF;
+  --ng-color-graylightmode-50: #FAFAFAFF;
+  --ng-color-graylightmode-100: #F5F5F5FF;
+  --ng-color-graylightmode-200: #E9EAEBFF;
+  --ng-color-graylightmode-300: #D5D7DAFF;
+  --ng-color-graylightmode-400: #A4A7AEFF;
+  --ng-color-graylightmode-500: #717680FF;
+  --ng-color-graylightmode-600: #535862FF;
+  --ng-color-graylightmode-700: #414651FF;
+  --ng-color-graylightmode-800: #252B37FF;
+  --ng-color-graylightmode-900: #181D27FF;
+  --ng-color-graylightmode-950: #0A0D12FF;
+  --ng-color-graydarkmode-25: #FAFAFAFF;
+  --ng-color-graydarkmode-50: #F7F7F7FF;
+  --ng-color-graydarkmode-100: #F0F0F1FF;
+  --ng-color-graydarkmode-200: #ECECEDFF;
+  --ng-color-graydarkmode-300: #CECFD2FF;
+  --ng-color-graydarkmode-400: #94979CFF;
+  --ng-color-graydarkmode-500: #85888EFF;
+  --ng-color-graydarkmode-600: #61656CFF;
+  --ng-color-graydarkmode-700: #373A41FF;
+  --ng-color-graydarkmode-800: #22262FFF;
+  --ng-color-graydarkmode-900: #13161BFF;
+  --ng-color-graydarkmode-950: #0C0E12FF;
+  --ng-color-graydarkmodealpha-25: #FFFFFFFA;
+  --ng-color-graydarkmodealpha-50: #FFFFFFF5;
+  --ng-color-graydarkmodealpha-100: #FFFFFFF0;
+  --ng-color-graydarkmodealpha-200: #FFFFFFEB;
+  --ng-color-graydarkmodealpha-300: #FFFFFFCC;
+  --ng-color-graydarkmodealpha-400: #FFFFFF8F;
+  --ng-color-graydarkmodealpha-500: #FFFFFF80;
+  --ng-color-graydarkmodealpha-600: #FFFFFF59;
+  --ng-color-graydarkmodealpha-700: #FFFFFF29;
+  --ng-color-graydarkmodealpha-800: #FFFFFF14;
+  --ng-color-graydarkmodealpha-900: #FFFFFF0A;
+  --ng-color-graydarkmodealpha-950: #FFFFFF00;
+  --ng-color-brand-25: #FCFAFFFF;
+  --ng-color-brand-50: #F9F5FFFF;
+  --ng-color-brand-100: #F4EBFFFF;
+  --ng-color-brand-200: #E9D7FEFF;
+  --ng-color-brand-300: #D6BBFBFF;
+  --ng-color-brand-400: #B692F6FF;
+  --ng-color-brand-500: #9E77EDFF;
+  --ng-color-brand-600: #7F56D9FF;
+  --ng-color-brand-700: #6941C6FF;
+  --ng-color-brand-800: #53389EFF;
+  --ng-color-brand-900: #42307DFF;
+  --ng-color-brand-950: #2C1C5FFF;
+  --ng-color-error-25: #FFFBFAFF;
+  --ng-color-error-50: #FEF3F2FF;
+  --ng-color-error-100: #FEE4E2FF;
+  --ng-color-error-200: #FECDCAFF;
+  --ng-color-error-300: #FDA29BFF;
+  --ng-color-error-400: #F97066FF;
+  --ng-color-error-500: #F04438FF;
+  --ng-color-error-600: #D92D20FF;
+  --ng-color-error-700: #B42318FF;
+  --ng-color-error-800: #912018FF;
+  --ng-color-error-900: #7A271AFF;
+  --ng-color-error-950: #55160CFF;
+  --ng-color-warning-25: #FFFCF5FF;
+  --ng-color-warning-50: #FFFAEBFF;
+  --ng-color-warning-100: #FEF0C7FF;
+  --ng-color-warning-200: #FEDF89FF;
+  --ng-color-warning-300: #FEC84BFF;
+  --ng-color-warning-400: #FDB022FF;
+  --ng-color-warning-500: #F79009FF;
+  --ng-color-warning-600: #DC6803FF;
+  --ng-color-warning-700: #B54708FF;
+  --ng-color-warning-800: #93370DFF;
+  --ng-color-warning-900: #7A2E0EFF;
+  --ng-color-warning-950: #4E1D09FF;
+  --ng-color-success-25: #F6FEF9FF;
+  --ng-color-success-50: #ECFDF3FF;
+  --ng-color-success-100: #DCFAE6FF;
+  --ng-color-success-200: #ABEFC6FF;
+  --ng-color-success-300: #75E0A7FF;
+  --ng-color-success-400: #47CD89FF;
+  --ng-color-success-500: #17B26AFF;
+  --ng-color-success-600: #079455FF;
+  --ng-color-success-700: #067647FF;
+  --ng-color-success-800: #085D3AFF;
+  --ng-color-success-900: #074D31FF;
+  --ng-color-success-950: #053321FF;
+  --ng-color-grayblue-25: #FCFCFDFF;
+  --ng-color-grayblue-50: #F8F9FCFF;
+  --ng-color-grayblue-100: #EAECF5FF;
+  --ng-color-grayblue-200: #D5D9EBFF;
+  --ng-color-grayblue-300: #B3B8DBFF;
+  --ng-color-grayblue-400: #717BBCFF;
+  --ng-color-grayblue-500: #4E5BA6FF;
+  --ng-color-grayblue-600: #3E4784FF;
+  --ng-color-grayblue-700: #363F72FF;
+  --ng-color-grayblue-800: #293056FF;
+  --ng-color-grayblue-900: #101323FF;
+  --ng-color-grayblue-950: #0D0F1CFF;
+  --ng-color-graycool-25: #FCFCFDFF;
+  --ng-color-graycool-50: #F9F9FBFF;
+  --ng-color-graycool-100: #EFF1F5FF;
+  --ng-color-graycool-200: #DCDFEAFF;
+  --ng-color-graycool-300: #B9C0D4FF;
+  --ng-color-graycool-400: #7D89B0FF;
+  --ng-color-graycool-500: #5D6B98FF;
+  --ng-color-graycool-600: #4A5578FF;
+  --ng-color-graycool-700: #404968FF;
+  --ng-color-graycool-800: #30374FFF;
+  --ng-color-graycool-900: #111322FF;
+  --ng-color-graycool-950: #0E101BFF;
+  --ng-color-graymodern-25: #FCFCFDFF;
+  --ng-color-graymodern-50: #F8FAFCFF;
+  --ng-color-graymodern-100: #EEF2F6FF;
+  --ng-color-graymodern-200: #E3E8EFFF;
+  --ng-color-graymodern-300: #CDD5DFFF;
+  --ng-color-graymodern-400: #9AA4B2FF;
+  --ng-color-graymodern-500: #697586FF;
+  --ng-color-graymodern-600: #4B5565FF;
+  --ng-color-graymodern-700: #364152FF;
+  --ng-color-graymodern-800: #202939FF;
+  --ng-color-graymodern-900: #121926FF;
+  --ng-color-graymodern-950: #0D121CFF;
+  --ng-color-grayneutral-25: #FCFCFDFF;
+  --ng-color-grayneutral-50: #F9FAFBFF;
+  --ng-color-grayneutral-100: #F3F4F6FF;
+  --ng-color-grayneutral-200: #E5E7EBFF;
+  --ng-color-grayneutral-300: #D2D6DBFF;
+  --ng-color-grayneutral-400: #9DA4AEFF;
+  --ng-color-grayneutral-500: #6C737FFF;
+  --ng-color-grayneutral-600: #4D5761FF;
+  --ng-color-grayneutral-700: #384250FF;
+  --ng-color-grayneutral-800: #1F2A37FF;
+  --ng-color-grayneutral-900: #111927FF;
+  --ng-color-grayneutral-950: #0D121CFF;
+  --ng-color-grayiron-25: #FCFCFCFF;
+  --ng-color-grayiron-50: #FAFAFAFF;
+  --ng-color-grayiron-100: #F4F4F5FF;
+  --ng-color-grayiron-200: #E4E4E7FF;
+  --ng-color-grayiron-300: #D1D1D6FF;
+  --ng-color-grayiron-400: #A0A0ABFF;
+  --ng-color-grayiron-500: #70707BFF;
+  --ng-color-grayiron-600: #51525CFF;
+  --ng-color-grayiron-700: #3F3F46FF;
+  --ng-color-grayiron-800: #26272BFF;
+  --ng-color-grayiron-900: #1A1A1EFF;
+  --ng-color-grayiron-950: #131316FF;
+  --ng-color-graytrue-25: #FCFCFCFF;
+  --ng-color-graytrue-50: #F7F7F7FF;
+  --ng-color-graytrue-100: #F5F5F5FF;
+  --ng-color-graytrue-200: #E5E5E5FF;
+  --ng-color-graytrue-300: #D6D6D6FF;
+  --ng-color-graytrue-400: #A3A3A3FF;
+  --ng-color-graytrue-500: #737373FF;
+  --ng-color-graytrue-600: #525252FF;
+  --ng-color-graytrue-700: #424242FF;
+  --ng-color-graytrue-800: #292929FF;
+  --ng-color-graytrue-900: #141414FF;
+  --ng-color-graytrue-950: #0F0F0FFF;
+  --ng-color-graywarm-25: #FDFDFCFF;
+  --ng-color-graywarm-50: #FAFAF9FF;
+  --ng-color-graywarm-100: #F5F5F4FF;
+  --ng-color-graywarm-200: #E7E5E4FF;
+  --ng-color-graywarm-300: #D7D3D0FF;
+  --ng-color-graywarm-400: #A9A29DFF;
+  --ng-color-graywarm-500: #79716BFF;
+  --ng-color-graywarm-600: #57534EFF;
+  --ng-color-graywarm-700: #44403CFF;
+  --ng-color-graywarm-800: #292524FF;
+  --ng-color-graywarm-900: #1C1917FF;
+  --ng-color-graywarm-950: #171412FF;
+  --ng-color-moss-25: #FAFDF7FF;
+  --ng-color-moss-50: #F5FBEEFF;
+  --ng-color-moss-100: #E6F4D7FF;
+  --ng-color-moss-200: #CEEAB0FF;
+  --ng-color-moss-300: #ACDC79FF;
+  --ng-color-moss-400: #86CB3CFF;
+  --ng-color-moss-500: #669F2AFF;
+  --ng-color-moss-600: #4F7A21FF;
+  --ng-color-moss-700: #3F621AFF;
+  --ng-color-moss-800: #335015FF;
+  --ng-color-moss-900: #2B4212FF;
+  --ng-color-moss-950: #1A280BFF;
+  --ng-color-greenlight-25: #FAFEF5FF;
+  --ng-color-greenlight-50: #F3FEE7FF;
+  --ng-color-greenlight-100: #E3FBCCFF;
+  --ng-color-greenlight-200: #D0F8ABFF;
+  --ng-color-greenlight-300: #A6EF67FF;
+  --ng-color-greenlight-400: #85E13AFF;
+  --ng-color-greenlight-500: #66C61CFF;
+  --ng-color-greenlight-600: #4CA30DFF;
+  --ng-color-greenlight-700: #3B7C0FFF;
+  --ng-color-greenlight-800: #326212FF;
+  --ng-color-greenlight-900: #2B5314FF;
+  --ng-color-greenlight-950: #15290AFF;
+  --ng-color-green-25: #F6FEF9FF;
+  --ng-color-green-50: #EDFCF2FF;
+  --ng-color-green-100: #D3F8DFFF;
+  --ng-color-green-200: #AAF0C4FF;
+  --ng-color-green-300: #73E2A3FF;
+  --ng-color-green-400: #3CCB7FFF;
+  --ng-color-green-500: #16B364FF;
+  --ng-color-green-600: #099250FF;
+  --ng-color-green-700: #087443FF;
+  --ng-color-green-800: #095C37FF;
+  --ng-color-green-900: #084C2EFF;
+  --ng-color-green-950: #052E1CFF;
+  --ng-color-teal-25: #F6FEFCFF;
+  --ng-color-teal-50: #F0FDF9FF;
+  --ng-color-teal-100: #CCFBEFFF;
+  --ng-color-teal-200: #99F6E0FF;
+  --ng-color-teal-300: #5FE9D0FF;
+  --ng-color-teal-400: #2ED3B7FF;
+  --ng-color-teal-500: #15B79EFF;
+  --ng-color-teal-600: #0E9384FF;
+  --ng-color-teal-700: #107569FF;
+  --ng-color-teal-800: #125D56FF;
+  --ng-color-teal-900: #134E48FF;
+  --ng-color-teal-950: #0A2926FF;
+  --ng-color-cyan-25: #F5FEFFFF;
+  --ng-color-cyan-50: #ECFDFFFF;
+  --ng-color-cyan-100: #CFF9FEFF;
+  --ng-color-cyan-200: #A5F0FCFF;
+  --ng-color-cyan-300: #67E3F9FF;
+  --ng-color-cyan-400: #22CCEEFF;
+  --ng-color-cyan-500: #06AED4FF;
+  --ng-color-cyan-600: #088AB2FF;
+  --ng-color-cyan-700: #0E7090FF;
+  --ng-color-cyan-800: #155B75FF;
+  --ng-color-cyan-900: #164C63FF;
+  --ng-color-cyan-950: #0D2D3AFF;
+  --ng-color-bluelight-25: #F5FBFFFF;
+  --ng-color-bluelight-50: #F0F9FFFF;
+  --ng-color-bluelight-100: #E0F2FEFF;
+  --ng-color-bluelight-200: #B9E6FEFF;
+  --ng-color-bluelight-300: #7CD4FDFF;
+  --ng-color-bluelight-400: #36BFFAFF;
+  --ng-color-bluelight-500: #0BA5ECFF;
+  --ng-color-bluelight-600: #0086C9FF;
+  --ng-color-bluelight-700: #026AA2FF;
+  --ng-color-bluelight-800: #065986FF;
+  --ng-color-bluelight-900: #0B4A6FFF;
+  --ng-color-bluelight-950: #062C41FF;
+  --ng-color-blue-25: #F5FAFFFF;
+  --ng-color-blue-50: #EFF8FFFF;
+  --ng-color-blue-100: #D1E9FFFF;
+  --ng-color-blue-200: #B2DDFFFF;
+  --ng-color-blue-300: #84CAFFFF;
+  --ng-color-blue-400: #53B1FDFF;
+  --ng-color-blue-500: #2E90FAFF;
+  --ng-color-blue-600: #1570EFFF;
+  --ng-color-blue-700: #175CD3FF;
+  --ng-color-blue-800: #1849A9FF;
+  --ng-color-blue-900: #194185FF;
+  --ng-color-blue-950: #102A56FF;
+  --ng-color-bluedark-25: #F5F8FFFF;
+  --ng-color-bluedark-50: #EFF4FFFF;
+  --ng-color-bluedark-100: #D1E0FFFF;
+  --ng-color-bluedark-200: #B2CCFFFF;
+  --ng-color-bluedark-300: #84ADFFFF;
+  --ng-color-bluedark-400: #528BFFFF;
+  --ng-color-bluedark-500: #2970FFFF;
+  --ng-color-bluedark-600: #155EEFFF;
+  --ng-color-bluedark-700: #004EEBFF;
+  --ng-color-bluedark-800: #0040C1FF;
+  --ng-color-bluedark-900: #00359EFF;
+  --ng-color-bluedark-950: #002266FF;
+  --ng-color-indigo-25: #F5F8FFFF;
+  --ng-color-indigo-50: #EEF4FFFF;
+  --ng-color-indigo-100: #E0EAFFFF;
+  --ng-color-indigo-200: #C7D7FEFF;
+  --ng-color-indigo-300: #A4BCFDFF;
+  --ng-color-indigo-400: #8098F9FF;
+  --ng-color-indigo-500: #6172F3FF;
+  --ng-color-indigo-600: #444CE7FF;
+  --ng-color-indigo-700: #3538CDFF;
+  --ng-color-indigo-800: #2D31A6FF;
+  --ng-color-indigo-900: #2D3282FF;
+  --ng-color-indigo-950: #1F235BFF;
+  --ng-color-violet-25: #FBFAFFFF;
+  --ng-color-violet-50: #F5F3FFFF;
+  --ng-color-violet-100: #ECE9FEFF;
+  --ng-color-violet-200: #DDD6FEFF;
+  --ng-color-violet-300: #C3B5FDFF;
+  --ng-color-violet-400: #A48AFBFF;
+  --ng-color-violet-500: #875BF7FF;
+  --ng-color-violet-600: #7839EEFF;
+  --ng-color-violet-700: #6927DAFF;
+  --ng-color-violet-800: #5720B7FF;
+  --ng-color-violet-900: #491C96FF;
+  --ng-color-violet-950: #2E125EFF;
+  --ng-color-purple-25: #FAFAFFFF;
+  --ng-color-purple-50: #F4F3FFFF;
+  --ng-color-purple-100: #EBE9FEFF;
+  --ng-color-purple-200: #D9D6FEFF;
+  --ng-color-purple-300: #BDB4FEFF;
+  --ng-color-purple-400: #9B8AFBFF;
+  --ng-color-purple-500: #7A5AF8FF;
+  --ng-color-purple-600: #6938EFFF;
+  --ng-color-purple-700: #5925DCFF;
+  --ng-color-purple-800: #4A1FB8FF;
+  --ng-color-purple-900: #3E1C96FF;
+  --ng-color-purple-950: #27115FFF;
+  --ng-color-fuchsia-25: #FEFAFFFF;
+  --ng-color-fuchsia-50: #FDF4FFFF;
+  --ng-color-fuchsia-100: #FBE8FFFF;
+  --ng-color-fuchsia-200: #F6D0FEFF;
+  --ng-color-fuchsia-300: #EEAAFDFF;
+  --ng-color-fuchsia-400: #E478FAFF;
+  --ng-color-fuchsia-500: #D444F1FF;
+  --ng-color-fuchsia-600: #BA24D5FF;
+  --ng-color-fuchsia-700: #9F1AB1FF;
+  --ng-color-fuchsia-800: #821890FF;
+  --ng-color-fuchsia-900: #6F1877FF;
+  --ng-color-fuchsia-950: #47104CFF;
+  --ng-color-pink-25: #FEF6FBFF;
+  --ng-color-pink-50: #FDF2FAFF;
+  --ng-color-pink-100: #FCE7F6FF;
+  --ng-color-pink-200: #FCCEEEFF;
+  --ng-color-pink-300: #FAA7E0FF;
+  --ng-color-pink-400: #F670C7FF;
+  --ng-color-pink-500: #EE46BCFF;
+  --ng-color-pink-600: #DD2590FF;
+  --ng-color-pink-700: #C11574FF;
+  --ng-color-pink-800: #9E165FFF;
+  --ng-color-pink-900: #851651FF;
+  --ng-color-pink-950: #4E0D30FF;
+  --ng-color-rose-25: #FFF5F6FF;
+  --ng-color-rose-50: #FFF1F3FF;
+  --ng-color-rose-100: #FFE4E8FF;
+  --ng-color-rose-200: #FECDD6FF;
+  --ng-color-rose-300: #FEA3B4FF;
+  --ng-color-rose-400: #FD6F8EFF;
+  --ng-color-rose-500: #F63D68FF;
+  --ng-color-rose-600: #E31B54FF;
+  --ng-color-rose-700: #C01048FF;
+  --ng-color-rose-800: #A11043FF;
+  --ng-color-rose-900: #89123EFF;
+  --ng-color-rose-950: #510B24FF;
+  --ng-color-orangedark-25: #FFF9F5FF;
+  --ng-color-orangedark-50: #FFF4EDFF;
+  --ng-color-orangedark-100: #FFE6D5FF;
+  --ng-color-orangedark-200: #FFD6AEFF;
+  --ng-color-orangedark-300: #FF9C66FF;
+  --ng-color-orangedark-400: #FF692EFF;
+  --ng-color-orangedark-500: #FF4405FF;
+  --ng-color-orangedark-600: #E62E05FF;
+  --ng-color-orangedark-700: #BC1B06FF;
+  --ng-color-orangedark-800: #97180CFF;
+  --ng-color-orangedark-900: #771A0DFF;
+  --ng-color-orangedark-950: #57130AFF;
+  --ng-color-orange-25: #FEFAF5FF;
+  --ng-color-orange-50: #FEF6EEFF;
+  --ng-color-orange-100: #FDEAD7FF;
+  --ng-color-orange-200: #F9DBAFFF;
+  --ng-color-orange-300: #F7B27AFF;
+  --ng-color-orange-400: #F38744FF;
+  --ng-color-orange-500: #EF6820FF;
+  --ng-color-orange-600: #E04F16FF;
+  --ng-color-orange-700: #B93815FF;
+  --ng-color-orange-800: #932F19FF;
+  --ng-color-orange-900: #772917FF;
+  --ng-color-orange-950: #511C10FF;
+  --ng-color-yellow-25: #FEFDF0FF;
+  --ng-color-yellow-50: #FEFBE8FF;
+  --ng-color-yellow-100: #FEF7C3FF;
+  --ng-color-yellow-200: #FEEE95FF;
+  --ng-color-yellow-300: #FDE272FF;
+  --ng-color-yellow-400: #FAC515FF;
+  --ng-color-yellow-500: #EAAA08FF;
+  --ng-color-yellow-600: #CA8504FF;
+  --ng-color-yellow-700: #A15C07FF;
+  --ng-color-yellow-800: #854A0EFF;
+  --ng-color-yellow-900: #713B12FF;
+  --ng-color-yellow-950: #542C0DFF;
+  --ng-spacing-0: 0px;
+  --ng-spacing-0-5: 2px;
+  --ng-spacing-1: 4px;
+  --ng-spacing-1-5: 6px;
+  --ng-spacing-2: 8px;
+  --ng-spacing-3: 12px;
+  --ng-spacing-4: 16px;
+  --ng-spacing-5: 20px;
+  --ng-spacing-6: 24px;
+  --ng-spacing-7: 28px;
+  --ng-spacing-8: 32px;
+  --ng-spacing-10: 40px;
+  --ng-spacing-12: 48px;
+  --ng-spacing-16: 64px;
+  --ng-spacing-20: 80px;
+  --ng-spacing-24: 96px;
+  --ng-spacing-32: 128px;
+  --ng-spacing-40: 160px;
+  --ng-spacing-48: 192px;
+  --ng-spacing-56: 224px;
+  --ng-spacing-64: 256px;
+  --ng-spacing-80: 320px;
+  --ng-spacing-96: 384px;
+  --ng-spacing-120: 480px;
+  --ng-spacing-140: 560px;
+  --ng-spacing-160: 640px;
+  --ng-spacing-180: 720px;
+  --ng-spacing-192: 768px;
+  --ng-spacing-256: 1024px;
+  --ng-spacing-320: 1280px;
+  --ng-spacing-360: 1440px;
+  --ng-spacing-400: 1600px;
+  --ng-spacing-480: 1920px;
+  --ng-spacing-2-5: 10px;
+  --ng-spacing-3-5: 14px;
+  --ng-spacing-4-5: 18px;
+  --ng-spacing-312: 312px;
+  --ng-spacing-164: 164px;
+  --ng-spacing-108: 108px;
+  --ng-spacing-296: 296px;
+  --ng-spacing-68: 68px;
+  --ng-spacing-264: 264px;
+  --ng-spacing-40px: 40px;
+
+  /* Typography tokens */
+
+  --ng-font-weight-100: 100;
+  --ng-font-weight-200: 200;
+  --ng-font-weight-300: 300;
+  --ng-font-weight-400: 400;
+  --ng-font-weight-500: 500;
+  --ng-font-weight-600: 600;
+  --ng-font-weight-700: 700;
+  --ng-font-weight-800: 800;
+  --ng-font-weight-900: 900;
+}
+
+/* Semantic Tokens - nileNg (light default; dark via @media, or forced via data-theme) */
+
+
+:root {
+  color-scheme: light dark;
+  --ng-colors-text-primary-900: var(--ng-color-graylightmode-900);
+  --ng-colors-text-primary-on-brand: var(--ng-color-base-white);
+  --ng-colors-text-secondary-700: var(--ng-color-graylightmode-700);
+  --ng-colors-text-secondary-hover: var(--ng-color-graylightmode-800);
+  --ng-colors-text-secondary-on-brand: var(--ng-color-bluedark-200);
+  --ng-colors-text-tertiary-600: var(--ng-color-graylightmode-600);
+  --ng-colors-text-tertiary-hover: var(--ng-color-graylightmode-700);
+  --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-200);
+  --ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
+  --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
+  --ng-colors-text-white: var(--ng-color-base-white);
+  --ng-colors-text-disabled: var(--ng-color-graylightmode-500);
+  --ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
+  --ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
+  --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
+  --ng-colors-text-brand-secondary-700: var(--ng-color-bluedark-700);
+  --ng-colors-text-brand-secondary-hover: var(--ng-color-bluedark-800);
+  --ng-colors-text-brand-tertiary-600: var(--ng-color-bluedark-600);
+  --ng-colors-text-brand-tertiary-alt: var(--ng-color-bluedark-600);
+  --ng-colors-text-error-primary-600: var(--ng-color-error-600);
+  --ng-colors-text-error-primary-hover: var(--ng-color-error-700);
+  --ng-colors-text-warning-primary-600: var(--ng-color-warning-600);
+  --ng-colors-text-success-primary-600: var(--ng-color-success-600);
+  --ng-colors-border-primary: var(--ng-color-graylightmode-300);
+  --ng-colors-border-secondary: var(--ng-color-graylightmode-200);
+  --ng-colors-border-secondary-alt: #00000014;
+  --ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
+  --ng-colors-border-neutral: var(--ng-color-graylightmode-400);
+  --ng-colors-border-disabled: var(--ng-color-graylightmode-300);
+  --ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-200);
+  --ng-colors-border-brand: var(--ng-color-bluedark-500);
+  --ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
+  --ng-colors-border-error: var(--ng-color-error-500);
+  --ng-colors-border-error-subtle: var(--ng-color-error-300);
+  --ng-colors-border-success: var(--ng-color-success-500);
+  --ng-colors-border-success-subtle: var(--ng-color-success-300);
+  --ng-colors-border-warning: var(--ng-color-warning-500);
+  --ng-colors-border-warning-subtle: var(--ng-color-warning-300);
+  --ng-colors-fg-primary-900: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-alpha-white-10: #FFFFFF1A;
+  --ng-componentcolors-alpha-white-20: #FFFFFF33;
+  --ng-componentcolors-alpha-white-30: #FFFFFF4D;
+  --ng-componentcolors-alpha-white-40: #FFFFFF66;
+  --ng-componentcolors-alpha-white-50: #FFFFFF80;
+  --ng-componentcolors-alpha-white-60: #FFFFFF99;
+  --ng-componentcolors-alpha-white-70: #FFFFFFB2;
+  --ng-componentcolors-alpha-white-80: #FFFFFFCC;
+  --ng-componentcolors-alpha-white-90: #FFFFFFE5;
+  --ng-componentcolors-alpha-white-100: #FFFFFFFF;
+  --ng-componentcolors-alpha-black-10: #0000001A;
+  --ng-componentcolors-alpha-black-20: #00000033;
+  --ng-componentcolors-alpha-black-30: #0000004D;
+  --ng-componentcolors-alpha-black-40: #00000066;
+  --ng-componentcolors-alpha-black-50: #00000080;
+  --ng-componentcolors-alpha-black-60: #00000099;
+  --ng-componentcolors-alpha-black-70: #000000B2;
+  --ng-componentcolors-alpha-black-80: #000000CC;
+  --ng-componentcolors-alpha-black-90: #000000E5;
+  --ng-componentcolors-alpha-black-100: #000000FF;
+  --ng-componentcolors-utility-gray-50: var(--ng-color-graylightmode-50);
+  --ng-componentcolors-components-appstorebadges-app-store-badge-border: #A6A6A6FF;
+  --ng-componentcolors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF;
+  --ng-componentcolors-components-button-primary-icon: var(--ng-color-bluedark-300);
+  --ng-componentcolors-components-button-primary-icon-hover: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-button-destructive-primary-icon: var(--ng-color-error-300);
+  --ng-componentcolors-components-button-destructive-primary-icon-hover: var(--ng-color-error-200);
+  --ng-componentcolors-components-footer-button-fg: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-footer-button-fg-hover: var(--ng-color-base-white);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand-on-brand: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-brand: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-gray: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-error: var(--ng-color-error-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-warning: var(--ng-color-warning-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-success: var(--ng-color-success-600);
+  --ng-componentcolors-components-mockups-screen-mockup-border: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-components-sliders-slider-handle-bg: var(--ng-color-base-white);
+  --ng-componentcolors-components-sliders-slider-handle-border: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-toggle-button-fg-disabled: var(--ng-color-graylightmode-50);
+  --ng-componentcolors-components-toggle-border: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-components-toggle-slim-border-pressed: var(--ng-colors-bg-brand-solid);
+  --ng-componentcolors-components-toggle-slim-border-pressed-hover: var(--ng-colors-bg-brand-solid-hover);
+  --ng-componentcolors-components-tooltips-tooltip-supporting-text: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-components-text-editor-icon-fg: var(--ng-color-graylightmode-400);
+  --ng-componentcolors-components-text-editor-icon-fg-active: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-utility-gray-100: var(--ng-color-graylightmode-100);
+  --ng-componentcolors-utility-gray-200: var(--ng-color-graylightmode-200);
+  --ng-componentcolors-utility-gray-300: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-utility-gray-400: var(--ng-color-graylightmode-400);
+  --ng-componentcolors-utility-gray-500: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-utility-gray-600: var(--ng-color-graylightmode-600);
+  --ng-componentcolors-utility-gray-700: var(--ng-color-graylightmode-700);
+  --ng-componentcolors-utility-gray-800: var(--ng-color-graylightmode-800);
+  --ng-componentcolors-utility-gray-900: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-utility-brand-50: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-brand-50-alt: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-brand-100: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-brand-100-alt: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-brand-200: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-200-alt: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-300: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-300-alt: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-400: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-400-alt: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-500: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-brand-500-alt: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-brand-600: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-600-alt: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-700: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-700-alt: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-800: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-800-alt: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-900: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-brand-900-alt: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-error-50: var(--ng-color-error-50);
+  --ng-componentcolors-utility-error-100: var(--ng-color-error-100);
+  --ng-componentcolors-utility-error-200: var(--ng-color-error-200);
+  --ng-componentcolors-utility-error-300: var(--ng-color-error-300);
+  --ng-componentcolors-utility-error-400: var(--ng-color-error-400);
+  --ng-componentcolors-utility-error-500: var(--ng-color-error-500);
+  --ng-componentcolors-utility-error-600: var(--ng-color-error-600);
+  --ng-componentcolors-utility-error-700: var(--ng-color-error-700);
+  --ng-componentcolors-utility-warning-50: var(--ng-color-warning-50);
+  --ng-componentcolors-utility-warning-100: var(--ng-color-warning-100);
+  --ng-componentcolors-utility-warning-200: var(--ng-color-warning-200);
+  --ng-componentcolors-utility-warning-300: var(--ng-color-warning-300);
+  --ng-componentcolors-utility-warning-400: var(--ng-color-warning-400);
+  --ng-componentcolors-utility-warning-500: var(--ng-color-warning-500);
+  --ng-componentcolors-utility-warning-600: var(--ng-color-warning-600);
+  --ng-componentcolors-utility-warning-700: var(--ng-color-warning-700);
+  --ng-componentcolors-utility-success-50: var(--ng-color-success-50);
+  --ng-componentcolors-utility-success-100: var(--ng-color-success-100);
+  --ng-componentcolors-utility-success-200: var(--ng-color-success-200);
+  --ng-componentcolors-utility-success-300: var(--ng-color-success-300);
+  --ng-componentcolors-utility-success-400: var(--ng-color-success-400);
+  --ng-componentcolors-utility-success-500: var(--ng-color-success-500);
+  --ng-componentcolors-utility-success-600: var(--ng-color-success-600);
+  --ng-componentcolors-utility-success-700: var(--ng-color-success-700);
+  --ng-componentcolors-utility-gray-blue-50: var(--ng-color-grayblue-50);
+  --ng-componentcolors-utility-gray-blue-100: var(--ng-color-grayblue-100);
+  --ng-componentcolors-utility-gray-blue-200: var(--ng-color-grayblue-200);
+  --ng-componentcolors-utility-gray-blue-300: var(--ng-color-grayblue-300);
+  --ng-componentcolors-utility-gray-blue-400: var(--ng-color-grayblue-400);
+  --ng-componentcolors-utility-gray-blue-500: var(--ng-color-grayblue-500);
+  --ng-componentcolors-utility-gray-blue-600: var(--ng-color-grayblue-600);
+  --ng-componentcolors-utility-gray-blue-700: var(--ng-color-grayblue-700);
+  --ng-componentcolors-utility-green-50: var(--ng-color-green-50);
+  --ng-componentcolors-utility-green-100: var(--ng-color-green-100);
+  --ng-componentcolors-utility-green-200: var(--ng-color-green-200);
+  --ng-componentcolors-utility-green-300: var(--ng-color-green-300);
+  --ng-componentcolors-utility-green-400: var(--ng-color-green-400);
+  --ng-componentcolors-utility-green-500: var(--ng-color-green-500);
+  --ng-componentcolors-utility-green-600: var(--ng-color-green-600);
+  --ng-componentcolors-utility-green-700: var(--ng-color-green-700);
+  --ng-componentcolors-utility-blue-light-50: var(--ng-color-bluelight-50);
+  --ng-componentcolors-utility-blue-light-100: var(--ng-color-bluelight-100);
+  --ng-componentcolors-utility-blue-light-200: var(--ng-color-bluelight-200);
+  --ng-componentcolors-utility-blue-light-300: var(--ng-color-bluelight-300);
+  --ng-componentcolors-utility-blue-light-400: var(--ng-color-bluelight-400);
+  --ng-componentcolors-utility-blue-light-500: var(--ng-color-bluelight-500);
+  --ng-componentcolors-utility-blue-light-600: var(--ng-color-bluelight-600);
+  --ng-componentcolors-utility-blue-light-700: var(--ng-color-bluelight-700);
+  --ng-componentcolors-utility-blue-50: var(--ng-color-blue-50);
+  --ng-componentcolors-utility-blue-100: var(--ng-color-blue-100);
+  --ng-componentcolors-utility-blue-200: var(--ng-color-blue-200);
+  --ng-componentcolors-utility-blue-300: var(--ng-color-blue-300);
+  --ng-componentcolors-utility-blue-400: var(--ng-color-blue-400);
+  --ng-componentcolors-utility-blue-500: var(--ng-color-blue-500);
+  --ng-componentcolors-utility-blue-600: var(--ng-color-blue-600);
+  --ng-componentcolors-utility-blue-700: var(--ng-color-blue-700);
+  --ng-componentcolors-utility-blue-dark-50: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-blue-dark-100: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-blue-dark-200: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-blue-dark-300: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-blue-dark-400: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-blue-dark-500: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-blue-dark-600: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-blue-dark-700: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-indigo-50: var(--ng-color-indigo-50);
+  --ng-componentcolors-utility-indigo-100: var(--ng-color-indigo-100);
+  --ng-componentcolors-utility-indigo-200: var(--ng-color-indigo-200);
+  --ng-componentcolors-utility-indigo-300: var(--ng-color-indigo-300);
+  --ng-componentcolors-utility-indigo-400: var(--ng-color-indigo-400);
+  --ng-componentcolors-utility-indigo-500: var(--ng-color-indigo-500);
+  --ng-componentcolors-utility-indigo-600: var(--ng-color-indigo-600);
+  --ng-componentcolors-utility-indigo-700: var(--ng-color-indigo-700);
+  --ng-componentcolors-utility-purple-50: var(--ng-color-purple-50);
+  --ng-componentcolors-utility-purple-100: var(--ng-color-purple-100);
+  --ng-componentcolors-utility-purple-200: var(--ng-color-purple-200);
+  --ng-componentcolors-utility-purple-300: var(--ng-color-purple-300);
+  --ng-componentcolors-utility-purple-400: var(--ng-color-purple-400);
+  --ng-componentcolors-utility-purple-500: var(--ng-color-purple-500);
+  --ng-componentcolors-utility-purple-600: var(--ng-color-purple-600);
+  --ng-componentcolors-utility-purple-700: var(--ng-color-purple-700);
+  --ng-componentcolors-utility-fuchsia-50: var(--ng-color-fuchsia-50);
+  --ng-componentcolors-utility-fuchsia-100: var(--ng-color-fuchsia-100);
+  --ng-componentcolors-utility-fuchsia-200: var(--ng-color-fuchsia-200);
+  --ng-componentcolors-utility-fuchsia-300: var(--ng-color-fuchsia-300);
+  --ng-componentcolors-utility-fuchsia-400: var(--ng-color-fuchsia-400);
+  --ng-componentcolors-utility-fuchsia-500: var(--ng-color-fuchsia-500);
+  --ng-componentcolors-utility-fuchsia-600: var(--ng-color-fuchsia-600);
+  --ng-componentcolors-utility-fuchsia-700: var(--ng-color-fuchsia-700);
+  --ng-componentcolors-utility-pink-50: var(--ng-color-pink-50);
+  --ng-componentcolors-utility-pink-100: var(--ng-color-pink-100);
+  --ng-componentcolors-utility-pink-200: var(--ng-color-pink-200);
+  --ng-componentcolors-utility-pink-300: var(--ng-color-pink-300);
+  --ng-componentcolors-utility-pink-400: var(--ng-color-pink-400);
+  --ng-componentcolors-utility-pink-500: var(--ng-color-pink-500);
+  --ng-componentcolors-utility-pink-600: var(--ng-color-pink-600);
+  --ng-componentcolors-utility-pink-700: var(--ng-color-pink-700);
+  --ng-componentcolors-utility-orange-dark-50: var(--ng-color-orangedark-50);
+  --ng-componentcolors-utility-orange-dark-100: var(--ng-color-orangedark-100);
+  --ng-componentcolors-utility-orange-dark-200: var(--ng-color-orangedark-200);
+  --ng-componentcolors-utility-orange-dark-300: var(--ng-color-orangedark-300);
+  --ng-componentcolors-utility-orange-dark-400: var(--ng-color-orangedark-400);
+  --ng-componentcolors-utility-orange-dark-500: var(--ng-color-orangedark-500);
+  --ng-componentcolors-utility-orange-dark-600: var(--ng-color-orangedark-600);
+  --ng-componentcolors-utility-orange-dark-700: var(--ng-color-orangedark-700);
+  --ng-componentcolors-utility-orange-50: var(--ng-color-orange-50);
+  --ng-componentcolors-utility-orange-100: var(--ng-color-orange-100);
+  --ng-componentcolors-utility-orange-200: var(--ng-color-orange-200);
+  --ng-componentcolors-utility-orange-300: var(--ng-color-orange-300);
+  --ng-componentcolors-utility-orange-400: var(--ng-color-orange-400);
+  --ng-componentcolors-utility-orange-500: var(--ng-color-orange-500);
+  --ng-componentcolors-utility-orange-600: var(--ng-color-orange-600);
+  --ng-componentcolors-utility-orange-700: var(--ng-color-orange-700);
+  --ng-colors-fg-secondary-700: var(--ng-color-graylightmode-700);
+  --ng-colors-fg-secondary-hover: var(--ng-color-graylightmode-800);
+  --ng-colors-fg-tertiary-600: var(--ng-color-graylightmode-600);
+  --ng-colors-fg-tertiary-hover: var(--ng-color-graylightmode-700);
+  --ng-colors-fg-quaternary-400: var(--ng-color-graylightmode-400);
+  --ng-colors-fg-quaternary-hover: var(--ng-color-graylightmode-500);
+  --ng-colors-fg-white: var(--ng-color-base-white);
+  --ng-colors-fg-disabled: var(--ng-color-graylightmode-400);
+  --ng-colors-fg-disabled-subtle: var(--ng-color-graylightmode-300);
+  --ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-600);
+  --ng-colors-fg-brand-primary-alt: var(--ng-colors-fg-brand-primary-600);
+  --ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-500);
+  --ng-colors-fg-brand-secondary-alt: var(--ng-colors-fg-brand-secondary-500);
+  --ng-colors-fg-brand-secondary-hover: var(--ng-color-bluedark-600);
+  --ng-colors-fg-error-primary: var(--ng-color-error-600);
+  --ng-colors-fg-error-secondary: var(--ng-color-error-500);
+  --ng-colors-fg-warning-primary: var(--ng-color-warning-600);
+  --ng-colors-fg-warning-secondary: var(--ng-color-warning-500);
+  --ng-colors-fg-success-primary: var(--ng-color-success-600);
+  --ng-colors-fg-success-secondary: var(--ng-color-success-500);
+  --ng-colors-bg-primary: var(--ng-color-base-white);
+  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-500);
+  --ng-colors-effects-focus-ring-error: var(--ng-color-error-500);
+  --ng-colors-effects-shadow-xs: #0A0D120D;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-md: #0A0D1224;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-lg: #0A0D122E;
+  --ng-colors-effects-portfoliomockups-shadow-overlay-lg: #0A0D121F;
+  --ng-colors-effects-portfoliomockups-shadow-grid-md: #0A0D1214;
+  --ng-colors-effects-shadow-sm-01: #0A0D121A;
+  --ng-colors-effects-shadow-sm-02: #0A0D121A;
+  --ng-colors-effects-shadow-md-01: #0A0D121A;
+  --ng-colors-effects-shadow-md-02: #0A0D120F;
+  --ng-colors-effects-shadow-lg-01: #0A0D1214;
+  --ng-colors-effects-shadow-lg-02: #0A0D1208;
+  --ng-colors-effects-shadow-lg-03: #0A0D120A;
+  --ng-colors-effects-shadow-xl-01: #0a0d1214;
+  --ng-colors-effects-shadow-xl-02: #0A0D1208;
+  --ng-colors-effects-shadow-xl-03: #0A0D120A;
+  --ng-colors-effects-shadow-2xl-01: #0A0D122E;
+  --ng-colors-effects-shadow-2xl-02: #0A0D120A;
+  --ng-colors-effects-shadow-3xl-01: #0A0D1224;
+  --ng-colors-effects-shadow-3xl-02: #0A0D120A;
+  --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
+  --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
+  --ng-colors-bg-primary-alt: var(--ng-color-base-white);
+  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
+  --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
+  --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
+  --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
+  --ng-colors-bg-active: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);
+  --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-50);
+  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-100);
+  --ng-colors-bg-brand-solid: var(--ng-color-bluedark-600);
+  --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-700);
+  --ng-colors-bg-brand-section: var(--ng-color-bluedark-800);
+  --ng-colors-bg-brand-section-subtle: var(--ng-color-bluedark-700);
+  --ng-colors-bg-error-primary: var(--ng-color-error-50);
+  --ng-colors-bg-error-secondary: var(--ng-color-error-100);
+  --ng-colors-bg-error-solid: var(--ng-color-error-600);
+  --ng-colors-bg-error-solid-hover: var(--ng-color-error-700);
+  --ng-colors-bg-warning-primary: var(--ng-color-warning-50);
+  --ng-colors-bg-warning-secondary: var(--ng-color-warning-100);
+  --ng-colors-bg-warning-solid: var(--ng-color-warning-600);
+  --ng-colors-bg-success-primary: var(--ng-color-success-50);
+  --ng-colors-bg-success-secondary: var(--ng-color-success-100);
+  --ng-colors-bg-success-solid: var(--ng-color-success-600);
+  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
+  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
+  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
+  --ng-componentcolors-utility-yellow-300: var(--ng-color-yellow-300);
+  --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-400);
+  --ng-componentcolors-utility-yellow-500: var(--ng-color-yellow-500);
+  --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-600);
+  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-700);
+
+  /* Shadows */
+  --ng-shadow-none: none;
+  --ng-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+  --ng-shadow-sm: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+  --ng-shadow-md: 0px 4px 6px -1px var(--ng-colors-effects-shadow-md-01), 0px 2px 4px -2px var(--ng-colors-effects-shadow-md-02);
+  --ng-shadow-lg: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03);
+  --ng-shadow-xl: 0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03);
+  --ng-shadow-2xl: 0px 24px 48px -12px var(--ng-colors-effects-shadow-2xl-01), 0px 4px 4px -2px var(--ng-colors-effects-shadow-2xl-02);
+  --ng-shadow-3xl: 0px 32px 64px -12px var(--ng-colors-effects-shadow-3xl-01), 0px 5px 5px -2.5px var(--ng-colors-effects-shadow-3xl-02);
+  --ng-shadow-xs-skeuomorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+
+  /* Focus Rings */
+  --ng-focus-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error: 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+  --ng-focus-ring-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-shadow-sm: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px 0px var(--ng-colors-effects-shadow-sm-02), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+  --ng-focus-ring-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+
+  /* Gradients */
+  --ng-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graylightmode-600) 0%, var(--ng-color-graylightmode-500) 100%);
+  --ng-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graylightmode-700) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graylightmode-800) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graylightmode-800) 16.72%, var(--ng-color-graylightmode-600) 83.39%);
+  --ng-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graylightmode-800) 8.33%, var(--ng-color-graylightmode-700) 91.67%);
+  --ng-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-700) 100%);
+
+  --ng-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
+  --ng-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-800) 16.72%, var(--ng-color-bluedark-600) 83.39%);
+  --ng-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-800) 8.33%, var(--ng-color-bluedark-700) 91.67%);
+  --ng-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-700) 100%);
+  --ng-primary-standard: linear-gradient(180deg, var(--ng-colors-fg-white) 0%, var(--ng-colors-bg-brand-primary) 100%);
+
+  --ng-white-gradient-1: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-50) 100%);
+  --ng-white-gradient-2: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-3: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-4: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-5: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-200) 100%);
+  --ng-white-gradient-6: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-200) 100%);
+  --ng-white-gradient-7: linear-gradient(180deg, var(--ng-color-graylightmode-100) 0%, var(--ng-color-graylightmode-200) 100%);
+
+  --ng-skeuemorphic-gradient-border: linear-gradient(180deg, var(--ng-componentcolors-alpha-white-10) 0%, var(--ng-color-base-transparent) 100%);
+
+  --ng-linear-gradient-01: linear-gradient(180deg, #A5C0EE 0%, #FBC5EC 100%);
+  --ng-linear-gradient-02: linear-gradient(180deg, #FBC2EB 0%, #A18CD1 105.25%);
+  --ng-linear-gradient-03: linear-gradient(180deg, #FFD1FF 0%, #FAD0C4 100%);
+  --ng-linear-gradient-04: linear-gradient(225deg, #FAD0C4 0%, #FF9A9E 100%) ;
+  --ng-linear-gradient-05: linear-gradient(270deg, #FCB69F 0%, #FFECD2 100%);
+  --ng-linear-gradient-06: linear-gradient(180deg, #FECFEF 0%, #FF989C 100%);
+  --ng-linear-gradient-07: linear-gradient(45deg, #FF9DE4 0%, #FFEAF6 100%);
+  --ng-linear-gradient-20: linear-gradient(45deg, #E9DEFA 0%, #FFF6EB 100%);
+
+  --ng-mask-rim: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  --ng-mask-composite-xor: xor;
+  --ng-mask-composite-exclude: exclude;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ng-colors-text-primary-900: var(--ng-color-graydarkmode-50);
+    --ng-colors-text-primary-on-brand: var(--ng-color-graylightmode-900);
+    --ng-colors-text-secondary-700: var(--ng-color-graydarkmode-300);
+    --ng-colors-text-secondary-hover: var(--ng-color-graydarkmode-200);
+    --ng-colors-text-secondary-on-brand: var(--ng-color-bluedark-300);
+    --ng-colors-text-tertiary-600: var(--ng-color-graydarkmode-400);
+    --ng-colors-text-tertiary-hover: var(--ng-color-graydarkmode-300);
+    --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
+    --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
+    --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
+    --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+    --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
+    --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
+    --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
+    --ng-colors-text-brand-secondary-700: var(--ng-color-bluedark-300);
+    --ng-colors-text-brand-secondary-hover: var(--ng-color-bluedark-200);
+    --ng-colors-text-brand-tertiary-600: var(--ng-color-bluedark-400);
+    --ng-colors-text-brand-tertiary-alt: var(--ng-color-bluedark-400);
+    --ng-colors-text-error-primary-600: var(--ng-color-error-400);
+    --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
+    --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
+    --ng-colors-text-success-primary-600: var(--ng-color-success-400);
+    --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
+    --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-secondary-alt: #FFFFFF14;
+    --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
+    --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
+    --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-brand: var(--ng-color-bluedark-400);
+    --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
+    --ng-colors-border-error: var(--ng-color-error-400);
+    --ng-colors-border-error-subtle: var(--ng-color-error-600);
+    --ng-colors-border-success: var(--ng-color-success-400);
+    --ng-colors-border-success-subtle: var(--ng-color-success-600);
+    --ng-colors-border-warning: var(--ng-color-warning-400);
+    --ng-colors-border-warning-subtle: var(--ng-color-warning-600);
+    --ng-colors-fg-primary-900: var(--ng-color-graydarkmode-50);
+    --ng-componentcolors-utility-gray-50: var(--ng-color-graydarkmode-900);
+
+    --ng-componentcolors-components-appstorebadges-app-store-badge-border: #333333FF;
+    --ng-componentcolors-components-avatars-avatar-styles-bg-neutral: #373A41FF;
+    --ng-componentcolors-components-footer-button-fg: var(--ng-color-bluedark-300);
+    --ng-componentcolors-components-icons-icons-icon-fg-brand: var(--ng-color-bluedark-400);
+    --ng-componentcolors-components-icons-icons-icon-fg-brand-on-brand: var(--ng-color-bluedark-300);
+
+    --ng-componentcolors-components-icons--featured-iconlight-fg-brand: var(--ng-color-bluedark-400);
+    --ng-componentcolors-components-icons--featured-iconlight-fg-gray: var(--ng-color-graydarkmode-400);
+    --ng-componentcolors-components-icons--featured-iconlight-fg-error: var(--ng-color-error-400);
+    --ng-componentcolors-components-icons--featured-iconlight-fg-warning: var(--ng-color-warning-400);
+    --ng-componentcolors-components-icons--featured-iconlight-fg-success: var(--ng-color-success-400);
+
+    --ng-componentcolors-components-mockups-screen-mockup-border: var(--ng-color-graydarkmode-700);
+    --ng-componentcolors-components-sliders-slider-handle-bg: var(--ng-color-graydarkmode-800);
+    --ng-componentcolors-components-sliders-slider-handle-border: var(--ng-color-bluedark-500);
+    --ng-componentcolors-components-toggle-button-fg-disabled: var(--ng-color-graydarkmode-800);
+    --ng-componentcolors-components-toggle-border: var(--ng-color-graydarkmode-700);
+    --ng-componentcolors-components-tooltips-tooltip-supporting-text: var(--ng-color-graydarkmode-400);
+    --ng-componentcolors-components-text-editor-icon-fg: var(--ng-color-graydarkmode-500);
+    --ng-componentcolors-components-text-editor-icon-fg-active: var(--ng-color-graydarkmode-300);
+
+    --ng-componentcolors-utility-gray-100: var(--ng-color-graydarkmode-800);
+    --ng-componentcolors-utility-gray-200: var(--ng-color-graydarkmode-800);
+    --ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-700);
+    --ng-componentcolors-utility-gray-400: var(--ng-color-graydarkmode-600);
+    --ng-componentcolors-utility-gray-500: var(--ng-color-graydarkmode-500);
+    --ng-componentcolors-utility-gray-600: var(--ng-color-graydarkmode-400);
+    --ng-componentcolors-utility-gray-700: var(--ng-color-graydarkmode-300);
+    --ng-componentcolors-utility-gray-800: var(--ng-color-graydarkmode-200);
+    --ng-componentcolors-utility-gray-900: var(--ng-color-graydarkmode-100);
+    --ng-componentcolors-utility-brand-50: var(--ng-color-bluedark-950);
+    --ng-componentcolors-utility-brand-50-alt: var(--ng-color-bluedark-950);
+    --ng-componentcolors-utility-brand-100: var(--ng-color-bluedark-900);
+    --ng-componentcolors-utility-brand-100-alt: var(--ng-color-bluedark-900);
+    --ng-componentcolors-utility-brand-200: var(--ng-color-bluedark-800);
+    --ng-componentcolors-utility-brand-200-alt: var(--ng-color-bluedark-800);
+    --ng-componentcolors-utility-brand-300: var(--ng-color-bluedark-700);
+    --ng-componentcolors-utility-brand-300-alt: var(--ng-color-bluedark-700);
+    --ng-componentcolors-utility-brand-400: var(--ng-color-bluedark-600);
+    --ng-componentcolors-utility-brand-400-alt: var(--ng-color-bluedark-600);
+    --ng-componentcolors-utility-brand-600: var(--ng-color-bluedark-400);
+    --ng-componentcolors-utility-brand-600-alt: var(--ng-color-bluedark-400);
+    --ng-componentcolors-utility-brand-700: var(--ng-color-bluedark-300);
+    --ng-componentcolors-utility-brand-700-alt: var(--ng-color-bluedark-300);
+    --ng-componentcolors-utility-brand-800: var(--ng-color-bluedark-200);
+    --ng-componentcolors-utility-brand-800-alt: var(--ng-color-bluedark-200);
+    --ng-componentcolors-utility-brand-900: var(--ng-color-bluedark-100);
+    --ng-componentcolors-utility-brand-900-alt: var(--ng-color-bluedark-100);
+    --ng-componentcolors-utility-error-50: var(--ng-color-error-950);
+    --ng-componentcolors-utility-error-100: var(--ng-color-error-900);
+    --ng-componentcolors-utility-error-200: var(--ng-color-error-800);
+    --ng-componentcolors-utility-error-300: var(--ng-color-error-700);
+    --ng-componentcolors-utility-error-400: var(--ng-color-error-600);
+    --ng-componentcolors-utility-error-600: var(--ng-color-error-400);
+    --ng-componentcolors-utility-error-700: var(--ng-color-error-300);
+    --ng-componentcolors-utility-warning-50: var(--ng-color-warning-950);
+    --ng-componentcolors-utility-warning-100: var(--ng-color-warning-900);
+    --ng-componentcolors-utility-warning-200: var(--ng-color-warning-800);
+    --ng-componentcolors-utility-warning-300: var(--ng-color-warning-700);
+    --ng-componentcolors-utility-warning-400: var(--ng-color-warning-600);
+    --ng-componentcolors-utility-warning-600: var(--ng-color-warning-400);
+    --ng-componentcolors-utility-warning-700: var(--ng-color-warning-300);
+    --ng-componentcolors-utility-success-50: var(--ng-color-success-950);
+    --ng-componentcolors-utility-success-100: var(--ng-color-success-900);
+    --ng-componentcolors-utility-success-200: var(--ng-color-success-800);
+    --ng-componentcolors-utility-success-300: var(--ng-color-success-700);
+    --ng-componentcolors-utility-success-400: var(--ng-color-success-600);
+    --ng-componentcolors-utility-success-600: var(--ng-color-success-400);
+    --ng-componentcolors-utility-success-700: var(--ng-color-success-300);
+    --ng-componentcolors-utility-gray-blue-50: var(--ng-color-grayblue-950);
+    --ng-componentcolors-utility-gray-blue-100: var(--ng-color-grayblue-900);
+    --ng-componentcolors-utility-gray-blue-200: var(--ng-color-grayblue-800);
+    --ng-componentcolors-utility-gray-blue-300: var(--ng-color-grayblue-700);
+    --ng-componentcolors-utility-gray-blue-400: var(--ng-color-grayblue-600);
+    --ng-componentcolors-utility-gray-blue-600: var(--ng-color-grayblue-400);
+    --ng-componentcolors-utility-gray-blue-700: var(--ng-color-grayblue-300);
+    --ng-componentcolors-utility-green-50: var(--ng-color-green-950);
+    --ng-componentcolors-utility-green-100: var(--ng-color-green-900);
+    --ng-componentcolors-utility-green-200: var(--ng-color-green-800);
+    --ng-componentcolors-utility-green-300: var(--ng-color-green-700);
+    --ng-componentcolors-utility-green-400: var(--ng-color-green-600);
+    --ng-componentcolors-utility-green-600: var(--ng-color-green-400);
+    --ng-componentcolors-utility-green-700: var(--ng-color-green-300);
+    --ng-componentcolors-utility-blue-light-50: var(--ng-color-bluelight-950);
+    --ng-componentcolors-utility-blue-light-100: var(--ng-color-bluelight-900);
+    --ng-componentcolors-utility-blue-light-200: var(--ng-color-bluelight-800);
+    --ng-componentcolors-utility-blue-light-300: var(--ng-color-bluelight-700);
+    --ng-componentcolors-utility-blue-light-400: var(--ng-color-bluelight-600);
+    --ng-componentcolors-utility-blue-light-600: var(--ng-color-bluelight-400);
+    --ng-componentcolors-utility-blue-light-700: var(--ng-color-bluelight-300);
+    --ng-componentcolors-utility-blue-50: var(--ng-color-blue-950);
+    --ng-componentcolors-utility-blue-100: var(--ng-color-blue-900);
+    --ng-componentcolors-utility-blue-200: var(--ng-color-blue-800);
+    --ng-componentcolors-utility-blue-300: var(--ng-color-blue-700);
+    --ng-componentcolors-utility-blue-400: var(--ng-color-blue-600);
+    --ng-componentcolors-utility-blue-600: var(--ng-color-blue-400);
+    --ng-componentcolors-utility-blue-700: var(--ng-color-blue-300);
+    --ng-componentcolors-utility-blue-dark-50: var(--ng-color-bluedark-950);
+    --ng-componentcolors-utility-blue-dark-100: var(--ng-color-bluedark-900);
+    --ng-componentcolors-utility-blue-dark-200: var(--ng-color-bluedark-800);
+    --ng-componentcolors-utility-blue-dark-300: var(--ng-color-bluedark-700);
+    --ng-componentcolors-utility-blue-dark-400: var(--ng-color-bluedark-600);
+    --ng-componentcolors-utility-blue-dark-600: var(--ng-color-bluedark-400);
+    --ng-componentcolors-utility-blue-dark-700: var(--ng-color-bluedark-300);
+    --ng-componentcolors-utility-indigo-50: var(--ng-color-indigo-950);
+    --ng-componentcolors-utility-indigo-100: var(--ng-color-indigo-900);
+    --ng-componentcolors-utility-indigo-200: var(--ng-color-indigo-800);
+    --ng-componentcolors-utility-indigo-300: var(--ng-color-indigo-700);
+    --ng-componentcolors-utility-indigo-400: var(--ng-color-indigo-600);
+    --ng-componentcolors-utility-indigo-600: var(--ng-color-indigo-400);
+    --ng-componentcolors-utility-indigo-700: var(--ng-color-indigo-300);
+    --ng-componentcolors-utility-purple-50: var(--ng-color-purple-950);
+    --ng-componentcolors-utility-purple-100: var(--ng-color-purple-900);
+    --ng-componentcolors-utility-purple-200: var(--ng-color-purple-800);
+    --ng-componentcolors-utility-purple-300: var(--ng-color-purple-700);
+    --ng-componentcolors-utility-purple-400: var(--ng-color-purple-600);
+    --ng-componentcolors-utility-purple-600: var(--ng-color-purple-400);
+    --ng-componentcolors-utility-purple-700: var(--ng-color-purple-300);
+    --ng-componentcolors-utility-fuchsia-50: var(--ng-color-fuchsia-950);
+    --ng-componentcolors-utility-fuchsia-100: var(--ng-color-fuchsia-900);
+    --ng-componentcolors-utility-fuchsia-200: var(--ng-color-fuchsia-800);
+    --ng-componentcolors-utility-fuchsia-300: var(--ng-color-fuchsia-700);
+    --ng-componentcolors-utility-fuchsia-400: var(--ng-color-fuchsia-600);
+    --ng-componentcolors-utility-fuchsia-600: var(--ng-color-fuchsia-400);
+    --ng-componentcolors-utility-fuchsia-700: var(--ng-color-fuchsia-300);
+    --ng-componentcolors-utility-pink-50: var(--ng-color-pink-950);
+    --ng-componentcolors-utility-pink-100: var(--ng-color-pink-900);
+    --ng-componentcolors-utility-pink-200: var(--ng-color-pink-800);
+    --ng-componentcolors-utility-pink-300: var(--ng-color-pink-700);
+    --ng-componentcolors-utility-pink-400: var(--ng-color-pink-600);
+    --ng-componentcolors-utility-pink-600: var(--ng-color-pink-400);
+    --ng-componentcolors-utility-pink-700: var(--ng-color-pink-300);
+    --ng-componentcolors-utility-orange-dark-50: var(--ng-color-orangedark-950);
+    --ng-componentcolors-utility-orange-dark-100: var(--ng-color-orangedark-900);
+    --ng-componentcolors-utility-orange-dark-200: var(--ng-color-orangedark-800);
+    --ng-componentcolors-utility-orange-dark-300: var(--ng-color-orangedark-700);
+    --ng-componentcolors-utility-orange-dark-400: var(--ng-color-orangedark-600);
+    --ng-componentcolors-utility-orange-dark-600: var(--ng-color-orangedark-400);
+    --ng-componentcolors-utility-orange-dark-700: var(--ng-color-orangedark-300);
+    --ng-componentcolors-utility-orange-50: var(--ng-color-orange-950);
+    --ng-componentcolors-utility-orange-100: var(--ng-color-orange-900);
+    --ng-componentcolors-utility-orange-200: var(--ng-color-orange-800);
+    --ng-componentcolors-utility-orange-300: var(--ng-color-orange-700);
+    --ng-componentcolors-utility-orange-400: var(--ng-color-orange-600);
+    --ng-componentcolors-utility-orange-600: var(--ng-color-orange-400);
+    --ng-componentcolors-utility-orange-700: var(--ng-color-orange-300);
+    --ng-colors-fg-secondary-700: var(--ng-color-graydarkmode-300);
+    --ng-colors-fg-secondary-hover: var(--ng-color-graydarkmode-200);
+    --ng-colors-fg-tertiary-600: var(--ng-color-graydarkmode-400);
+    --ng-colors-fg-tertiary-hover: var(--ng-color-graydarkmode-300);
+    --ng-colors-fg-quaternary-400: var(--ng-color-graydarkmode-500);
+    --ng-colors-fg-quaternary-hover: var(--ng-color-graydarkmode-400);
+    --ng-colors-fg-disabled: var(--ng-color-graydarkmode-600);
+    --ng-colors-fg-disabled-subtle: var(--ng-color-graydarkmode-700);
+    --ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-400);
+    --ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-400);
+    --ng-colors-fg-brand-secondary-hover: var(--ng-color-bluedark-300);
+    --ng-colors-fg-error-primary: var(--ng-color-error-400);
+    --ng-colors-fg-error-secondary: var(--ng-color-error-400);
+    --ng-colors-fg-warning-primary: var(--ng-color-warning-400);
+    --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
+    --ng-colors-fg-success-primary: var(--ng-color-success-400);
+    --ng-colors-fg-success-secondary: var(--ng-color-success-400);
+    --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
+    --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
+    --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
+    --ng-colors-effects-shadow-xs: #0000004D;
+    --ng-colors-effects-portfoliomockups-shadow-main-centre-md: #00000066;
+    --ng-colors-effects-portfoliomockups-shadow-main-centre-lg: #00000080;
+    --ng-colors-effects-portfoliomockups-shadow-overlay-lg: #00000066;
+    --ng-colors-effects-portfoliomockups-shadow-grid-md: #0000004D;
+    --ng-colors-effects-shadow-sm-01: #0000004D;
+    --ng-colors-effects-shadow-sm-02: #0000004D;
+    --ng-colors-effects-shadow-md-01: #0000004D;
+    --ng-colors-effects-shadow-md-02: #00000033;
+    --ng-colors-effects-shadow-lg-01: #0000004D;
+    --ng-colors-effects-shadow-lg-02: #00000033;
+    --ng-colors-effects-shadow-lg-03: #00000033;
+    --ng-colors-effects-shadow-xl-01: #0000004D;
+    --ng-colors-effects-shadow-xl-02: #00000033;
+    --ng-colors-effects-shadow-xl-03: #00000033;
+    --ng-colors-effects-shadow-2xl-01: #00000080;
+    --ng-colors-effects-shadow-2xl-02: #00000033;
+    --ng-colors-effects-shadow-3xl-01: #00000080;
+    --ng-colors-effects-shadow-3xl-02: #00000033;
+    --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
+    --ng-colors-effects-shadow-skeumorphic-inner-border: #00000080;
+    --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
+    --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
+    --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
+    --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
+    --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
+    --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
+    --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
+    --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
+    --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
+    --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-overlay: var(--ng-color-base-black);
+    --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
+    --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
+    --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-900);
+    --ng-colors-bg-brand-solid: var(--ng-color-bluedark-500);
+    --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-400);
+    --ng-colors-bg-brand-section: var(--ng-color-bluedark-900);
+    --ng-colors-bg-brand-section-subtle: var(--ng-color-bluedark-800);
+    --ng-colors-bg-error-primary: var(--ng-color-error-950);
+    --ng-colors-bg-error-secondary: var(--ng-color-error-900);
+    --ng-colors-bg-error-solid: var(--ng-color-error-500);
+    --ng-colors-bg-error-solid-hover: var(--ng-color-error-400);
+    --ng-colors-bg-warning-primary: var(--ng-color-warning-950);
+    --ng-colors-bg-warning-secondary: var(--ng-color-warning-900);
+    --ng-colors-bg-warning-solid: var(--ng-color-warning-500);
+    --ng-colors-bg-success-primary: var(--ng-color-success-950);
+    --ng-colors-bg-success-secondary: var(--ng-color-success-900);
+    --ng-colors-bg-success-solid: var(--ng-color-success-500);
+    --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
+    --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
+    --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
+    --ng-componentcolors-utility-yellow-300: var(--ng-color-yellow-700);
+    --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-600);
+    --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-400);
+    --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-300);
+
+    /* Shadows */
+
+    /* Focus Rings */
+
+    /* Gradients */
+    --ng-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graydarkmode-400) 0%, var(--ng-color-graydarkmode-500) 100%);
+    --ng-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graydarkmode-300) 0%, var(--ng-color-graydarkmode-400) 100%);
+    --ng-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graydarkmode-200) 0%, var(--ng-color-graydarkmode-400) 100%);
+    --ng-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graydarkmode-200) 16.72%, var(--ng-color-graydarkmode-400) 83.39%);
+    --ng-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graydarkmode-200) 8.33%, var(--ng-color-graydarkmode-300) 91.67%);
+    --ng-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graydarkmode-100) 0%, var(--ng-color-graydarkmode-400) 100%);
+    --ng-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graydarkmode-100) 0%, var(--ng-color-graydarkmode-300) 100%);
+
+    --ng-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-500) 0%, var(--ng-color-bluedark-400) 100%);
+    --ng-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
+    --ng-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-500) 100%);
+    --ng-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-700) 16.72%, var(--ng-color-bluedark-500) 83.39%);
+    --ng-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-700) 8.33%, var(--ng-color-bluedark-600) 91.67%);
+    --ng-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-500) 100%);
+    --ng-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
+
+    --ng-white-gradient-1: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-950) 100%);
+    --ng-white-gradient-2: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-800) 100%);
+    --ng-white-gradient-3: linear-gradient(180deg, var(--ng-color-graydarkmode-950) 0%, var(--ng-color-graydarkmode-800) 100%);
+    --ng-white-gradient-4: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-800) 100%);
+    --ng-white-gradient-5: linear-gradient(180deg, var(--ng-color-graydarkmode-950) 0%, var(--ng-color-graydarkmode-700) 100%);
+    --ng-white-gradient-6: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-700) 100%);
+    --ng-white-gradient-7: linear-gradient(180deg, var(--ng-color-graydarkmode-800) 0%, var(--ng-color-graydarkmode-700) 100%);
+
+
+    --ng-linear-gradient-01: linear-gradient(180deg, #3A4A6B 0%, #5A3556 100%);
+    --ng-linear-gradient-02: linear-gradient(180deg, #5A3556 0%, #3A2B5A 105.25%);
+    --ng-linear-gradient-03: linear-gradient(180deg, #5A3560 0%, #5A4540 100%);
+    --ng-linear-gradient-04: linear-gradient(225deg, #5A4540 0%, #6A3535 100%);
+    --ng-linear-gradient-05: linear-gradient(270deg, #5A4035 0%, #5A5040 100%);
+    --ng-linear-gradient-06: linear-gradient(180deg, #5A3555 0%, #6A3540 100%);
+    --ng-linear-gradient-07: linear-gradient(45deg, #6A3555 0%, #5A4555 100%);
+    --ng-linear-gradient-20: linear-gradient(45deg, #3A3555 0%, #5A5040 100%);
+
+  }
+}
+
+/* Manual overrides: data-theme="light" / data-theme="dark" force a theme
+   regardless of OS preference. Higher specificity than :root and the
+   plain-:root dark media query above, so this always wins when present. */
+:root[data-theme="light"] {
+  color-scheme: light;
+  --ng-colors-text-primary-900: var(--ng-color-graylightmode-900);
+  --ng-colors-text-primary-on-brand: var(--ng-color-base-white);
+  --ng-colors-text-secondary-700: var(--ng-color-graylightmode-700);
+  --ng-colors-text-secondary-hover: var(--ng-color-graylightmode-800);
+  --ng-colors-text-secondary-on-brand: var(--ng-color-bluedark-200);
+  --ng-colors-text-tertiary-600: var(--ng-color-graylightmode-600);
+  --ng-colors-text-tertiary-hover: var(--ng-color-graylightmode-700);
+  --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-200);
+  --ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
+  --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
+  --ng-colors-text-white: var(--ng-color-base-white);
+  --ng-colors-text-disabled: var(--ng-color-graylightmode-500);
+  --ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
+  --ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
+  --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
+  --ng-colors-text-brand-secondary-700: var(--ng-color-bluedark-700);
+  --ng-colors-text-brand-secondary-hover: var(--ng-color-bluedark-800);
+  --ng-colors-text-brand-tertiary-600: var(--ng-color-bluedark-600);
+  --ng-colors-text-brand-tertiary-alt: var(--ng-color-bluedark-600);
+  --ng-colors-text-error-primary-600: var(--ng-color-error-600);
+  --ng-colors-text-error-primary-hover: var(--ng-color-error-700);
+  --ng-colors-text-warning-primary-600: var(--ng-color-warning-600);
+  --ng-colors-text-success-primary-600: var(--ng-color-success-600);
+  --ng-colors-border-primary: var(--ng-color-graylightmode-300);
+  --ng-colors-border-secondary: var(--ng-color-graylightmode-200);
+  --ng-colors-border-secondary-alt: #00000014;
+  --ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
+  --ng-colors-border-neutral: var(--ng-color-graylightmode-400);
+  --ng-colors-border-disabled: var(--ng-color-graylightmode-300);
+  --ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-200);
+  --ng-colors-border-brand: var(--ng-color-bluedark-500);
+  --ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
+  --ng-colors-border-error: var(--ng-color-error-500);
+  --ng-colors-border-error-subtle: var(--ng-color-error-300);
+  --ng-colors-border-success: var(--ng-color-success-500);
+  --ng-colors-border-success-subtle: var(--ng-color-success-300);
+  --ng-colors-border-warning: var(--ng-color-warning-500);
+  --ng-colors-border-warning-subtle: var(--ng-color-warning-300);
+  --ng-colors-fg-primary-900: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-alpha-white-10: #FFFFFF1A;
+  --ng-componentcolors-alpha-white-20: #FFFFFF33;
+  --ng-componentcolors-alpha-white-30: #FFFFFF4D;
+  --ng-componentcolors-alpha-white-40: #FFFFFF66;
+  --ng-componentcolors-alpha-white-50: #FFFFFF80;
+  --ng-componentcolors-alpha-white-60: #FFFFFF99;
+  --ng-componentcolors-alpha-white-70: #FFFFFFB2;
+  --ng-componentcolors-alpha-white-80: #FFFFFFCC;
+  --ng-componentcolors-alpha-white-90: #FFFFFFE5;
+  --ng-componentcolors-alpha-white-100: #FFFFFFFF;
+  --ng-componentcolors-alpha-black-10: #0000001A;
+  --ng-componentcolors-alpha-black-20: #00000033;
+  --ng-componentcolors-alpha-black-30: #0000004D;
+  --ng-componentcolors-alpha-black-40: #00000066;
+  --ng-componentcolors-alpha-black-50: #00000080;
+  --ng-componentcolors-alpha-black-60: #00000099;
+  --ng-componentcolors-alpha-black-70: #000000B2;
+  --ng-componentcolors-alpha-black-80: #000000CC;
+  --ng-componentcolors-alpha-black-90: #000000E5;
+  --ng-componentcolors-alpha-black-100: #000000FF;
+  --ng-componentcolors-utility-gray-50: var(--ng-color-graylightmode-50);
+  --ng-componentcolors-components-appstorebadges-app-store-badge-border: #A6A6A6FF;
+  --ng-componentcolors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF;
+  --ng-componentcolors-components-button-primary-icon: var(--ng-color-bluedark-300);
+  --ng-componentcolors-components-button-primary-icon-hover: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-button-destructive-primary-icon: var(--ng-color-error-300);
+  --ng-componentcolors-components-button-destructive-primary-icon-hover: var(--ng-color-error-200);
+  --ng-componentcolors-components-footer-button-fg: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-footer-button-fg-hover: var(--ng-color-base-white);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand-on-brand: var(--ng-color-bluedark-200);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-brand: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-gray: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-error: var(--ng-color-error-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-warning: var(--ng-color-warning-600);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-success: var(--ng-color-success-600);
+  --ng-componentcolors-components-mockups-screen-mockup-border: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-components-sliders-slider-handle-bg: var(--ng-color-base-white);
+  --ng-componentcolors-components-sliders-slider-handle-border: var(--ng-color-bluedark-600);
+  --ng-componentcolors-components-toggle-button-fg-disabled: var(--ng-color-graylightmode-50);
+  --ng-componentcolors-components-toggle-border: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-components-toggle-slim-border-pressed: var(--ng-colors-bg-brand-solid);
+  --ng-componentcolors-components-toggle-slim-border-pressed-hover: var(--ng-colors-bg-brand-solid-hover);
+  --ng-componentcolors-components-tooltips-tooltip-supporting-text: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-components-text-editor-icon-fg: var(--ng-color-graylightmode-400);
+  --ng-componentcolors-components-text-editor-icon-fg-active: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-utility-gray-100: var(--ng-color-graylightmode-100);
+  --ng-componentcolors-utility-gray-200: var(--ng-color-graylightmode-200);
+  --ng-componentcolors-utility-gray-300: var(--ng-color-graylightmode-300);
+  --ng-componentcolors-utility-gray-400: var(--ng-color-graylightmode-400);
+  --ng-componentcolors-utility-gray-500: var(--ng-color-graylightmode-500);
+  --ng-componentcolors-utility-gray-600: var(--ng-color-graylightmode-600);
+  --ng-componentcolors-utility-gray-700: var(--ng-color-graylightmode-700);
+  --ng-componentcolors-utility-gray-800: var(--ng-color-graylightmode-800);
+  --ng-componentcolors-utility-gray-900: var(--ng-color-graylightmode-900);
+  --ng-componentcolors-utility-brand-50: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-brand-50-alt: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-brand-100: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-brand-100-alt: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-brand-200: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-200-alt: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-300: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-300-alt: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-400: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-400-alt: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-500: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-brand-500-alt: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-brand-600: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-600-alt: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-700: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-700-alt: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-800: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-800-alt: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-900: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-brand-900-alt: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-error-50: var(--ng-color-error-50);
+  --ng-componentcolors-utility-error-100: var(--ng-color-error-100);
+  --ng-componentcolors-utility-error-200: var(--ng-color-error-200);
+  --ng-componentcolors-utility-error-300: var(--ng-color-error-300);
+  --ng-componentcolors-utility-error-400: var(--ng-color-error-400);
+  --ng-componentcolors-utility-error-500: var(--ng-color-error-500);
+  --ng-componentcolors-utility-error-600: var(--ng-color-error-600);
+  --ng-componentcolors-utility-error-700: var(--ng-color-error-700);
+  --ng-componentcolors-utility-warning-50: var(--ng-color-warning-50);
+  --ng-componentcolors-utility-warning-100: var(--ng-color-warning-100);
+  --ng-componentcolors-utility-warning-200: var(--ng-color-warning-200);
+  --ng-componentcolors-utility-warning-300: var(--ng-color-warning-300);
+  --ng-componentcolors-utility-warning-400: var(--ng-color-warning-400);
+  --ng-componentcolors-utility-warning-500: var(--ng-color-warning-500);
+  --ng-componentcolors-utility-warning-600: var(--ng-color-warning-600);
+  --ng-componentcolors-utility-warning-700: var(--ng-color-warning-700);
+  --ng-componentcolors-utility-success-50: var(--ng-color-success-50);
+  --ng-componentcolors-utility-success-100: var(--ng-color-success-100);
+  --ng-componentcolors-utility-success-200: var(--ng-color-success-200);
+  --ng-componentcolors-utility-success-300: var(--ng-color-success-300);
+  --ng-componentcolors-utility-success-400: var(--ng-color-success-400);
+  --ng-componentcolors-utility-success-500: var(--ng-color-success-500);
+  --ng-componentcolors-utility-success-600: var(--ng-color-success-600);
+  --ng-componentcolors-utility-success-700: var(--ng-color-success-700);
+  --ng-componentcolors-utility-gray-blue-50: var(--ng-color-grayblue-50);
+  --ng-componentcolors-utility-gray-blue-100: var(--ng-color-grayblue-100);
+  --ng-componentcolors-utility-gray-blue-200: var(--ng-color-grayblue-200);
+  --ng-componentcolors-utility-gray-blue-300: var(--ng-color-grayblue-300);
+  --ng-componentcolors-utility-gray-blue-400: var(--ng-color-grayblue-400);
+  --ng-componentcolors-utility-gray-blue-500: var(--ng-color-grayblue-500);
+  --ng-componentcolors-utility-gray-blue-600: var(--ng-color-grayblue-600);
+  --ng-componentcolors-utility-gray-blue-700: var(--ng-color-grayblue-700);
+  --ng-componentcolors-utility-green-50: var(--ng-color-green-50);
+  --ng-componentcolors-utility-green-100: var(--ng-color-green-100);
+  --ng-componentcolors-utility-green-200: var(--ng-color-green-200);
+  --ng-componentcolors-utility-green-300: var(--ng-color-green-300);
+  --ng-componentcolors-utility-green-400: var(--ng-color-green-400);
+  --ng-componentcolors-utility-green-500: var(--ng-color-green-500);
+  --ng-componentcolors-utility-green-600: var(--ng-color-green-600);
+  --ng-componentcolors-utility-green-700: var(--ng-color-green-700);
+  --ng-componentcolors-utility-blue-light-50: var(--ng-color-bluelight-50);
+  --ng-componentcolors-utility-blue-light-100: var(--ng-color-bluelight-100);
+  --ng-componentcolors-utility-blue-light-200: var(--ng-color-bluelight-200);
+  --ng-componentcolors-utility-blue-light-300: var(--ng-color-bluelight-300);
+  --ng-componentcolors-utility-blue-light-400: var(--ng-color-bluelight-400);
+  --ng-componentcolors-utility-blue-light-500: var(--ng-color-bluelight-500);
+  --ng-componentcolors-utility-blue-light-600: var(--ng-color-bluelight-600);
+  --ng-componentcolors-utility-blue-light-700: var(--ng-color-bluelight-700);
+  --ng-componentcolors-utility-blue-50: var(--ng-color-blue-50);
+  --ng-componentcolors-utility-blue-100: var(--ng-color-blue-100);
+  --ng-componentcolors-utility-blue-200: var(--ng-color-blue-200);
+  --ng-componentcolors-utility-blue-300: var(--ng-color-blue-300);
+  --ng-componentcolors-utility-blue-400: var(--ng-color-blue-400);
+  --ng-componentcolors-utility-blue-500: var(--ng-color-blue-500);
+  --ng-componentcolors-utility-blue-600: var(--ng-color-blue-600);
+  --ng-componentcolors-utility-blue-700: var(--ng-color-blue-700);
+  --ng-componentcolors-utility-blue-dark-50: var(--ng-color-bluedark-50);
+  --ng-componentcolors-utility-blue-dark-100: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-blue-dark-200: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-blue-dark-300: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-blue-dark-400: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-blue-dark-500: var(--ng-color-bluedark-500);
+  --ng-componentcolors-utility-blue-dark-600: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-blue-dark-700: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-indigo-50: var(--ng-color-indigo-50);
+  --ng-componentcolors-utility-indigo-100: var(--ng-color-indigo-100);
+  --ng-componentcolors-utility-indigo-200: var(--ng-color-indigo-200);
+  --ng-componentcolors-utility-indigo-300: var(--ng-color-indigo-300);
+  --ng-componentcolors-utility-indigo-400: var(--ng-color-indigo-400);
+  --ng-componentcolors-utility-indigo-500: var(--ng-color-indigo-500);
+  --ng-componentcolors-utility-indigo-600: var(--ng-color-indigo-600);
+  --ng-componentcolors-utility-indigo-700: var(--ng-color-indigo-700);
+  --ng-componentcolors-utility-purple-50: var(--ng-color-purple-50);
+  --ng-componentcolors-utility-purple-100: var(--ng-color-purple-100);
+  --ng-componentcolors-utility-purple-200: var(--ng-color-purple-200);
+  --ng-componentcolors-utility-purple-300: var(--ng-color-purple-300);
+  --ng-componentcolors-utility-purple-400: var(--ng-color-purple-400);
+  --ng-componentcolors-utility-purple-500: var(--ng-color-purple-500);
+  --ng-componentcolors-utility-purple-600: var(--ng-color-purple-600);
+  --ng-componentcolors-utility-purple-700: var(--ng-color-purple-700);
+  --ng-componentcolors-utility-fuchsia-50: var(--ng-color-fuchsia-50);
+  --ng-componentcolors-utility-fuchsia-100: var(--ng-color-fuchsia-100);
+  --ng-componentcolors-utility-fuchsia-200: var(--ng-color-fuchsia-200);
+  --ng-componentcolors-utility-fuchsia-300: var(--ng-color-fuchsia-300);
+  --ng-componentcolors-utility-fuchsia-400: var(--ng-color-fuchsia-400);
+  --ng-componentcolors-utility-fuchsia-500: var(--ng-color-fuchsia-500);
+  --ng-componentcolors-utility-fuchsia-600: var(--ng-color-fuchsia-600);
+  --ng-componentcolors-utility-fuchsia-700: var(--ng-color-fuchsia-700);
+  --ng-componentcolors-utility-pink-50: var(--ng-color-pink-50);
+  --ng-componentcolors-utility-pink-100: var(--ng-color-pink-100);
+  --ng-componentcolors-utility-pink-200: var(--ng-color-pink-200);
+  --ng-componentcolors-utility-pink-300: var(--ng-color-pink-300);
+  --ng-componentcolors-utility-pink-400: var(--ng-color-pink-400);
+  --ng-componentcolors-utility-pink-500: var(--ng-color-pink-500);
+  --ng-componentcolors-utility-pink-600: var(--ng-color-pink-600);
+  --ng-componentcolors-utility-pink-700: var(--ng-color-pink-700);
+  --ng-componentcolors-utility-orange-dark-50: var(--ng-color-orangedark-50);
+  --ng-componentcolors-utility-orange-dark-100: var(--ng-color-orangedark-100);
+  --ng-componentcolors-utility-orange-dark-200: var(--ng-color-orangedark-200);
+  --ng-componentcolors-utility-orange-dark-300: var(--ng-color-orangedark-300);
+  --ng-componentcolors-utility-orange-dark-400: var(--ng-color-orangedark-400);
+  --ng-componentcolors-utility-orange-dark-500: var(--ng-color-orangedark-500);
+  --ng-componentcolors-utility-orange-dark-600: var(--ng-color-orangedark-600);
+  --ng-componentcolors-utility-orange-dark-700: var(--ng-color-orangedark-700);
+  --ng-componentcolors-utility-orange-50: var(--ng-color-orange-50);
+  --ng-componentcolors-utility-orange-100: var(--ng-color-orange-100);
+  --ng-componentcolors-utility-orange-200: var(--ng-color-orange-200);
+  --ng-componentcolors-utility-orange-300: var(--ng-color-orange-300);
+  --ng-componentcolors-utility-orange-400: var(--ng-color-orange-400);
+  --ng-componentcolors-utility-orange-500: var(--ng-color-orange-500);
+  --ng-componentcolors-utility-orange-600: var(--ng-color-orange-600);
+  --ng-componentcolors-utility-orange-700: var(--ng-color-orange-700);
+  --ng-colors-fg-secondary-700: var(--ng-color-graylightmode-700);
+  --ng-colors-fg-secondary-hover: var(--ng-color-graylightmode-800);
+  --ng-colors-fg-tertiary-600: var(--ng-color-graylightmode-600);
+  --ng-colors-fg-tertiary-hover: var(--ng-color-graylightmode-700);
+  --ng-colors-fg-quaternary-400: var(--ng-color-graylightmode-400);
+  --ng-colors-fg-quaternary-hover: var(--ng-color-graylightmode-500);
+  --ng-colors-fg-white: var(--ng-color-base-white);
+  --ng-colors-fg-disabled: var(--ng-color-graylightmode-400);
+  --ng-colors-fg-disabled-subtle: var(--ng-color-graylightmode-300);
+  --ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-600);
+  --ng-colors-fg-brand-primary-alt: var(--ng-colors-fg-brand-primary-600);
+  --ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-500);
+  --ng-colors-fg-brand-secondary-alt: var(--ng-colors-fg-brand-secondary-500);
+  --ng-colors-fg-brand-secondary-hover: var(--ng-color-bluedark-600);
+  --ng-colors-fg-error-primary: var(--ng-color-error-600);
+  --ng-colors-fg-error-secondary: var(--ng-color-error-500);
+  --ng-colors-fg-warning-primary: var(--ng-color-warning-600);
+  --ng-colors-fg-warning-secondary: var(--ng-color-warning-500);
+  --ng-colors-fg-success-primary: var(--ng-color-success-600);
+  --ng-colors-fg-success-secondary: var(--ng-color-success-500);
+  --ng-colors-bg-primary: var(--ng-color-base-white);
+  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-500);
+  --ng-colors-effects-focus-ring-error: var(--ng-color-error-500);
+  --ng-colors-effects-shadow-xs: #0A0D120D;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-md: #0A0D1224;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-lg: #0A0D122E;
+  --ng-colors-effects-portfoliomockups-shadow-overlay-lg: #0A0D121F;
+  --ng-colors-effects-portfoliomockups-shadow-grid-md: #0A0D1214;
+  --ng-colors-effects-shadow-sm-01: #0A0D121A;
+  --ng-colors-effects-shadow-sm-02: #0A0D121A;
+  --ng-colors-effects-shadow-md-01: #0A0D121A;
+  --ng-colors-effects-shadow-md-02: #0A0D120F;
+  --ng-colors-effects-shadow-lg-01: #0A0D1214;
+  --ng-colors-effects-shadow-lg-02: #0A0D1208;
+  --ng-colors-effects-shadow-lg-03: #0A0D120A;
+  --ng-colors-effects-shadow-xl-01: #0a0d1214;
+  --ng-colors-effects-shadow-xl-02: #0A0D1208;
+  --ng-colors-effects-shadow-xl-03: #0A0D120A;
+  --ng-colors-effects-shadow-2xl-01: #0A0D122E;
+  --ng-colors-effects-shadow-2xl-02: #0A0D120A;
+  --ng-colors-effects-shadow-3xl-01: #0A0D1224;
+  --ng-colors-effects-shadow-3xl-02: #0A0D120A;
+  --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
+  --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
+  --ng-colors-bg-primary-alt: var(--ng-color-base-white);
+  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
+  --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
+  --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
+  --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
+  --ng-colors-bg-active: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
+  --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
+  --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
+  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);
+  --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-50);
+  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-100);
+  --ng-colors-bg-brand-solid: var(--ng-color-bluedark-600);
+  --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-700);
+  --ng-colors-bg-brand-section: var(--ng-color-bluedark-800);
+  --ng-colors-bg-brand-section-subtle: var(--ng-color-bluedark-700);
+  --ng-colors-bg-error-primary: var(--ng-color-error-50);
+  --ng-colors-bg-error-secondary: var(--ng-color-error-100);
+  --ng-colors-bg-error-solid: var(--ng-color-error-600);
+  --ng-colors-bg-error-solid-hover: var(--ng-color-error-700);
+  --ng-colors-bg-warning-primary: var(--ng-color-warning-50);
+  --ng-colors-bg-warning-secondary: var(--ng-color-warning-100);
+  --ng-colors-bg-warning-solid: var(--ng-color-warning-600);
+  --ng-colors-bg-success-primary: var(--ng-color-success-50);
+  --ng-colors-bg-success-secondary: var(--ng-color-success-100);
+  --ng-colors-bg-success-solid: var(--ng-color-success-600);
+  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
+  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
+  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
+  --ng-componentcolors-utility-yellow-300: var(--ng-color-yellow-300);
+  --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-400);
+  --ng-componentcolors-utility-yellow-500: var(--ng-color-yellow-500);
+  --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-600);
+  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-700);
+
+  /* Shadows */
+  --ng-shadow-none: none;
+  --ng-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+  --ng-shadow-sm: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+  --ng-shadow-md: 0px 4px 6px -1px var(--ng-colors-effects-shadow-md-01), 0px 2px 4px -2px var(--ng-colors-effects-shadow-md-02);
+  --ng-shadow-lg: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03);
+  --ng-shadow-xl: 0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03);
+  --ng-shadow-2xl: 0px 24px 48px -12px var(--ng-colors-effects-shadow-2xl-01), 0px 4px 4px -2px var(--ng-colors-effects-shadow-2xl-02);
+  --ng-shadow-3xl: 0px 32px 64px -12px var(--ng-colors-effects-shadow-3xl-01), 0px 5px 5px -2.5px var(--ng-colors-effects-shadow-3xl-02);
+  --ng-shadow-xs-skeuomorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs);
+
+  /* Focus Rings */
+  --ng-focus-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error: 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+  --ng-focus-ring-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-shadow-sm: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px 0px var(--ng-colors-effects-shadow-sm-02), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error-shadow-xs: 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+  --ng-focus-ring-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
+  --ng-focus-ring-error-shadow-xs-skeumorphic: 0px 0px 0px 1px var(--ng-colors-effects-shadow-skeumorphic-inner-border) inset, 0px -2px 0px 0px var(--ng-colors-effects-shadow-skeumorphic-inner) inset, 0px 1px 2px 0px var(--ng-colors-effects-shadow-xs), 0px 0px 0px 2px var(--ng-colors-bg-primary), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring-error);
+
+  /* Gradients */
+  --ng-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graylightmode-600) 0%, var(--ng-color-graylightmode-500) 100%);
+  --ng-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graylightmode-700) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graylightmode-800) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graylightmode-800) 16.72%, var(--ng-color-graylightmode-600) 83.39%);
+  --ng-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graylightmode-800) 8.33%, var(--ng-color-graylightmode-700) 91.67%);
+  --ng-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-600) 100%);
+  --ng-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-700) 100%);
+
+  --ng-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
+  --ng-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-800) 16.72%, var(--ng-color-bluedark-600) 83.39%);
+  --ng-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-800) 8.33%, var(--ng-color-bluedark-700) 91.67%);
+  --ng-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-600) 100%);
+  --ng-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-700) 100%);
+  --ng-primary-standard: linear-gradient(180deg, var(--ng-colors-fg-white) 0%, var(--ng-colors-bg-brand-primary) 100%);
+
+  --ng-white-gradient-1: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-50) 100%);
+  --ng-white-gradient-2: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-3: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-4: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-100) 100%);
+  --ng-white-gradient-5: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-200) 100%);
+  --ng-white-gradient-6: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-200) 100%);
+  --ng-white-gradient-7: linear-gradient(180deg, var(--ng-color-graylightmode-100) 0%, var(--ng-color-graylightmode-200) 100%);
+
+  --ng-skeuemorphic-gradient-border: linear-gradient(180deg, var(--ng-componentcolors-alpha-white-10) 0%, var(--ng-color-base-transparent) 100%);
+
+  --ng-linear-gradient-01: linear-gradient(180deg, #A5C0EE 0%, #FBC5EC 100%);
+  --ng-linear-gradient-02: linear-gradient(180deg, #FBC2EB 0%, #A18CD1 105.25%);
+  --ng-linear-gradient-03: linear-gradient(180deg, #FFD1FF 0%, #FAD0C4 100%);
+  --ng-linear-gradient-04: linear-gradient(225deg, #FAD0C4 0%, #FF9A9E 100%) ;
+  --ng-linear-gradient-05: linear-gradient(270deg, #FCB69F 0%, #FFECD2 100%);
+  --ng-linear-gradient-06: linear-gradient(180deg, #FECFEF 0%, #FF989C 100%);
+  --ng-linear-gradient-07: linear-gradient(45deg, #FF9DE4 0%, #FFEAF6 100%);
+  --ng-linear-gradient-20: linear-gradient(45deg, #E9DEFA 0%, #FFF6EB 100%);
+
+  --ng-mask-rim: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  --ng-mask-composite-xor: xor;
+  --ng-mask-composite-exclude: exclude;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ng-colors-text-primary-900: var(--ng-color-graydarkmode-50);
+  --ng-colors-text-primary-on-brand: var(--ng-color-graylightmode-900);
+  --ng-colors-text-secondary-700: var(--ng-color-graydarkmode-300);
+  --ng-colors-text-secondary-hover: var(--ng-color-graydarkmode-200);
+  --ng-colors-text-secondary-on-brand: var(--ng-color-bluedark-300);
+  --ng-colors-text-tertiary-600: var(--ng-color-graydarkmode-400);
+  --ng-colors-text-tertiary-hover: var(--ng-color-graydarkmode-300);
+  --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
+  --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
+  --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
+  --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+  --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
+  --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
+  --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
+  --ng-colors-text-brand-secondary-700: var(--ng-color-bluedark-300);
+  --ng-colors-text-brand-secondary-hover: var(--ng-color-bluedark-200);
+  --ng-colors-text-brand-tertiary-600: var(--ng-color-bluedark-400);
+  --ng-colors-text-brand-tertiary-alt: var(--ng-color-bluedark-400);
+  --ng-colors-text-error-primary-600: var(--ng-color-error-400);
+  --ng-colors-text-error-primary-hover: var(--ng-color-error-300);
+  --ng-colors-text-warning-primary-600: var(--ng-color-warning-400);
+  --ng-colors-text-success-primary-600: var(--ng-color-success-400);
+  --ng-colors-border-primary: var(--ng-color-graydarkmode-700);
+  --ng-colors-border-secondary: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-secondary-alt: #FFFFFF14;
+  --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
+  --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
+  --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-brand: var(--ng-color-bluedark-400);
+  --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
+  --ng-colors-border-error: var(--ng-color-error-400);
+  --ng-colors-border-error-subtle: var(--ng-color-error-600);
+  --ng-colors-border-success: var(--ng-color-success-400);
+  --ng-colors-border-success-subtle: var(--ng-color-success-600);
+  --ng-colors-border-warning: var(--ng-color-warning-400);
+  --ng-colors-border-warning-subtle: var(--ng-color-warning-600);
+  --ng-colors-fg-primary-900: var(--ng-color-graydarkmode-50);
+  --ng-componentcolors-utility-gray-50: var(--ng-color-graydarkmode-900);
+
+  --ng-componentcolors-components-appstorebadges-app-store-badge-border: #333333FF;
+  --ng-componentcolors-components-avatars-avatar-styles-bg-neutral: #373A41FF;
+  --ng-componentcolors-components-footer-button-fg: var(--ng-color-bluedark-300);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand: var(--ng-color-bluedark-400);
+  --ng-componentcolors-components-icons-icons-icon-fg-brand-on-brand: var(--ng-color-bluedark-300);
+
+  --ng-componentcolors-components-icons--featured-iconlight-fg-brand: var(--ng-color-bluedark-400);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-gray: var(--ng-color-graydarkmode-400);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-error: var(--ng-color-error-400);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-warning: var(--ng-color-warning-400);
+  --ng-componentcolors-components-icons--featured-iconlight-fg-success: var(--ng-color-success-400);
+
+  --ng-componentcolors-components-mockups-screen-mockup-border: var(--ng-color-graydarkmode-700);
+  --ng-componentcolors-components-sliders-slider-handle-bg: var(--ng-color-graydarkmode-800);
+  --ng-componentcolors-components-sliders-slider-handle-border: var(--ng-color-bluedark-500);
+  --ng-componentcolors-components-toggle-button-fg-disabled: var(--ng-color-graydarkmode-800);
+  --ng-componentcolors-components-toggle-border: var(--ng-color-graydarkmode-700);
+  --ng-componentcolors-components-tooltips-tooltip-supporting-text: var(--ng-color-graydarkmode-400);
+  --ng-componentcolors-components-text-editor-icon-fg: var(--ng-color-graydarkmode-500);
+  --ng-componentcolors-components-text-editor-icon-fg-active: var(--ng-color-graydarkmode-300);
+
+  --ng-componentcolors-utility-gray-100: var(--ng-color-graydarkmode-800);
+  --ng-componentcolors-utility-gray-200: var(--ng-color-graydarkmode-800);
+  --ng-componentcolors-utility-gray-300: var(--ng-color-graydarkmode-700);
+  --ng-componentcolors-utility-gray-400: var(--ng-color-graydarkmode-600);
+  --ng-componentcolors-utility-gray-500: var(--ng-color-graydarkmode-500);
+  --ng-componentcolors-utility-gray-600: var(--ng-color-graydarkmode-400);
+  --ng-componentcolors-utility-gray-700: var(--ng-color-graydarkmode-300);
+  --ng-componentcolors-utility-gray-800: var(--ng-color-graydarkmode-200);
+  --ng-componentcolors-utility-gray-900: var(--ng-color-graydarkmode-100);
+  --ng-componentcolors-utility-brand-50: var(--ng-color-bluedark-950);
+  --ng-componentcolors-utility-brand-50-alt: var(--ng-color-bluedark-950);
+  --ng-componentcolors-utility-brand-100: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-brand-100-alt: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-brand-200: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-200-alt: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-brand-300: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-300-alt: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-brand-400: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-400-alt: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-brand-600: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-600-alt: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-brand-700: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-700-alt: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-brand-800: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-800-alt: var(--ng-color-bluedark-200);
+  --ng-componentcolors-utility-brand-900: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-brand-900-alt: var(--ng-color-bluedark-100);
+  --ng-componentcolors-utility-error-50: var(--ng-color-error-950);
+  --ng-componentcolors-utility-error-100: var(--ng-color-error-900);
+  --ng-componentcolors-utility-error-200: var(--ng-color-error-800);
+  --ng-componentcolors-utility-error-300: var(--ng-color-error-700);
+  --ng-componentcolors-utility-error-400: var(--ng-color-error-600);
+  --ng-componentcolors-utility-error-600: var(--ng-color-error-400);
+  --ng-componentcolors-utility-error-700: var(--ng-color-error-300);
+  --ng-componentcolors-utility-warning-50: var(--ng-color-warning-950);
+  --ng-componentcolors-utility-warning-100: var(--ng-color-warning-900);
+  --ng-componentcolors-utility-warning-200: var(--ng-color-warning-800);
+  --ng-componentcolors-utility-warning-300: var(--ng-color-warning-700);
+  --ng-componentcolors-utility-warning-400: var(--ng-color-warning-600);
+  --ng-componentcolors-utility-warning-600: var(--ng-color-warning-400);
+  --ng-componentcolors-utility-warning-700: var(--ng-color-warning-300);
+  --ng-componentcolors-utility-success-50: var(--ng-color-success-950);
+  --ng-componentcolors-utility-success-100: var(--ng-color-success-900);
+  --ng-componentcolors-utility-success-200: var(--ng-color-success-800);
+  --ng-componentcolors-utility-success-300: var(--ng-color-success-700);
+  --ng-componentcolors-utility-success-400: var(--ng-color-success-600);
+  --ng-componentcolors-utility-success-600: var(--ng-color-success-400);
+  --ng-componentcolors-utility-success-700: var(--ng-color-success-300);
+  --ng-componentcolors-utility-gray-blue-50: var(--ng-color-grayblue-950);
+  --ng-componentcolors-utility-gray-blue-100: var(--ng-color-grayblue-900);
+  --ng-componentcolors-utility-gray-blue-200: var(--ng-color-grayblue-800);
+  --ng-componentcolors-utility-gray-blue-300: var(--ng-color-grayblue-700);
+  --ng-componentcolors-utility-gray-blue-400: var(--ng-color-grayblue-600);
+  --ng-componentcolors-utility-gray-blue-600: var(--ng-color-grayblue-400);
+  --ng-componentcolors-utility-gray-blue-700: var(--ng-color-grayblue-300);
+  --ng-componentcolors-utility-green-50: var(--ng-color-green-950);
+  --ng-componentcolors-utility-green-100: var(--ng-color-green-900);
+  --ng-componentcolors-utility-green-200: var(--ng-color-green-800);
+  --ng-componentcolors-utility-green-300: var(--ng-color-green-700);
+  --ng-componentcolors-utility-green-400: var(--ng-color-green-600);
+  --ng-componentcolors-utility-green-600: var(--ng-color-green-400);
+  --ng-componentcolors-utility-green-700: var(--ng-color-green-300);
+  --ng-componentcolors-utility-blue-light-50: var(--ng-color-bluelight-950);
+  --ng-componentcolors-utility-blue-light-100: var(--ng-color-bluelight-900);
+  --ng-componentcolors-utility-blue-light-200: var(--ng-color-bluelight-800);
+  --ng-componentcolors-utility-blue-light-300: var(--ng-color-bluelight-700);
+  --ng-componentcolors-utility-blue-light-400: var(--ng-color-bluelight-600);
+  --ng-componentcolors-utility-blue-light-600: var(--ng-color-bluelight-400);
+  --ng-componentcolors-utility-blue-light-700: var(--ng-color-bluelight-300);
+  --ng-componentcolors-utility-blue-50: var(--ng-color-blue-950);
+  --ng-componentcolors-utility-blue-100: var(--ng-color-blue-900);
+  --ng-componentcolors-utility-blue-200: var(--ng-color-blue-800);
+  --ng-componentcolors-utility-blue-300: var(--ng-color-blue-700);
+  --ng-componentcolors-utility-blue-400: var(--ng-color-blue-600);
+  --ng-componentcolors-utility-blue-600: var(--ng-color-blue-400);
+  --ng-componentcolors-utility-blue-700: var(--ng-color-blue-300);
+  --ng-componentcolors-utility-blue-dark-50: var(--ng-color-bluedark-950);
+  --ng-componentcolors-utility-blue-dark-100: var(--ng-color-bluedark-900);
+  --ng-componentcolors-utility-blue-dark-200: var(--ng-color-bluedark-800);
+  --ng-componentcolors-utility-blue-dark-300: var(--ng-color-bluedark-700);
+  --ng-componentcolors-utility-blue-dark-400: var(--ng-color-bluedark-600);
+  --ng-componentcolors-utility-blue-dark-600: var(--ng-color-bluedark-400);
+  --ng-componentcolors-utility-blue-dark-700: var(--ng-color-bluedark-300);
+  --ng-componentcolors-utility-indigo-50: var(--ng-color-indigo-950);
+  --ng-componentcolors-utility-indigo-100: var(--ng-color-indigo-900);
+  --ng-componentcolors-utility-indigo-200: var(--ng-color-indigo-800);
+  --ng-componentcolors-utility-indigo-300: var(--ng-color-indigo-700);
+  --ng-componentcolors-utility-indigo-400: var(--ng-color-indigo-600);
+  --ng-componentcolors-utility-indigo-600: var(--ng-color-indigo-400);
+  --ng-componentcolors-utility-indigo-700: var(--ng-color-indigo-300);
+  --ng-componentcolors-utility-purple-50: var(--ng-color-purple-950);
+  --ng-componentcolors-utility-purple-100: var(--ng-color-purple-900);
+  --ng-componentcolors-utility-purple-200: var(--ng-color-purple-800);
+  --ng-componentcolors-utility-purple-300: var(--ng-color-purple-700);
+  --ng-componentcolors-utility-purple-400: var(--ng-color-purple-600);
+  --ng-componentcolors-utility-purple-600: var(--ng-color-purple-400);
+  --ng-componentcolors-utility-purple-700: var(--ng-color-purple-300);
+  --ng-componentcolors-utility-fuchsia-50: var(--ng-color-fuchsia-950);
+  --ng-componentcolors-utility-fuchsia-100: var(--ng-color-fuchsia-900);
+  --ng-componentcolors-utility-fuchsia-200: var(--ng-color-fuchsia-800);
+  --ng-componentcolors-utility-fuchsia-300: var(--ng-color-fuchsia-700);
+  --ng-componentcolors-utility-fuchsia-400: var(--ng-color-fuchsia-600);
+  --ng-componentcolors-utility-fuchsia-600: var(--ng-color-fuchsia-400);
+  --ng-componentcolors-utility-fuchsia-700: var(--ng-color-fuchsia-300);
+  --ng-componentcolors-utility-pink-50: var(--ng-color-pink-950);
+  --ng-componentcolors-utility-pink-100: var(--ng-color-pink-900);
+  --ng-componentcolors-utility-pink-200: var(--ng-color-pink-800);
+  --ng-componentcolors-utility-pink-300: var(--ng-color-pink-700);
+  --ng-componentcolors-utility-pink-400: var(--ng-color-pink-600);
+  --ng-componentcolors-utility-pink-600: var(--ng-color-pink-400);
+  --ng-componentcolors-utility-pink-700: var(--ng-color-pink-300);
+  --ng-componentcolors-utility-orange-dark-50: var(--ng-color-orangedark-950);
+  --ng-componentcolors-utility-orange-dark-100: var(--ng-color-orangedark-900);
+  --ng-componentcolors-utility-orange-dark-200: var(--ng-color-orangedark-800);
+  --ng-componentcolors-utility-orange-dark-300: var(--ng-color-orangedark-700);
+  --ng-componentcolors-utility-orange-dark-400: var(--ng-color-orangedark-600);
+  --ng-componentcolors-utility-orange-dark-600: var(--ng-color-orangedark-400);
+  --ng-componentcolors-utility-orange-dark-700: var(--ng-color-orangedark-300);
+  --ng-componentcolors-utility-orange-50: var(--ng-color-orange-950);
+  --ng-componentcolors-utility-orange-100: var(--ng-color-orange-900);
+  --ng-componentcolors-utility-orange-200: var(--ng-color-orange-800);
+  --ng-componentcolors-utility-orange-300: var(--ng-color-orange-700);
+  --ng-componentcolors-utility-orange-400: var(--ng-color-orange-600);
+  --ng-componentcolors-utility-orange-600: var(--ng-color-orange-400);
+  --ng-componentcolors-utility-orange-700: var(--ng-color-orange-300);
+  --ng-colors-fg-secondary-700: var(--ng-color-graydarkmode-300);
+  --ng-colors-fg-secondary-hover: var(--ng-color-graydarkmode-200);
+  --ng-colors-fg-tertiary-600: var(--ng-color-graydarkmode-400);
+  --ng-colors-fg-tertiary-hover: var(--ng-color-graydarkmode-300);
+  --ng-colors-fg-quaternary-400: var(--ng-color-graydarkmode-500);
+  --ng-colors-fg-quaternary-hover: var(--ng-color-graydarkmode-400);
+  --ng-colors-fg-disabled: var(--ng-color-graydarkmode-600);
+  --ng-colors-fg-disabled-subtle: var(--ng-color-graydarkmode-700);
+  --ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-400);
+  --ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-400);
+  --ng-colors-fg-brand-secondary-hover: var(--ng-color-bluedark-300);
+  --ng-colors-fg-error-primary: var(--ng-color-error-400);
+  --ng-colors-fg-error-secondary: var(--ng-color-error-400);
+  --ng-colors-fg-warning-primary: var(--ng-color-warning-400);
+  --ng-colors-fg-warning-secondary: var(--ng-color-warning-400);
+  --ng-colors-fg-success-primary: var(--ng-color-success-400);
+  --ng-colors-fg-success-secondary: var(--ng-color-success-400);
+  --ng-colors-bg-primary: var(--ng-color-graydarkmode-950);
+  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-400);
+  --ng-colors-effects-focus-ring-error: var(--ng-color-error-400);
+  --ng-colors-effects-shadow-xs: #0000004D;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-md: #00000066;
+  --ng-colors-effects-portfoliomockups-shadow-main-centre-lg: #00000080;
+  --ng-colors-effects-portfoliomockups-shadow-overlay-lg: #00000066;
+  --ng-colors-effects-portfoliomockups-shadow-grid-md: #0000004D;
+  --ng-colors-effects-shadow-sm-01: #0000004D;
+  --ng-colors-effects-shadow-sm-02: #0000004D;
+  --ng-colors-effects-shadow-md-01: #0000004D;
+  --ng-colors-effects-shadow-md-02: #00000033;
+  --ng-colors-effects-shadow-lg-01: #0000004D;
+  --ng-colors-effects-shadow-lg-02: #00000033;
+  --ng-colors-effects-shadow-lg-03: #00000033;
+  --ng-colors-effects-shadow-xl-01: #0000004D;
+  --ng-colors-effects-shadow-xl-02: #00000033;
+  --ng-colors-effects-shadow-xl-03: #00000033;
+  --ng-colors-effects-shadow-2xl-01: #00000080;
+  --ng-colors-effects-shadow-2xl-02: #00000033;
+  --ng-colors-effects-shadow-3xl-01: #00000080;
+  --ng-colors-effects-shadow-3xl-02: #00000033;
+  --ng-colors-effects-shadow-skeumorphic-inner: #0000004D;
+  --ng-colors-effects-shadow-skeumorphic-inner-border: #00000080;
+  --ng-colors-bg-primary-alt: var(--ng-color-graydarkmode-950);
+  --ng-colors-bg-primary-hover: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-primary-solid: var(--ng-color-graydarkmode-100);
+  --ng-colors-bg-secondary: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-secondary-alt: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-secondary-hover: var(--ng-color-graydarkmode-800);
+  --ng-colors-bg-secondary-subtle: var(--ng-color-graydarkmode-950);
+  --ng-colors-bg-secondary-solid: var(--ng-color-graydarkmode-400);
+  --ng-colors-bg-tertiary: var(--ng-color-graydarkmode-800);
+  --ng-colors-bg-quaternary: var(--ng-color-graydarkmode-700);
+  --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
+  --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-disabled: var(--ng-color-graydarkmode-800);
+  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-overlay: var(--ng-color-base-black);
+  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
+  --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
+  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-900);
+  --ng-colors-bg-brand-solid: var(--ng-color-bluedark-500);
+  --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-400);
+  --ng-colors-bg-brand-section: var(--ng-color-bluedark-900);
+  --ng-colors-bg-brand-section-subtle: var(--ng-color-bluedark-800);
+  --ng-colors-bg-error-primary: var(--ng-color-error-950);
+  --ng-colors-bg-error-secondary: var(--ng-color-error-900);
+  --ng-colors-bg-error-solid: var(--ng-color-error-500);
+  --ng-colors-bg-error-solid-hover: var(--ng-color-error-400);
+  --ng-colors-bg-warning-primary: var(--ng-color-warning-950);
+  --ng-colors-bg-warning-secondary: var(--ng-color-warning-900);
+  --ng-colors-bg-warning-solid: var(--ng-color-warning-500);
+  --ng-colors-bg-success-primary: var(--ng-color-success-950);
+  --ng-colors-bg-success-secondary: var(--ng-color-success-900);
+  --ng-colors-bg-success-solid: var(--ng-color-success-500);
+  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-950);
+  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-900);
+  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-800);
+  --ng-componentcolors-utility-yellow-300: var(--ng-color-yellow-700);
+  --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-600);
+  --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-400);
+  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-300);
+
+  /* Shadows */
+
+  /* Focus Rings */
+
+  /* Gradients */
+  --ng-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graydarkmode-400) 0%, var(--ng-color-graydarkmode-500) 100%);
+  --ng-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graydarkmode-300) 0%, var(--ng-color-graydarkmode-400) 100%);
+  --ng-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graydarkmode-200) 0%, var(--ng-color-graydarkmode-400) 100%);
+  --ng-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graydarkmode-200) 16.72%, var(--ng-color-graydarkmode-400) 83.39%);
+  --ng-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graydarkmode-200) 8.33%, var(--ng-color-graydarkmode-300) 91.67%);
+  --ng-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graydarkmode-100) 0%, var(--ng-color-graydarkmode-400) 100%);
+  --ng-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graydarkmode-100) 0%, var(--ng-color-graydarkmode-300) 100%);
+
+  --ng-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-500) 0%, var(--ng-color-bluedark-400) 100%);
+  --ng-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
+  --ng-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-500) 100%);
+  --ng-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-700) 16.72%, var(--ng-color-bluedark-500) 83.39%);
+  --ng-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-700) 8.33%, var(--ng-color-bluedark-600) 91.67%);
+  --ng-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-500) 100%);
+  --ng-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
+
+  --ng-white-gradient-1: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-950) 100%);
+  --ng-white-gradient-2: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-800) 100%);
+  --ng-white-gradient-3: linear-gradient(180deg, var(--ng-color-graydarkmode-950) 0%, var(--ng-color-graydarkmode-800) 100%);
+  --ng-white-gradient-4: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-800) 100%);
+  --ng-white-gradient-5: linear-gradient(180deg, var(--ng-color-graydarkmode-950) 0%, var(--ng-color-graydarkmode-700) 100%);
+  --ng-white-gradient-6: linear-gradient(180deg, var(--ng-color-graydarkmode-900) 0%, var(--ng-color-graydarkmode-700) 100%);
+  --ng-white-gradient-7: linear-gradient(180deg, var(--ng-color-graydarkmode-800) 0%, var(--ng-color-graydarkmode-700) 100%);
+
+
+  --ng-linear-gradient-01: linear-gradient(180deg, #3A4A6B 0%, #5A3556 100%);
+  --ng-linear-gradient-02: linear-gradient(180deg, #5A3556 0%, #3A2B5A 105.25%);
+  --ng-linear-gradient-03: linear-gradient(180deg, #5A3560 0%, #5A4540 100%);
+  --ng-linear-gradient-04: linear-gradient(225deg, #5A4540 0%, #6A3535 100%);
+  --ng-linear-gradient-05: linear-gradient(270deg, #5A4035 0%, #5A5040 100%);
+  --ng-linear-gradient-06: linear-gradient(180deg, #5A3555 0%, #6A3540 100%);
+  --ng-linear-gradient-07: linear-gradient(45deg, #6A3555 0%, #5A4555 100%);
+  --ng-linear-gradient-20: linear-gradient(45deg, #3A3555 0%, #5A5040 100%);
+
+}
+
+/* 2. Radius - Mode 1 */
+
+:root {
+  --ng-radius-none: 0px;
+  --ng-radius-xxs: 2px;
+  --ng-radius-xs: 4px;
+  --ng-radius-sm: 6px;
+  --ng-radius-md: 8px;
+  --ng-radius-lg: 10px;
+  --ng-radius-xl: 12px;
+  --ng-radius-2xl: 16px;
+  --ng-radius-3xl: 20px;
+  --ng-radius-4xl: 24px;
+  --ng-radius-full: 9999px;
+}
+
+:root {
+  --ng-spacing-none: var(--ng-spacing-0);
+  --ng-spacing-xxs: var(--ng-spacing-0-5);
+  --ng-spacing-xs: var(--ng-spacing-1);
+  --ng-spacing-sm: var(--ng-spacing-1-5);
+  --ng-spacing-md: var(--ng-spacing-2);
+  --ng-spacing-lg: var(--ng-spacing-3);
+  --ng-spacing-xl: var(--ng-spacing-4);
+  --ng-spacing-2xl: var(--ng-spacing-5);
+  --ng-spacing-3xl: var(--ng-spacing-6);
+  --ng-spacing-4xl: var(--ng-spacing-8);
+  --ng-spacing-5xl: var(--ng-spacing-10);
+  --ng-spacing-6xl: var(--ng-spacing-12);
+  --ng-spacing-7xl: var(--ng-spacing-16);
+  --ng-spacing-8xl: var(--ng-spacing-20);
+  --ng-spacing-9xl: var(--ng-spacing-24);
+  --ng-spacing-10xl: var(--ng-spacing-32);
+  --ng-spacing-11xl: var(--ng-spacing-40);
+  --ng-spacing-md-alt: var(--ng-spacing-2-5);
+  --ng-spacing-lg-alt: var(--ng-spacing-3-5);
+  --ng-spacing-xl-alt: var(--ng-spacing-4-5);
+  --ng-spacing-4xl-alt: var(--ng-spacing-9);
+  --ng-spacing-3xl-alt: var(--ng-spacing-7);
+}
+
+/* 6. Typography - Value */
+
+:root {
+  --ng-font-family-display: Inter;
+  --ng-font-family-body: Inter;
+  --ng-font-weight-regular: var(--ng-font-weight-400);
+  --ng-font-weight-medium: var(--ng-font-weight-500);
+  --ng-font-weight-semibold: var(--ng-font-weight-600);
+  --ng-font-weight-bold: var(--ng-font-weight-700);
+  --ng-font-weight-regular-italic: Regular italic;
+  --ng-font-weight-medium-italic: Medium italic;
+  --ng-font-weight-semibold-italic: Semibold italic;
+  --ng-font-weight-bold-italic: Bold italic;
+  --ng-font-size-text-xs: 12px;
+  --ng-line-height-text-xs: 18px;
+  --ng-line-height-text-sm: 20px;
+  --ng-line-height-text-md: 24px;
+  --ng-line-height-text-lg: 28px;
+  --ng-line-height-text-xl: 30px;
+  --ng-line-height-display-xs: 32px;
+  --ng-line-height-display-sm: 38px;
+  --ng-line-height-display-md: 44px;
+  --ng-line-height-display-lg: 60px;
+  --ng-line-height-display-xl: 72px;
+  --ng-line-height-display-2xl: 90px;
+  --ng-font-size-text-sm: 14px;
+  --ng-font-size-text-md: 16px;
+  --ng-font-size-text-lg: 18px;
+  --ng-font-size-text-xl: 20px;
+  --ng-font-size-display-xs: 24px;
+  --ng-font-size-display-sm: 30px;
+  --ng-font-size-display-md: 36px;
+  --ng-font-size-display-lg: 48px;
+  --ng-font-size-display-xl: 60px;
+  --ng-font-size-display-2xl: 72px;
+  --ng-font-weight-lighter: lighter;
+  --ng-font-weight-bolder: bolder;
+  --ng-font-weight-inherit: inherit;
+  --ng-font-weight-initial: initial;
+  --ng-font-weight-unset: unset;
+  --ng-text-decoration-underline: underline;
+  --ng-text-decoration-overline: overline;
+  --ng-text-decoration-line-through: line-through;
+  --ng-text-decoration-none: none;
+  --ng-text-decoration-solid: solid;
+  --ng-text-decoration-dotted: dotted;
+  --ng-text-decoration-dashed: dashed;
+  --ng-text-decoration-wavy: wavy;
+  --ng-text-decoration-double: double;
+  --ng-text-decoration-thin: thin;
+  --ng-text-decoration-thick: thick;
+
+
+  --ng-webkit-font-smoothing: antialiased;
+  --ng-moz-osx-font-smoothing: grayscale;
+  --ng-text-rendering: optimizeLegibility;
+}
+
+/* 4. Widths - Mode 1 */
+
+:root {
+  --ng-width-auto: auto;
+  --ng-width-0: var(--ng-spacing-0);
+  --ng-width-0-5: var(--ng-spacing-0-5);
+  --ng-width-1: var(--ng-spacing-1);
+  --ng-width-1-5: var(--ng-spacing-1-5);
+  --ng-width-2: var(--ng-spacing-2);
+  --ng-width-2-5: var(--ng-spacing-2-5);
+  --ng-width-3: var(--ng-spacing-3);
+  --ng-width-3-5: var(--ng-spacing-3-5);
+  --ng-width-4: var(--ng-spacing-4);
+  --ng-width-4-5: var(--ng-spacing-4-5);
+  --ng-width-5: var(--ng-spacing-5);
+  --ng-width-6: var(--ng-spacing-6);
+  --ng-width-8: var(--ng-spacing-8);
+  --ng-width-10: var(--ng-spacing-10);
+  --ng-width-12: var(--ng-spacing-12);
+  --ng-width-16: var(--ng-spacing-16);
+  --ng-width-20: var(--ng-spacing-20);
+  --ng-width-24: var(--ng-spacing-24);
+  --ng-width-32: var(--ng-spacing-32);
+  --ng-width-40: var(--ng-spacing-40);
+  --ng-width-48: var(--ng-spacing-48);
+  --ng-width-56: var(--ng-spacing-56);
+  --ng-width-64: var(--ng-spacing-64);
+  --ng-width-80: var(--ng-spacing-80);
+  --ng-width-96: var(--ng-spacing-96);
+  --ng-width-120: var(--ng-spacing-120);
+  --ng-width-140: var(--ng-spacing-140);
+  --ng-width-160: var(--ng-spacing-160);
+  --ng-width-180: var(--ng-spacing-180);
+  --ng-width-192: var(--ng-spacing-192);
+  --ng-width-256: var(--ng-spacing-256);
+  --ng-width-320: var(--ng-spacing-320);
+  --ng-width-360: var(--ng-spacing-360);
+  --ng-width-400: var(--ng-spacing-400);
+  --ng-width-480: var(--ng-spacing-480);
+  --ng-width-312: var(--ng-spacing-312);
+  --ng-width-164: var(--ng-spacing-164);
+  --ng-width-108: var(--ng-spacing-108);
+  --ng-svg-stroke-width: 1.6;
+}
+
+:root {
+  /* Border Width Tokens (0-10px) */
+  --ng-border-width-0: 0px;
+  --ng-border-width-1: 1px;
+  --ng-border-width-2: 2px;
+  --ng-border-width-3: 3px;
+  --ng-border-width-4: 4px;
+  --ng-border-width-5: 5px;
+  --ng-border-width-6: 6px;
+  --ng-border-width-7: 7px;
+  --ng-border-width-8: 8px;
+  --ng-border-width-9: 9px;
+  --ng-border-width-10: 10px;
+
+  /* Border Style Tokens */
+  --ng-border-style-none: none;
+  --ng-border-style-solid: solid;
+  --ng-border-style-dashed: dashed;
+  --ng-border-style-dotted: dotted;
+  --ng-border-style-double: double;
+  --ng-border-style-groove: groove;
+  --ng-border-style-ridge: ridge;
+  --ng-border-style-inset: inset;
+  --ng-border-style-outset: outset;
+  --ng-border-style-hidden: hidden;
+
+  --ng-border-none: none;
+}
+
+:root{
+--ng-display-none: none;
+--ng-display-block: block;
+--ng-display-inline: inline;
+--ng-display-inline-block: inline-block;
+--ng-display-flex: flex;
+--ng-display-inline-flex: inline-flex;
+--ng-display-grid: grid;
+--ng-display-inline-grid: inline-grid;
+--ng-display-table: table;
+--ng-display-inline-table: inline-table;
+--ng-display-table-row: table-row;
+--ng-display-table-cell: table-cell;
+--ng-display-list-item: list-item;
+--ng-display-contents: contents;
+--ng-display-flow-root: flow-root;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-SemiBoldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: auto;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('https://assets.aquera.io/font/Inter-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: auto;
+}
+
+:root{
+--ng-height-auto:auto;
+--ng-height-1px: 1px;
+--ng-height-2px: 2px;
+--ng-height-3px: 3px;
+--ng-height-4px: 4px;
+--ng-height-5px: 5px;
+--ng-height-6px: 6px;
+--ng-height-7px: 7px;
+--ng-height-8px: 8px;
+--ng-height-9px: 9px;
+--ng-height-10px: 10px;
+--ng-height-11px: 11px;
+--ng-height-12px: 12px;
+--ng-height-13px: 13px;
+--ng-height-14px: 14px;
+--ng-height-15px: 15px;
+--ng-height-16px: 16px;
+--ng-height-17px: 17px;
+--ng-height-18px: 18px;
+--ng-height-19px: 19px;
+--ng-height-20px: 20px;
+--ng-height-21px: 21px;
+--ng-height-22px: 22px;
+--ng-height-23px: 23px;
+--ng-height-24px: 24px;
+--ng-height-25px: 25px;
+--ng-height-26px: 26px;
+--ng-height-27px: 27px;
+--ng-height-28px: 28px;
+--ng-height-29px: 29px;
+--ng-height-30px: 30px;
+--ng-height-31px: 31px;
+--ng-height-32px: 32px;
+--ng-height-33px: 33px;
+--ng-height-34px: 34px;
+--ng-height-35px: 35px;
+--ng-height-36px: 36px;
+--ng-height-37px: 37px;
+--ng-height-38px: 38px;
+--ng-height-39px: 39px;
+--ng-height-40px: 40px;
+--ng-height-41px: 41px;
+--ng-height-42px: 42px;
+--ng-height-43px: 43px;
+--ng-height-44px: 44px;
+--ng-height-45px: 45px;
+--ng-height-46px: 46px;
+--ng-height-47px: 47px;
+--ng-height-48px: 48px;
+--ng-height-49px: 49px;
+--ng-height-50px: 50px;
+--ng-height-60px: 60px;
+--ng-height-70px: 70px;
+--ng-height-80px: 80px;
+--ng-height-90px: 90px;
+--ng-height-100px: 100px;
+--ng-height-110px: 110px;
+--ng-height-120px: 120px;
+--ng-height-130px: 130px;
+--ng-height-140px: 140px;
+--ng-height-150px: 150px;
+--ng-height-160px: 160px;
+--ng-height-170px: 170px;
+--ng-height-180px: 180px;
+--ng-height-190px: 190px;
+--ng-height-200px: 200px;
+}
+
+:root{
+--ng-opacity-0: 0;
+--ng-opacity-5: 0.05;
+--ng-opacity-10: 0.1;
+--ng-opacity-15: 0.15;
+--ng-opacity-20: 0.2;
+--ng-opacity-25: 0.25;
+--ng-opacity-30: 0.3;
+--ng-opacity-35: 0.35;
+--ng-opacity-40: 0.4;
+--ng-opacity-45: 0.45;
+--ng-opacity-50: 0.5;
+--ng-opacity-55: 0.55;
+--ng-opacity-60: 0.6;
+--ng-opacity-65: 0.65;
+--ng-opacity-70: 0.7;
+--ng-opacity-75: 0.75;
+--ng-opacity-80: 0.8;
+--ng-opacity-85: 0.85;
+--ng-opacity-90: 0.9;
+--ng-opacity-95: 0.95;
+--ng-opacity-100: 1;
+}
+
+:root{
+--ng-stroke-width-0: 0;
+--ng-stroke-width-1: 1px;
+--ng-stroke-width-2: 2px;
+--ng-stroke-width-3: 3px;
+--ng-stroke-width-4: 4px;
+--ng-stroke-width-5: 5px;
+--ng-stroke-width-6: 6px;
+--ng-stroke-width-7: 7px;
+--ng-stroke-width-8: 8px;
+--ng-stroke-width-9: 9px;
+--ng-stroke-width-10: 10px;
+}
+
+:root {
+  --ng-transition-duration-instant: 0ms;
+  --ng-transition-duration-ultra-fast: 50ms;
+  --ng-transition-duration-fast: 100ms;
+  --ng-transition-duration-default: 250ms;
+  --ng-transition-duration-medium: 300ms;
+  --ng-transition-duration-slow: 500ms;
+  --ng-transition-duration-slower: 700ms;
+  --ng-transition-duration-long: 1000ms;
+}
+
+:root {
+    --ng-outline-none: none;
+    --ng-outline-0-5px: 0.5px;
+    --ng-outline-1px: 1px;
+    --ng-outline-1-5px: 1.5px;
+    --ng-outline-2px: 2px;
+    --ng-outline-2-5px: 2.5px;
+    --ng-outline-3px: 3px;
+    --ng-outline-4px: 4px;
+    --ng-outline-5px: 5px;
+    --ng-outline-6px: 6px;
+    --ng-outline-7px: 7px;
+    --ng-outline-8px: 8px;
+    --ng-outline-9px: 9px;
+    --ng-outline-10px: 10px;
+
+    --ng-outline-offset-0: 0px;
+    --ng-outline-offset-1: 1px;
+    --ng-outline-offset-2: 2px;
+    --ng-outline-offset-3: 3px;
+    --ng-outline-offset-4: 4px;
+    --ng-outline-offset-5: 5px;
+    --ng-outline-offset-6: 6px;
+    --ng-outline-offset-8: 8px;
+    --ng-outline-offset-10: 10px;
+
+    --ng-outline-solid: solid;
+    --ng-outline-dashed: dashed;
+    --ng-outline-dotted: dotted;
+    --ng-outline-double: double;
+    --ng-outline-inset: inset;
+
+}
+
+:root{
+    --ng-icon-chevron-right: ng-chevron-right ;
+    --ng-icon-chevron-left: ng-chevron-left;
+    --ng-icon-chevron-down: ng-chevron-down;
+    --ng-icon-chevron-up: ng-chevron-up;
+    --ng-icon-eye-off: ng-eye-off;
+    --ng-icon-x-close: ng-x-close;
+    --ng-icon-search-lg: ng-search-lg;
+    --ng-icon-eye: ng-eye;
+    --ng-icon-info-circle: ng-info-circle;
+    --ng-icon-user-01: ng-user-01;
+    --ng-icon-arrow-down: ng-arrow-down;
+    --ng-icon-arrow-up: ng-arrow-up;
+    --ng-icon-check-circle: ng-check-circle;
+    --ng-icon-expand-06: ng-expand-06;
+    --ng-icon-upload-01: ng-upload-01;
+    --ng-icon-trash-01: ng-trash-01;
+    --ng-icon-filter-lines: ng-filter-lines;
+    --ng-icon-minus: ng-minus;
+    --ng-icon-chevron-selector-vertical: ng-chevron-selector-vertical;
+    --ng-icon-check: ng-check;
+    --ng-icon-alert-circle: ng-alert-circle;
+    --ng-icon-file-06: ng-file-06;
+    --ng-icon-image-03: ng-image-03;
+    --ng-icon-x-circle: ng-x-circle;
+    --ng-icon-button-loading-blue: ng-button-loading-blue;
+    --ng-icon-button-loading-blue-animated: ng-button-loading-blue-animated;
+    --ng-icon-check-circle-broken: ng-check-circle-broken;
+    --ng-icon-action: ng-action;
+    --ng-icon-arrow-narrow-right: ng-arrow-narrow-right;
+    --ng-icon-arrow-narrow-left: ng-arrow-narrow-left;
+    --ng-icon-chevron-left-double: ng-chevron-left-double;
+    --ng-icon-chevron-right-double: ng-chevron-right-double;
+
+    /* size */
+    --ng-icon-size-12: 12px;
+
+    /* stroke width */
+    --ng-icon-stroke-width-2-5: 2.5;
+
+    /* methods */
+    --ng-svg-method-stroke: stroke;
+    --ng-svg-method-fill: fill;
+}
+
+