pathum-ds-library 0.0.8

package/src/styles/theme.css

@@ -0,0 +1,1195 @@
+/**
+ * Design tokens exported from Figma (see packages/ui/figma-export/).
+ * Light-mode semantic/component colors are defaults; .dark overrides where applicable.
+ */
+
+@theme {
+
+  /* --- Primitive palette (_Primitives / Style) --- */
+  --color-base-black: #000000;
+  --color-base-transparent: rgba(255, 255, 255, 0);
+  --color-base-white: #ffffff;
+  --color-blue-dark-100: #d1e0ff;
+  --color-blue-dark-200: #b2ccff;
+  --color-blue-dark-25: #f5f8ff;
+  --color-blue-dark-300: #84adff;
+  --color-blue-dark-400: #528bff;
+  --color-blue-dark-50: #eff4ff;
+  --color-blue-dark-500: #2970ff;
+  --color-blue-dark-600: #155eef;
+  --color-blue-dark-700: #004eeb;
+  --color-blue-dark-800: #0040c1;
+  --color-blue-dark-900: #00359e;
+  --color-blue-dark-950: #002266;
+  --color-blue-light-100: #e0f2fe;
+  --color-blue-light-200: #b9e6fe;
+  --color-blue-light-25: #f5fbff;
+  --color-blue-light-300: #7cd4fd;
+  --color-blue-light-400: #36bffa;
+  --color-blue-light-50: #f0f9ff;
+  --color-blue-light-500: #0ba5ec;
+  --color-blue-light-600: #0086c9;
+  --color-blue-light-700: #026aa2;
+  --color-blue-light-800: #065986;
+  --color-blue-light-900: #0b4a6f;
+  --color-blue-light-950: #062c41;
+  --color-blue-100: #d1e9ff;
+  --color-blue-200: #b2ddff;
+  --color-blue-25: #f5faff;
+  --color-blue-300: #84caff;
+  --color-blue-400: #53b1fd;
+  --color-blue-50: #eff8ff;
+  --color-blue-500: #2e90fa;
+  --color-blue-600: #1570ef;
+  --color-blue-700: #175cd3;
+  --color-blue-800: #1849a9;
+  --color-blue-900: #194185;
+  --color-blue-950: #102a56;
+  --color-brand-100: #f4ebff;
+  --color-brand-200: #e9d7fe;
+  --color-brand-25: #fcfaff;
+  --color-brand-300: #d6bbfb;
+  --color-brand-400: #b692f6;
+  --color-brand-50: #f9f5ff;
+  --color-brand-500: #9e77ed;
+  --color-brand-600: #7f56d9;
+  --color-brand-700: #6941c6;
+  --color-brand-800: #53389e;
+  --color-brand-900: #42307d;
+  --color-brand-950: #2c1c5f;
+  --color-cyan-100: #cff9fe;
+  --color-cyan-200: #a5f0fc;
+  --color-cyan-25: #f5feff;
+  --color-cyan-300: #67e3f9;
+  --color-cyan-400: #22ccee;
+  --color-cyan-50: #ecfdff;
+  --color-cyan-500: #06aed4;
+  --color-cyan-600: #088ab2;
+  --color-cyan-700: #0e7090;
+  --color-cyan-800: #155b75;
+  --color-cyan-900: #164c63;
+  --color-cyan-950: #0d2d3a;
+  --color-error-100: #fee4e2;
+  --color-error-200: #fecdca;
+  --color-error-25: #fffbfa;
+  --color-error-300: #fda29b;
+  --color-error-400: #f97066;
+  --color-error-50: #fef3f2;
+  --color-error-500: #f04438;
+  --color-error-600: #d92d20;
+  --color-error-700: #b42318;
+  --color-error-800: #912018;
+  --color-error-900: #7a271a;
+  --color-error-950: #55160c;
+  --color-fuchsia-100: #fbe8ff;
+  --color-fuchsia-200: #f6d0fe;
+  --color-fuchsia-25: #fefaff;
+  --color-fuchsia-300: #eeaafd;
+  --color-fuchsia-400: #e478fa;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-500: #d444f1;
+  --color-fuchsia-600: #ba24d5;
+  --color-fuchsia-700: #9f1ab1;
+  --color-fuchsia-800: #821890;
+  --color-fuchsia-900: #6f1877;
+  --color-fuchsia-950: #47104c;
+  --color-gray-dark-alpha-100: rgba(255, 255, 255, 0.9399999976158142);
+  --color-gray-dark-alpha-200: rgba(255, 255, 255, 0.9200000166893005);
+  --color-gray-dark-alpha-25: rgba(255, 255, 255, 0.9800000190734863);
+  --color-gray-dark-alpha-300: rgba(255, 255, 255, 0.800000011920929);
+  --color-gray-dark-alpha-400: rgba(255, 255, 255, 0.5600000023841858);
+  --color-gray-dark-alpha-50: rgba(255, 255, 255, 0.9599999785423279);
+  --color-gray-dark-alpha-500: rgba(255, 255, 255, 0.5);
+  --color-gray-dark-alpha-600: rgba(255, 255, 255, 0.3499999940395355);
+  --color-gray-dark-alpha-700: rgba(255, 255, 255, 0.1599999964237213);
+  --color-gray-dark-alpha-800: rgba(255, 255, 255, 0.07999999821186066);
+  --color-gray-dark-alpha-900: rgba(255, 255, 255, 0.03999999910593033);
+  --color-gray-dark-alpha-950: rgba(255, 255, 255, 0);
+  --color-gray-dark-100: #f0f1f1;
+  --color-gray-dark-200: #ececed;
+  --color-gray-dark-25: #fafafa;
+  --color-gray-dark-300: #cecfd2;
+  --color-gray-dark-400: #94969c;
+  --color-gray-dark-50: #f5f5f6;
+  --color-gray-dark-500: #85888e;
+  --color-gray-dark-600: #61646c;
+  --color-gray-dark-700: #333741;
+  --color-gray-dark-800: #1f242f;
+  --color-gray-dark-900: #161b26;
+  --color-gray-dark-950: #0c111d;
+  --color-gray-light-100: #f2f4f7;
+  --color-gray-light-200: #eaecf0;
+  --color-gray-light-25: #fcfcfd;
+  --color-gray-light-300: #d0d5dd;
+  --color-gray-light-400: #98a2b3;
+  --color-gray-light-50: #f9fafb;
+  --color-gray-light-500: #667085;
+  --color-gray-light-600: #475467;
+  --color-gray-light-700: #344054;
+  --color-gray-light-800: #182230;
+  --color-gray-light-900: #101828;
+  --color-gray-light-950: #0c111d;
+  --color-gray-blue-100: #eaecf5;
+  --color-gray-blue-200: #d5d9eb;
+  --color-gray-blue-25: #fcfcfd;
+  --color-gray-blue-300: #b3b8db;
+  --color-gray-blue-400: #717bbc;
+  --color-gray-blue-50: #f8f9fc;
+  --color-gray-blue-500: #4e5ba6;
+  --color-gray-blue-600: #3e4784;
+  --color-gray-blue-700: #363f72;
+  --color-gray-blue-800: #293056;
+  --color-gray-blue-900: #101323;
+  --color-gray-blue-950: #0d0f1c;
+  --color-gray-cool-100: #eff1f5;
+  --color-gray-cool-200: #dcdfea;
+  --color-gray-cool-25: #fcfcfd;
+  --color-gray-cool-300: #b9c0d4;
+  --color-gray-cool-400: #7d89b0;
+  --color-gray-cool-50: #f9f9fb;
+  --color-gray-cool-500: #5d6b98;
+  --color-gray-cool-600: #4a5578;
+  --color-gray-cool-700: #404968;
+  --color-gray-cool-800: #30374f;
+  --color-gray-cool-900: #111322;
+  --color-gray-cool-950: #0e101b;
+  --color-gray-iron-100: #f4f4f5;
+  --color-gray-iron-200: #e4e4e7;
+  --color-gray-iron-25: #fcfcfc;
+  --color-gray-iron-300: #d1d1d6;
+  --color-gray-iron-400: #a0a0ab;
+  --color-gray-iron-50: #fafafa;
+  --color-gray-iron-500: #70707b;
+  --color-gray-iron-600: #51525c;
+  --color-gray-iron-700: #3f3f46;
+  --color-gray-iron-800: #26272b;
+  --color-gray-iron-900: #1a1a1e;
+  --color-gray-iron-950: #131316;
+  --color-gray-modern-100: #eef2f6;
+  --color-gray-modern-200: #e3e8ef;
+  --color-gray-modern-25: #fcfcfd;
+  --color-gray-modern-300: #cdd5df;
+  --color-gray-modern-400: #9aa4b2;
+  --color-gray-modern-50: #f8fafc;
+  --color-gray-modern-500: #697586;
+  --color-gray-modern-600: #4b5565;
+  --color-gray-modern-700: #364152;
+  --color-gray-modern-800: #202939;
+  --color-gray-modern-900: #121926;
+  --color-gray-modern-950: #0d121c;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-25: #fcfcfd;
+  --color-neutral-300: #d2d6db;
+  --color-neutral-400: #9da4ae;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-500: #6c737f;
+  --color-neutral-600: #4d5761;
+  --color-neutral-700: #384250;
+  --color-neutral-800: #1f2a37;
+  --color-neutral-900: #111927;
+  --color-neutral-950: #0d121c;
+  --color-gray-true-100: #f5f5f5;
+  --color-gray-true-200: #e5e5e5;
+  --color-gray-true-25: #fcfcfc;
+  --color-gray-true-300: #d6d6d6;
+  --color-gray-true-400: #a3a3a3;
+  --color-gray-true-50: #fafafa;
+  --color-gray-true-500: #737373;
+  --color-gray-true-600: #525252;
+  --color-gray-true-700: #424242;
+  --color-gray-true-800: #292929;
+  --color-gray-true-900: #141414;
+  --color-gray-true-950: #0f0f0f;
+  --color-gray-warm-100: #f5f5f4;
+  --color-gray-warm-200: #e7e5e4;
+  --color-gray-warm-25: #fdfdfc;
+  --color-gray-warm-300: #d7d3d0;
+  --color-gray-warm-400: #a9a29d;
+  --color-gray-warm-50: #fafaf9;
+  --color-gray-warm-500: #79716b;
+  --color-gray-warm-600: #57534e;
+  --color-gray-warm-700: #44403c;
+  --color-gray-warm-800: #292524;
+  --color-gray-warm-900: #1c1917;
+  --color-gray-warm-950: #171412;
+  --color-green-light-100: #e3fbcc;
+  --color-green-light-200: #d0f8ab;
+  --color-green-light-25: #fafef5;
+  --color-green-light-300: #a6ef67;
+  --color-green-light-400: #85e13a;
+  --color-green-light-50: #f3fee7;
+  --color-green-light-500: #66c61c;
+  --color-green-light-600: #4ca30d;
+  --color-green-light-700: #3b7c0f;
+  --color-green-light-800: #326212;
+  --color-green-light-900: #2b5314;
+  --color-green-light-950: #15290a;
+  --color-green-100: #d3f8df;
+  --color-green-200: #aaf0c4;
+  --color-green-25: #f6fef9;
+  --color-green-300: #73e2a3;
+  --color-green-400: #3ccb7f;
+  --color-green-50: #edfcf2;
+  --color-green-500: #16b364;
+  --color-green-600: #099250;
+  --color-green-700: #087443;
+  --color-green-800: #095c37;
+  --color-green-900: #084c2e;
+  --color-green-950: #052e1c;
+  --color-indigo-100: #e0eaff;
+  --color-indigo-200: #c7d7fe;
+  --color-indigo-25: #f5f8ff;
+  --color-indigo-300: #a4bcfd;
+  --color-indigo-400: #8098f9;
+  --color-indigo-50: #eef4ff;
+  --color-indigo-500: #6172f3;
+  --color-indigo-600: #444ce7;
+  --color-indigo-700: #3538cd;
+  --color-indigo-800: #2d31a6;
+  --color-indigo-900: #2d3282;
+  --color-indigo-950: #1f235b;
+  --color-moss-100: #e6f4d7;
+  --color-moss-200: #ceeab0;
+  --color-moss-25: #fafdf7;
+  --color-moss-300: #acdc79;
+  --color-moss-400: #86cb3c;
+  --color-moss-50: #f5fbee;
+  --color-moss-500: #669f2a;
+  --color-moss-600: #4f7a21;
+  --color-moss-700: #3f621a;
+  --color-moss-800: #335015;
+  --color-moss-900: #2b4212;
+  --color-moss-950: #1a280b;
+  --color-orange-dark-100: #ffe6d5;
+  --color-orange-dark-200: #ffd6ae;
+  --color-orange-dark-25: #fff9f5;
+  --color-orange-dark-300: #ff9c66;
+  --color-orange-dark-400: #ff692e;
+  --color-orange-dark-50: #fff4ed;
+  --color-orange-dark-500: #ff4405;
+  --color-orange-dark-600: #e62e05;
+  --color-orange-dark-700: #bc1b06;
+  --color-orange-dark-800: #97180c;
+  --color-orange-dark-900: #771a0d;
+  --color-orange-dark-950: #57130a;
+  --color-orange-100: #fdead7;
+  --color-orange-200: #f9dbaf;
+  --color-orange-25: #fefaf5;
+  --color-orange-300: #f7b27a;
+  --color-orange-400: #f38744;
+  --color-orange-50: #fef6ee;
+  --color-orange-500: #ef6820;
+  --color-orange-600: #e04f16;
+  --color-orange-700: #b93815;
+  --color-orange-800: #932f19;
+  --color-orange-900: #772917;
+  --color-orange-950: #511c10;
+  --color-pink-100: #fce7f6;
+  --color-pink-200: #fcceee;
+  --color-pink-25: #fef6fb;
+  --color-pink-300: #faa7e0;
+  --color-pink-400: #f670c7;
+  --color-pink-50: #fdf2fa;
+  --color-pink-500: #ee46bc;
+  --color-pink-600: #dd2590;
+  --color-pink-700: #c11574;
+  --color-pink-800: #9e165f;
+  --color-pink-900: #851651;
+  --color-pink-950: #4e0d30;
+  --color-purple-100: #ebe9fe;
+  --color-purple-200: #d9d6fe;
+  --color-purple-25: #fafaff;
+  --color-purple-300: #bdb4fe;
+  --color-purple-400: #9b8afb;
+  --color-purple-50: #f4f3ff;
+  --color-purple-500: #7a5af8;
+  --color-purple-600: #6938ef;
+  --color-purple-700: #5925dc;
+  --color-purple-800: #4a1fb8;
+  --color-purple-900: #3e1c96;
+  --color-purple-950: #27115f;
+  --color-rose-100: #ffe4e8;
+  --color-rose-200: #fecdd6;
+  --color-rose-25: #fff5f6;
+  --color-rose-300: #fea3b4;
+  --color-rose-400: #fd6f8e;
+  --color-rose-50: #fff1f3;
+  --color-rose-500: #f63d68;
+  --color-rose-600: #e31b54;
+  --color-rose-700: #c01048;
+  --color-rose-800: #a11043;
+  --color-rose-900: #89123e;
+  --color-rose-950: #510b24;
+  --color-success-100: #dcfae6;
+  --color-success-200: #abefc6;
+  --color-success-25: #f6fef9;
+  --color-success-300: #75e0a7;
+  --color-success-400: #47cd89;
+  --color-success-50: #ecfdf3;
+  --color-success-500: #17b26a;
+  --color-success-600: #079455;
+  --color-success-700: #067647;
+  --color-success-800: #085d3a;
+  --color-success-900: #074d31;
+  --color-success-950: #053321;
+  --color-teal-100: #ccfbef;
+  --color-teal-200: #99f6e0;
+  --color-teal-25: #f6fefc;
+  --color-teal-300: #5fe9d0;
+  --color-teal-400: #2ed3b7;
+  --color-teal-50: #f0fdf9;
+  --color-teal-500: #15b79e;
+  --color-teal-600: #0e9384;
+  --color-teal-700: #107569;
+  --color-teal-800: #125d56;
+  --color-teal-900: #134e48;
+  --color-teal-950: #0a2926;
+  --color-violet-100: #ece9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-25: #fbfaff;
+  --color-violet-300: #c3b5fd;
+  --color-violet-400: #a48afb;
+  --color-violet-50: #f5f3ff;
+  --color-violet-500: #875bf7;
+  --color-violet-600: #7839ee;
+  --color-violet-700: #6927da;
+  --color-violet-800: #5720b7;
+  --color-violet-900: #491c96;
+  --color-violet-950: #2e125e;
+  --color-warning-100: #fef0c7;
+  --color-warning-200: #fedf89;
+  --color-warning-25: #fffcf5;
+  --color-warning-300: #fec84b;
+  --color-warning-400: #fdb022;
+  --color-warning-50: #fffaeb;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+  --color-warning-700: #b54708;
+  --color-warning-800: #93370d;
+  --color-warning-900: #7a2e0e;
+  --color-warning-950: #4e1d09;
+  --color-yellow-100: #fef7c3;
+  --color-yellow-200: #feee95;
+  --color-yellow-25: #fefdf0;
+  --color-yellow-300: #fde272;
+  --color-yellow-400: #fac515;
+  --color-yellow-50: #fefbe8;
+  --color-yellow-500: #eaaa08;
+  --color-yellow-600: #ca8504;
+  --color-yellow-700: #a15c07;
+  --color-yellow-800: #854a0e;
+  --color-yellow-900: #713b12;
+  --color-yellow-950: #542c0d;
+
+  /* --- Semantic colors: Light mode (1. Color modes) --- */
+  --color-bg-active: #f9fafb;
+  --color-bg-brand-primary: #f9f5ff;
+  --color-bg-brand-primary_alt: #f9f5ff;
+  --color-bg-brand-secondary: #f4ebff;
+  --color-bg-brand-section: #53389e;
+  --color-bg-brand-section_subtle: #6941c6;
+  --color-bg-brand-solid: #7f56d9;
+  --color-bg-brand-solid_hover: #6941c6;
+  --color-bg-disabled: #f2f4f7;
+  --color-bg-disabled_subtle: #f9fafb;
+  --color-bg-error-primary: #fef3f2;
+  --color-bg-error-secondary: #fee4e2;
+  --color-bg-error-solid: #d92d20;
+  --color-bg-overlay: #0c111d;
+  --color-bg-primary: #ffffff;
+  --color-bg-primary-solid: #0c111d;
+  --color-bg-primary_alt: #ffffff;
+  --color-bg-primary_hover: #f9fafb;
+  --color-bg-quaternary: #eaecf0;
+  --color-bg-secondary: #f9fafb;
+  --color-bg-secondary-solid: #475467;
+  --color-bg-secondary_alt: #f9fafb;
+  --color-bg-secondary_hover: #f2f4f7;
+  --color-bg-secondary_subtle: #fcfcfd;
+  --color-bg-success-primary: #ecfdf3;
+  --color-bg-success-secondary: #dcfae6;
+  --color-bg-success-solid: #079455;
+  --color-bg-tertiary: #f2f4f7;
+  --color-bg-warning-primary: #fffaeb;
+  --color-bg-warning-secondary: #fef0c7;
+  --color-bg-warning-solid: #dc6803;
+  --color-border-brand: #d6bbfb;
+  --color-border-brand-solid: #7f56d9;
+  --color-border-brand-solid_alt: #7f56d9;
+  --color-border-disabled: #d0d5dd;
+  --color-border-disabled_subtle: #eaecf0;
+  --color-border-error: #fda29b;
+  --color-border-error-solid: #d92d20;
+  --color-border-primary: #d0d5dd;
+  --color-border-secondary: #eaecf0;
+  --color-border-tertiary: #f2f4f7;
+  --color-fg-brand-primary: #7f56d9;
+  --color-fg-brand-primary_alt: #7f56d9;
+  --color-fg-brand-secondary: #9e77ed;
+  --color-fg-disabled: #98a2b3;
+  --color-fg-disabled_subtle: #d0d5dd;
+  --color-fg-error-primary: #d92d20;
+  --color-fg-error-secondary: #f04438;
+  --color-fg-primary: #101828;
+  --color-fg-quaternary: #667085;
+  --color-fg-quaternary_hover: #475467;
+  --color-fg-quinary: #98a2b3;
+  --color-fg-quinary_hover: #667085;
+  --color-fg-secondary: #344054;
+  --color-fg-secondary_hover: #182230;
+  --color-fg-senary: #d0d5dd;
+  --color-fg-success-primary: #079455;
+  --color-fg-success-secondary: #17b26a;
+  --color-fg-tertiary: #475467;
+  --color-fg-tertiary_hover: #344054;
+  --color-fg-warning-primary: #dc6803;
+  --color-fg-warning-secondary: #f79009;
+  --color-fg-white: #ffffff;
+  --color-text-brand-primary: #42307d;
+  --color-text-brand-secondary: #6941c6;
+  --color-text-brand-tertiary: #7f56d9;
+  --color-text-brand-tertiary_alt: #7f56d9;
+  --color-text-disabled: #667085;
+  --color-text-error-primary: #d92d20;
+  --color-text-placeholder: #667085;
+  --color-text-placeholder_subtle: #d0d5dd;
+  --color-text-primary: #101828;
+  --color-text-primary_on-brand: #ffffff;
+  --color-text-quaternary: #667085;
+  --color-text-quaternary_on-brand: #d6bbfb;
+  --color-text-secondary: #344054;
+  --color-text-secondary_hover: #182230;
+  --color-text-secondary_on-brand: #e9d7fe;
+  --color-text-success-primary: #079455;
+  --color-text-tertiary: #475467;
+  --color-text-tertiary_hover: #344054;
+  --color-text-tertiary_on-brand: #e9d7fe;
+  --color-text-warning-primary: #dc6803;
+  --color-text-white: #ffffff;
+
+  /* --- Component colors: Light mode --- */
+  --color-component-alpha-alpha-black-10: rgba(0, 0, 0, 0.10000000149011612);
+  --color-component-alpha-alpha-black-100: #000000;
+  --color-component-alpha-alpha-black-20: rgba(0, 0, 0, 0.20000000298023224);
+  --color-component-alpha-alpha-black-30: rgba(0, 0, 0, 0.30000001192092896);
+  --color-component-alpha-alpha-black-40: rgba(0, 0, 0, 0.4000000059604645);
+  --color-component-alpha-alpha-black-50: rgba(0, 0, 0, 0.5);
+  --color-component-alpha-alpha-black-60: rgba(0, 0, 0, 0.6000000238418579);
+  --color-component-alpha-alpha-black-70: rgba(0, 0, 0, 0.699999988079071);
+  --color-component-alpha-alpha-black-80: rgba(0, 0, 0, 0.800000011920929);
+  --color-component-alpha-alpha-black-90: rgba(0, 0, 0, 0.8999999761581421);
+  --color-component-alpha-alpha-white-10: rgba(255, 255, 255, 0.10000000149011612);
+  --color-component-alpha-alpha-white-100: #ffffff;
+  --color-component-alpha-alpha-white-20: rgba(255, 255, 255, 0.20000000298023224);
+  --color-component-alpha-alpha-white-30: rgba(255, 255, 255, 0.30000001192092896);
+  --color-component-alpha-alpha-white-40: rgba(255, 255, 255, 0.4000000059604645);
+  --color-component-alpha-alpha-white-50: rgba(255, 255, 255, 0.5);
+  --color-component-alpha-alpha-white-60: rgba(255, 255, 255, 0.6000000238418579);
+  --color-component-alpha-alpha-white-70: rgba(255, 255, 255, 0.699999988079071);
+  --color-component-alpha-alpha-white-80: rgba(255, 255, 255, 0.800000011920929);
+  --color-component-alpha-alpha-white-90: rgba(255, 255, 255, 0.8999999761581421);
+  --color-component-components-app-store-badges-app-store-badge-border: #a6a6a6;
+  --color-component-components-application-navigation-nav-item-button-icon-fg: #667085;
+  --color-component-components-application-navigation-nav-item-button-icon-fg_active: #344054;
+  --color-component-components-application-navigation-nav-item-icon-fg: #667085;
+  --color-component-components-application-navigation-nav-item-icon-fg_active: #667085;
+  --color-component-components-avatars-avatar-bg: #f2f4f7;
+  --color-component-components-avatars-avatar-contrast-border: rgba(0, 0, 0, 0.07999999821186066);
+  --color-component-components-avatars-avatar-focus-border: rgba(152, 162, 179, 0.14000000059604645);
+  --color-component-components-avatars-avatar-profile-photo-border: #ffffff;
+  --color-component-components-breadcrumbs-breadcrumb-bg_hover: #f9fafb;
+  --color-component-components-breadcrumbs-breadcrumb-brand-bg_hover: #f9f5ff;
+  --color-component-components-breadcrumbs-breadcrumb-brand-fg_hover: #6941c6;
+  --color-component-components-breadcrumbs-breadcrumb-brand-icon-fg_hover: #6941c6;
+  --color-component-components-breadcrumbs-breadcrumb-fg: #475467;
+  --color-component-components-breadcrumbs-breadcrumb-fg_hover: #344054;
+  --color-component-components-breadcrumbs-breadcrumb-icon-fg: #667085;
+  --color-component-components-breadcrumbs-breadcrumb-icon-fg_hover: #344054;
+  --color-component-components-buttons-primary-error-button-primary-error-bg: #d92d20;
+  --color-component-components-buttons-primary-error-button-primary-error-bg_hover: #b42318;
+  --color-component-components-buttons-primary-error-button-primary-error-border: #d92d20;
+  --color-component-components-buttons-primary-error-button-primary-error-border_hover: #b42318;
+  --color-component-components-buttons-primary-error-button-primary-error-fg: #ffffff;
+  --color-component-components-buttons-primary-error-button-primary-error-fg_hover: #ffffff;
+  --color-component-components-buttons-primary-button-primary-bg: #7f56d9;
+  --color-component-components-buttons-primary-button-primary-bg_hover: #6941c6;
+  --color-component-components-buttons-primary-button-primary-border: #7f56d9;
+  --color-component-components-buttons-primary-button-primary-border_hover: #6941c6;
+  --color-component-components-buttons-primary-button-primary-fg: #ffffff;
+  --color-component-components-buttons-primary-button-primary-fg_hover: #ffffff;
+  --color-component-components-buttons-secondary-color-button-secondary-color-bg: #ffffff;
+  --color-component-components-buttons-secondary-color-button-secondary-color-bg_hover: #f9f5ff;
+  --color-component-components-buttons-secondary-color-button-secondary-color-border: #d6bbfb;
+  --color-component-components-buttons-secondary-color-button-secondary-color-border_hover: #d6bbfb;
+  --color-component-components-buttons-secondary-color-button-secondary-color-fg: #6941c6;
+  --color-component-components-buttons-secondary-color-button-secondary-color-fg_hover: #53389e;
+  --color-component-components-buttons-secondary-error-button-secondary-error-bg: #ffffff;
+  --color-component-components-buttons-secondary-error-button-secondary-error-bg_hover: #fef3f2;
+  --color-component-components-buttons-secondary-error-button-secondary-error-border: #fda29b;
+  --color-component-components-buttons-secondary-error-button-secondary-error-border_hover: #fda29b;
+  --color-component-components-buttons-secondary-error-button-secondary-error-fg: #b42318;
+  --color-component-components-buttons-secondary-error-button-secondary-error-fg_hover: #912018;
+  --color-component-components-buttons-secondary-button-secondary-bg: #ffffff;
+  --color-component-components-buttons-secondary-button-secondary-bg_hover: #f9fafb;
+  --color-component-components-buttons-secondary-button-secondary-border: #d0d5dd;
+  --color-component-components-buttons-secondary-button-secondary-border_hover: #d0d5dd;
+  --color-component-components-buttons-secondary-button-secondary-fg: #344054;
+  --color-component-components-buttons-secondary-button-secondary-fg_hover: #182230;
+  --color-component-components-buttons-tertiary-color-button-tertiary-color-bg_hover: #f9f5ff;
+  --color-component-components-buttons-tertiary-color-button-tertiary-color-fg: #6941c6;
+  --color-component-components-buttons-tertiary-color-button-tertiary-color-fg_hover: #53389e;
+  --color-component-components-buttons-tertiary-error-button-tertiary-error-bg_hover: #fef3f2;
+  --color-component-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
+  --color-component-components-buttons-tertiary-error-button-tertiary-error-fg_hover: #912018;
+  --color-component-components-buttons-tertiary-button-tertiary-bg_hover: #f9fafb;
+  --color-component-components-buttons-tertiary-button-tertiary-fg: #475467;
+  --color-component-components-buttons-tertiary-button-tertiary-fg_hover: #344054;
+  --color-component-components-footers-footer-badge-bg: #ecfdf3;
+  --color-component-components-footers-footer-badge-border: #abefc6;
+  --color-component-components-footers-footer-badge-fg: #067647;
+  --color-component-components-footers-footer-button-fg: #e9d7fe;
+  --color-component-components-footers-footer-button-fg_hover: #ffffff;
+  --color-component-components-header-sections-header-abstract-100-bg: #f4ebff;
+  --color-component-components-header-sections-header-abstract-200-bg: #e9d7fe;
+  --color-component-components-header-sections-header-abstract-300-bg: #d6bbfb;
+  --color-component-components-header-sections-header-abstract-50-bg: #f9f5ff;
+  --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
+  --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-error: #ffffff;
+  --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-gray: #ffffff;
+  --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-success: #ffffff;
+  --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-warning: #ffffff;
+  --color-component-components-icons-featured-icons-light-featured-icon-light-fg-brand: #7f56d9;
+  --color-component-components-icons-featured-icons-light-featured-icon-light-fg-error: #d92d20;
+  --color-component-components-icons-featured-icons-light-featured-icon-light-fg-gray: #667085;
+  --color-component-components-icons-featured-icons-light-featured-icon-light-fg-success: #079455;
+  --color-component-components-icons-featured-icons-light-featured-icon-light-fg-warning: #dc6803;
+  --color-component-components-icons-featured-icons-modern-featured-icon-modern-border: #eaecf0;
+  --color-component-components-icons-icons-icon-fg-brand: #7f56d9;
+  --color-component-components-icons-icons-icon-fg-brand_on-brand: #e9d7fe;
+  --color-component-components-icons-social-icons-social-icon-fg-angellist: #000000;
+  --color-component-components-icons-social-icons-social-icon-fg-apple: #000000;
+  --color-component-components-icons-social-icons-social-icon-fg-github: #000000;
+  --color-component-components-icons-social-icons-social-icon-fg-instagram: #000100;
+  --color-component-components-icons-social-icons-social-icon-fg-tumblr: #001935;
+  --color-component-components-icons-social-icons-social-icon-fg-x: #242e36;
+  --color-component-components-mockups-screen-mockup-border: #101828;
+  --color-component-components-sliders-slider-handle-bg: #ffffff;
+  --color-component-components-sliders-slider-handle-border: #7f56d9;
+  --color-component-components-thumbnail-thumbnail-badge-brand-fg: #6941c6;
+  --color-component-components-thumbnail-thumbnail-badge-success-fg: #067647;
+  --color-component-components-toggles-toggle-button-fg_disabled: #f9fafb;
+  --color-component-components-tooltips-tooltip-supporting-text: #d0d5dd;
+  --color-component-components-wysiwyg-editor-wysiwyg-editor-icon-fg: #98a2b3;
+  --color-component-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active: #667085;
+  --color-component-utility-blue-dark-utility-blue-dark-100: #d1e0ff;
+  --color-component-utility-blue-dark-utility-blue-dark-200: #b2ccff;
+  --color-component-utility-blue-dark-utility-blue-dark-300: #84adff;
+  --color-component-utility-blue-dark-utility-blue-dark-400: #528bff;
+  --color-component-utility-blue-dark-utility-blue-dark-50: #eff4ff;
+  --color-component-utility-blue-dark-utility-blue-dark-500: #2970ff;
+  --color-component-utility-blue-dark-utility-blue-dark-600: #155eef;
+  --color-component-utility-blue-dark-utility-blue-dark-700: #004eeb;
+  --color-component-utility-blue-light-utility-blue-light-100: #e0f2fe;
+  --color-component-utility-blue-light-utility-blue-light-200: #b9e6fe;
+  --color-component-utility-blue-light-utility-blue-light-300: #7cd4fd;
+  --color-component-utility-blue-light-utility-blue-light-400: #36bffa;
+  --color-component-utility-blue-light-utility-blue-light-50: #f0f9ff;
+  --color-component-utility-blue-light-utility-blue-light-500: #0ba5ec;
+  --color-component-utility-blue-light-utility-blue-light-600: #0086c9;
+  --color-component-utility-blue-light-utility-blue-light-700: #026aa2;
+  --color-component-utility-blue-utility-blue-100: #d1e9ff;
+  --color-component-utility-blue-utility-blue-200: #b2ddff;
+  --color-component-utility-blue-utility-blue-300: #84caff;
+  --color-component-utility-blue-utility-blue-400: #53b1fd;
+  --color-component-utility-blue-utility-blue-50: #eff8ff;
+  --color-component-utility-blue-utility-blue-500: #2e90fa;
+  --color-component-utility-blue-utility-blue-600: #1570ef;
+  --color-component-utility-blue-utility-blue-700: #175cd3;
+  --color-component-utility-brand-utility-brand-100: #f4ebff;
+  --color-component-utility-brand-utility-brand-100_alt: #f4ebff;
+  --color-component-utility-brand-utility-brand-200: #e9d7fe;
+  --color-component-utility-brand-utility-brand-200_alt: #e9d7fe;
+  --color-component-utility-brand-utility-brand-300: #d6bbfb;
+  --color-component-utility-brand-utility-brand-300_alt: #d6bbfb;
+  --color-component-utility-brand-utility-brand-400: #b692f6;
+  --color-component-utility-brand-utility-brand-400_alt: #b692f6;
+  --color-component-utility-brand-utility-brand-50: #f9f5ff;
+  --color-component-utility-brand-utility-brand-500: #9e77ed;
+  --color-component-utility-brand-utility-brand-500_alt: #9e77ed;
+  --color-component-utility-brand-utility-brand-50_alt: #f9f5ff;
+  --color-component-utility-brand-utility-brand-600: #7f56d9;
+  --color-component-utility-brand-utility-brand-600_alt: #7f56d9;
+  --color-component-utility-brand-utility-brand-700: #6941c6;
+  --color-component-utility-brand-utility-brand-700_alt: #6941c6;
+  --color-component-utility-brand-utility-brand-800: #53389e;
+  --color-component-utility-brand-utility-brand-800_alt: #53389e;
+  --color-component-utility-brand-utility-brand-900: #42307d;
+  --color-component-utility-brand-utility-brand-900_alt: #42307d;
+  --color-component-utility-error-utility-error-100: #fee4e2;
+  --color-component-utility-error-utility-error-200: #fecdca;
+  --color-component-utility-error-utility-error-300: #fda29b;
+  --color-component-utility-error-utility-error-400: #f97066;
+  --color-component-utility-error-utility-error-50: #fef3f2;
+  --color-component-utility-error-utility-error-500: #f04438;
+  --color-component-utility-error-utility-error-600: #d92d20;
+  --color-component-utility-error-utility-error-700: #b42318;
+  --color-component-utility-fuchsia-utility-fuchsia-100: #fbe8ff;
+  --color-component-utility-fuchsia-utility-fuchsia-200: #f6d0fe;
+  --color-component-utility-fuchsia-utility-fuchsia-300: #eeaafd;
+  --color-component-utility-fuchsia-utility-fuchsia-400: #e478fa;
+  --color-component-utility-fuchsia-utility-fuchsia-50: #fdf4ff;
+  --color-component-utility-fuchsia-utility-fuchsia-500: #d444f1;
+  --color-component-utility-fuchsia-utility-fuchsia-600: #ba24d5;
+  --color-component-utility-fuchsia-utility-fuchsia-700: #9f1ab1;
+  --color-component-utility-gray-blue-utility-gray-blue-100: #eaecf5;
+  --color-component-utility-gray-blue-utility-gray-blue-200: #d5d9eb;
+  --color-component-utility-gray-blue-utility-gray-blue-300: #b3b8db;
+  --color-component-utility-gray-blue-utility-gray-blue-400: #717bbc;
+  --color-component-utility-gray-blue-utility-gray-blue-50: #f8f9fc;
+  --color-component-utility-gray-blue-utility-gray-blue-500: #4e5ba6;
+  --color-component-utility-gray-blue-utility-gray-blue-600: #3e4784;
+  --color-component-utility-gray-blue-utility-gray-blue-700: #363f72;
+  --color-component-utility-gray-utility-gray-100: #f2f4f7;
+  --color-component-utility-gray-utility-gray-200: #eaecf0;
+  --color-component-utility-gray-utility-gray-300: #d0d5dd;
+  --color-component-utility-gray-utility-gray-400: #98a2b3;
+  --color-component-utility-gray-utility-gray-50: #f9fafb;
+  --color-component-utility-gray-utility-gray-500: #667085;
+  --color-component-utility-gray-utility-gray-600: #475467;
+  --color-component-utility-gray-utility-gray-700: #344054;
+  --color-component-utility-gray-utility-gray-800: #182230;
+  --color-component-utility-gray-utility-gray-900: #101828;
+  --color-component-utility-indigo-utility-indigo-100: #e0eaff;
+  --color-component-utility-indigo-utility-indigo-200: #c7d7fe;
+  --color-component-utility-indigo-utility-indigo-300: #a4bcfd;
+  --color-component-utility-indigo-utility-indigo-400: #8098f9;
+  --color-component-utility-indigo-utility-indigo-50: #eef4ff;
+  --color-component-utility-indigo-utility-indigo-500: #6172f3;
+  --color-component-utility-indigo-utility-indigo-600: #444ce7;
+  --color-component-utility-indigo-utility-indigo-700: #3538cd;
+  --color-component-utility-orange-dark-utility-orange-dark-100: #ffe6d5;
+  --color-component-utility-orange-dark-utility-orange-dark-200: #ffd6ae;
+  --color-component-utility-orange-dark-utility-orange-dark-300: #ff9c66;
+  --color-component-utility-orange-dark-utility-orange-dark-400: #ff692e;
+  --color-component-utility-orange-dark-utility-orange-dark-50: #fff4ed;
+  --color-component-utility-orange-dark-utility-orange-dark-500: #ff4405;
+  --color-component-utility-orange-dark-utility-orange-dark-600: #e62e05;
+  --color-component-utility-orange-dark-utility-orange-dark-700: #bc1b06;
+  --color-component-utility-orange-utility-orange-100: #fdead7;
+  --color-component-utility-orange-utility-orange-200: #f9dbaf;
+  --color-component-utility-orange-utility-orange-300: #f7b27a;
+  --color-component-utility-orange-utility-orange-400: #f38744;
+  --color-component-utility-orange-utility-orange-50: #fef6ee;
+  --color-component-utility-orange-utility-orange-500: #ef6820;
+  --color-component-utility-orange-utility-orange-600: #e04f16;
+  --color-component-utility-orange-utility-orange-700: #b93815;
+  --color-component-utility-pink-utility-pink-100: #fce7f6;
+  --color-component-utility-pink-utility-pink-200: #fcceee;
+  --color-component-utility-pink-utility-pink-300: #faa7e0;
+  --color-component-utility-pink-utility-pink-400: #f670c7;
+  --color-component-utility-pink-utility-pink-50: #fdf2fa;
+  --color-component-utility-pink-utility-pink-500: #ee46bc;
+  --color-component-utility-pink-utility-pink-600: #dd2590;
+  --color-component-utility-pink-utility-pink-700: #c11574;
+  --color-component-utility-purple-utility-purple-100: #ebe9fe;
+  --color-component-utility-purple-utility-purple-200: #d9d6fe;
+  --color-component-utility-purple-utility-purple-300: #bdb4fe;
+  --color-component-utility-purple-utility-purple-400: #9b8afb;
+  --color-component-utility-purple-utility-purple-50: #f4f3ff;
+  --color-component-utility-purple-utility-purple-500: #7a5af8;
+  --color-component-utility-purple-utility-purple-600: #6938ef;
+  --color-component-utility-purple-utility-purple-700: #5925dc;
+  --color-component-utility-success-utility-success-100: #dcfae6;
+  --color-component-utility-success-utility-success-200: #abefc6;
+  --color-component-utility-success-utility-success-300: #75e0a7;
+  --color-component-utility-success-utility-success-400: #47cd89;
+  --color-component-utility-success-utility-success-50: #ecfdf3;
+  --color-component-utility-success-utility-success-500: #17b26a;
+  --color-component-utility-success-utility-success-600: #079455;
+  --color-component-utility-success-utility-success-700: #067647;
+  --color-component-utility-warning-utility-warning-100: #fef0c7;
+  --color-component-utility-warning-utility-warning-200: #fedf89;
+  --color-component-utility-warning-utility-warning-300: #fec84b;
+  --color-component-utility-warning-utility-warning-400: #fdb022;
+  --color-component-utility-warning-utility-warning-50: #fffaeb;
+  --color-component-utility-warning-utility-warning-500: #f79009;
+  --color-component-utility-warning-utility-warning-600: #dc6803;
+  --color-component-utility-warning-utility-warning-700: #b54708;
+
+  /* --- Spacing floats (_Primitives, px) --- */
+  --spacing-0: 0px;
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-120: 480px;
+  --spacing-140: 560px;
+  --spacing-16: 64px;
+  --spacing-160: 640px;
+  --spacing-180: 720px;
+  --spacing-192: 768px;
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-256: 1024px;
+  --spacing-3: 12px;
+  --spacing-32: 128px;
+  --spacing-320: 1280px;
+  --spacing-360: 1440px;
+  --spacing-4: 16px;
+  --spacing-40: 160px;
+  --spacing-400: 1600px;
+  --spacing-48: 192px;
+  --spacing-480: 1920px;
+  --spacing-5: 20px;
+  --spacing-56: 224px;
+  --spacing-6: 24px;
+  --spacing-64: 256px;
+  --spacing-8: 32px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+
+  /* --- Radius (layout-typography-variables: 2. Radius) --- */
+  --radius-full: 9999px;
+  --radius-lg: 10px;
+  --radius-md: 8px;
+  --radius-sm: 6px;
+  --radius-xl: 12px;
+
+  /* --- Layout, widths, containers, typography variables (layout-typography-variables.json) --- */
+  --container-max-width-desktop: 1280px;
+  --container-padding-desktop: 32px;
+  --container-padding-mobile: 16px;
+  --paragraph-max-width: 720px;
+  --width-2xl: 1024px;
+  --width-3xl: 1280px;
+  --width-4xl: 1440px;
+  --width-5xl: 1600px;
+  --width-6xl: 1920px;
+  --width-lg: 640px;
+  --width-md: 560px;
+  --width-sm: 480px;
+  --width-xl: 768px;
+  --width-xs: 384px;
+  --width-xxs: 320px;
+  --spacing-10xl: 128px;
+  --spacing-11xl: 160px;
+  --spacing-2xl: 20px;
+  --spacing-3xl: 24px;
+  --spacing-4xl: 32px;
+  --spacing-5xl: 40px;
+  --spacing-6xl: 48px;
+  --spacing-7xl: 64px;
+  --spacing-8xl: 80px;
+  --spacing-9xl: 96px;
+  --spacing-lg: 12px;
+  --spacing-md: 8px;
+  --spacing-none: 0px;
+  --spacing-sm: 6px;
+  --spacing-xl: 16px;
+  --spacing-xs: 4px;
+  --spacing-xxs: 2px;
+  --font-family: "Inter";
+  --font-size-display-2xl: 72px;
+  --font-size-display-lg: 48px;
+  --font-size-display-md: 36px;
+  --font-size-display-sm: 30px;
+  --font-size-display-xl: 60px;
+  --font-size-display-xs: 24px;
+  --font-size-text-lg: 18px;
+  --font-size-text-md: 16px;
+  --font-size-text-sm: 14px;
+  --font-size-text-xl: 20px;
+  --font-size-text-xs: 12px;
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --line-height-display-2xl: 90px;
+  --line-height-display-lg: 60px;
+  --line-height-display-md: 44px;
+  --line-height-display-sm: 38px;
+  --line-height-display-xl: 72px;
+  --line-height-display-xs: 32px;
+  --line-height-text-lg: 28px;
+  --line-height-text-md: 24px;
+  --line-height-text-sm: 20px;
+  --line-height-text-xl: 30px;
+  --line-height-text-xs: 18px;
+
+  /* --- Text styles: Regular / no decoration (text-styles.json) --- */
+  --text-display-2xl: 72px;
+  --text-display-2xl--line-height: 90px;
+  --text-display-2xl--letter-spacing: -0.02em;
+  --text-display-xl: 60px;
+  --text-display-xl--line-height: 72px;
+  --text-display-xl--letter-spacing: -0.02em;
+  --text-display-lg: 48px;
+  --text-display-lg--line-height: 60px;
+  --text-display-lg--letter-spacing: -0.02em;
+  --text-display-md: 36px;
+  --text-display-md--line-height: 44px;
+  --text-display-md--letter-spacing: -0.02em;
+  --text-display-sm: 30px;
+  --text-display-sm--line-height: 38px;
+  --text-display-xs: 24px;
+  --text-display-xs--line-height: 32px;
+  --text-xl: 20px;
+  --text-xl--line-height: 30px;
+  --text-lg: 18px;
+  --text-lg--line-height: 28px;
+  --text-md: 16px;
+  --text-md--line-height: 24px;
+  --text-sm: 14px;
+  --text-sm--line-height: 20px;
+  --text-xs: 12px;
+  --text-xs--line-height: 18px;
+
+  /* --- Shadows (effect-styles.json → Shadows/shadow-*) --- */
+  --shadow-xs: 0px 1px 2px 0px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.05000000074505806);
+  --shadow-sm: 0px 1px 2px 0px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.05999999865889549), 0px 1px 3px 0px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.10000000149011612);
+  --shadow-md: 0px 2px 4px -2px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.05999999865889549), 0px 4px 8px -2px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.10000000149011612);
+  --shadow-lg: 0px 4px 6px -2px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.029999999329447746), 0px 12px 16px -4px color(srgb 0.062745101749897 0.0941176488995552 0.1568627506494522 / 0.07999999821186066);
+}
+
+@layer theme {
+  .dark {
+
+    /* Semantic colors: Dark mode */
+    --color-bg-active: #1f242f;
+    --color-bg-brand-primary: #9e77ed;
+    --color-bg-brand-primary_alt: #161b26;
+    --color-bg-brand-secondary: #7f56d9;
+    --color-bg-brand-section: #161b26;
+    --color-bg-brand-section_subtle: #0c111d;
+    --color-bg-brand-solid: #7f56d9;
+    --color-bg-brand-solid_hover: #9e77ed;
+    --color-bg-disabled: #1f242f;
+    --color-bg-disabled_subtle: #161b26;
+    --color-bg-error-primary: #f04438;
+    --color-bg-error-secondary: #d92d20;
+    --color-bg-error-solid: #d92d20;
+    --color-bg-overlay: #1f242f;
+    --color-bg-primary: #0c111d;
+    --color-bg-primary-solid: #161b26;
+    --color-bg-primary_alt: #161b26;
+    --color-bg-primary_hover: #1f242f;
+    --color-bg-quaternary: #333741;
+    --color-bg-secondary: #161b26;
+    --color-bg-secondary-solid: #61646c;
+    --color-bg-secondary_alt: #0c111d;
+    --color-bg-secondary_hover: #1f242f;
+    --color-bg-secondary_subtle: #161b26;
+    --color-bg-success-primary: #17b26a;
+    --color-bg-success-secondary: #079455;
+    --color-bg-success-solid: #079455;
+    --color-bg-tertiary: #1f242f;
+    --color-bg-warning-primary: #f79009;
+    --color-bg-warning-secondary: #dc6803;
+    --color-bg-warning-solid: #dc6803;
+    --color-border-brand: #b692f6;
+    --color-border-brand-solid: #9e77ed;
+    --color-border-brand-solid_alt: #333741;
+    --color-border-disabled: #333741;
+    --color-border-disabled_subtle: #1f242f;
+    --color-border-error: #f97066;
+    --color-border-error-solid: #f04438;
+    --color-border-primary: #333741;
+    --color-border-secondary: #1f242f;
+    --color-border-tertiary: #1f242f;
+    --color-fg-brand-primary: #9e77ed;
+    --color-fg-brand-primary_alt: #cecfd2;
+    --color-fg-brand-secondary: #9e77ed;
+    --color-fg-disabled: #85888e;
+    --color-fg-disabled_subtle: #61646c;
+    --color-fg-error-primary: #f04438;
+    --color-fg-error-secondary: #f97066;
+    --color-fg-primary: #ffffff;
+    --color-fg-quaternary: #94969c;
+    --color-fg-quaternary_hover: #cecfd2;
+    --color-fg-quinary: #85888e;
+    --color-fg-quinary_hover: #94969c;
+    --color-fg-secondary: #cecfd2;
+    --color-fg-secondary_hover: #ececed;
+    --color-fg-senary: #61646c;
+    --color-fg-success-primary: #17b26a;
+    --color-fg-success-secondary: #47cd89;
+    --color-fg-tertiary: #94969c;
+    --color-fg-tertiary_hover: #cecfd2;
+    --color-fg-warning-primary: #f79009;
+    --color-fg-warning-secondary: #fdb022;
+    --color-fg-white: #ffffff;
+    --color-text-brand-primary: #f5f5f6;
+    --color-text-brand-secondary: #cecfd2;
+    --color-text-brand-tertiary: #94969c;
+    --color-text-brand-tertiary_alt: #f5f5f6;
+    --color-text-disabled: #85888e;
+    --color-text-error-primary: #f97066;
+    --color-text-placeholder: #85888e;
+    --color-text-placeholder_subtle: #333741;
+    --color-text-primary: #f5f5f6;
+    --color-text-primary_on-brand: #f5f5f6;
+    --color-text-quaternary: #94969c;
+    --color-text-quaternary_on-brand: #94969c;
+    --color-text-secondary: #cecfd2;
+    --color-text-secondary_hover: #ececed;
+    --color-text-secondary_on-brand: #cecfd2;
+    --color-text-success-primary: #47cd89;
+    --color-text-tertiary: #94969c;
+    --color-text-tertiary_hover: #cecfd2;
+    --color-text-tertiary_on-brand: #94969c;
+    --color-text-warning-primary: #fdb022;
+    --color-text-white: #ffffff;
+
+    /* Component colors: Dark mode */
+    --color-component-alpha-alpha-black-10: rgba(255, 255, 255, 0.10000000149011612);
+    --color-component-alpha-alpha-black-100: #ffffff;
+    --color-component-alpha-alpha-black-20: rgba(255, 255, 255, 0.20000000298023224);
+    --color-component-alpha-alpha-black-30: rgba(255, 255, 255, 0.30000001192092896);
+    --color-component-alpha-alpha-black-40: rgba(255, 255, 255, 0.4000000059604645);
+    --color-component-alpha-alpha-black-50: rgba(255, 255, 255, 0.5);
+    --color-component-alpha-alpha-black-60: rgba(255, 255, 255, 0.6000000238418579);
+    --color-component-alpha-alpha-black-70: rgba(255, 255, 255, 0.699999988079071);
+    --color-component-alpha-alpha-black-80: rgba(255, 255, 255, 0.800000011920929);
+    --color-component-alpha-alpha-black-90: rgba(255, 255, 255, 0.8999999761581421);
+    --color-component-alpha-alpha-white-10: rgba(12, 17, 29, 0.10000000149011612);
+    --color-component-alpha-alpha-white-100: #0c111d;
+    --color-component-alpha-alpha-white-20: rgba(12, 17, 29, 0.20000000298023224);
+    --color-component-alpha-alpha-white-30: rgba(12, 17, 29, 0.30000001192092896);
+    --color-component-alpha-alpha-white-40: rgba(12, 17, 29, 0.4000000059604645);
+    --color-component-alpha-alpha-white-50: rgba(12, 17, 29, 0.5);
+    --color-component-alpha-alpha-white-60: rgba(12, 17, 29, 0.6000000238418579);
+    --color-component-alpha-alpha-white-70: rgba(12, 17, 29, 0.699999988079071);
+    --color-component-alpha-alpha-white-80: rgba(12, 17, 29, 0.800000011920929);
+    --color-component-alpha-alpha-white-90: rgba(12, 17, 29, 0.8999999761581421);
+    --color-component-components-app-store-badges-app-store-badge-border: #ffffff;
+    --color-component-components-application-navigation-nav-item-button-icon-fg: #94969c;
+    --color-component-components-application-navigation-nav-item-button-icon-fg_active: #ececed;
+    --color-component-components-application-navigation-nav-item-icon-fg: #94969c;
+    --color-component-components-application-navigation-nav-item-icon-fg_active: #ececed;
+    --color-component-components-avatars-avatar-bg: #1f242f;
+    --color-component-components-avatars-avatar-contrast-border: rgba(255, 255, 255, 0.11999999731779099);
+    --color-component-components-avatars-avatar-focus-border: rgba(152, 162, 179, 0.14000000059604645);
+    --color-component-components-avatars-avatar-profile-photo-border: #0c111d;
+    --color-component-components-breadcrumbs-breadcrumb-bg_hover: #1f242f;
+    --color-component-components-breadcrumbs-breadcrumb-brand-bg_hover: #1f242f;
+    --color-component-components-breadcrumbs-breadcrumb-brand-fg_hover: #ffffff;
+    --color-component-components-breadcrumbs-breadcrumb-brand-icon-fg_hover: #ffffff;
+    --color-component-components-breadcrumbs-breadcrumb-fg: #cecfd2;
+    --color-component-components-breadcrumbs-breadcrumb-fg_hover: #ffffff;
+    --color-component-components-breadcrumbs-breadcrumb-icon-fg: #94969c;
+    --color-component-components-breadcrumbs-breadcrumb-icon-fg_hover: #ffffff;
+    --color-component-components-buttons-primary-error-button-primary-error-bg: #d92d20;
+    --color-component-components-buttons-primary-error-button-primary-error-bg_hover: #b42318;
+    --color-component-components-buttons-primary-error-button-primary-error-border: #d92d20;
+    --color-component-components-buttons-primary-error-button-primary-error-border_hover: #b42318;
+    --color-component-components-buttons-primary-error-button-primary-error-fg: #ffffff;
+    --color-component-components-buttons-primary-error-button-primary-error-fg_hover: #ffffff;
+    --color-component-components-buttons-primary-button-primary-bg: #7f56d9;
+    --color-component-components-buttons-primary-button-primary-bg_hover: #6941c6;
+    --color-component-components-buttons-primary-button-primary-border: #7f56d9;
+    --color-component-components-buttons-primary-button-primary-border_hover: #6941c6;
+    --color-component-components-buttons-primary-button-primary-fg: #ffffff;
+    --color-component-components-buttons-primary-button-primary-fg_hover: #ffffff;
+    --color-component-components-buttons-secondary-color-button-secondary-color-bg: #161b26;
+    --color-component-components-buttons-secondary-color-button-secondary-color-bg_hover: #1f242f;
+    --color-component-components-buttons-secondary-color-button-secondary-color-border: #333741;
+    --color-component-components-buttons-secondary-color-button-secondary-color-border_hover: #333741;
+    --color-component-components-buttons-secondary-color-button-secondary-color-fg: #cecfd2;
+    --color-component-components-buttons-secondary-color-button-secondary-color-fg_hover: #f0f1f1;
+    --color-component-components-buttons-secondary-error-button-secondary-error-bg: #55160c;
+    --color-component-components-buttons-secondary-error-button-secondary-error-bg_hover: #7a271a;
+    --color-component-components-buttons-secondary-error-button-secondary-error-border: #912018;
+    --color-component-components-buttons-secondary-error-button-secondary-error-border_hover: #b42318;
+    --color-component-components-buttons-secondary-error-button-secondary-error-fg: #fecdca;
+    --color-component-components-buttons-secondary-error-button-secondary-error-fg_hover: #fee4e2;
+    --color-component-components-buttons-secondary-button-secondary-bg: #161b26;
+    --color-component-components-buttons-secondary-button-secondary-bg_hover: #1f242f;
+    --color-component-components-buttons-secondary-button-secondary-border: #333741;
+    --color-component-components-buttons-secondary-button-secondary-border_hover: #333741;
+    --color-component-components-buttons-secondary-button-secondary-fg: #cecfd2;
+    --color-component-components-buttons-secondary-button-secondary-fg_hover: #f0f1f1;
+    --color-component-components-buttons-tertiary-color-button-tertiary-color-bg_hover: #1f242f;
+    --color-component-components-buttons-tertiary-color-button-tertiary-color-fg: #cecfd2;
+    --color-component-components-buttons-tertiary-color-button-tertiary-color-fg_hover: #f0f1f1;
+    --color-component-components-buttons-tertiary-error-button-tertiary-error-bg_hover: #7a271a;
+    --color-component-components-buttons-tertiary-error-button-tertiary-error-fg: #fda29b;
+    --color-component-components-buttons-tertiary-error-button-tertiary-error-fg_hover: #fecdca;
+    --color-component-components-buttons-tertiary-button-tertiary-bg_hover: #1f242f;
+    --color-component-components-buttons-tertiary-button-tertiary-fg: #94969c;
+    --color-component-components-buttons-tertiary-button-tertiary-fg_hover: #ececed;
+    --color-component-components-footers-footer-badge-bg: rgba(255, 255, 255, 0.10000000149011612);
+    --color-component-components-footers-footer-badge-border: rgba(255, 255, 255, 0.30000001192092896);
+    --color-component-components-footers-footer-badge-fg: #ffffff;
+    --color-component-components-footers-footer-button-fg: #cecfd2;
+    --color-component-components-footers-footer-button-fg_hover: #f0f1f1;
+    --color-component-components-header-sections-header-abstract-100-bg: #1f242f;
+    --color-component-components-header-sections-header-abstract-200-bg: #333741;
+    --color-component-components-header-sections-header-abstract-300-bg: #61646c;
+    --color-component-components-header-sections-header-abstract-50-bg: #161b26;
+    --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #e9d7fe;
+    --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-error: #fecdca;
+    --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-gray: #ececed;
+    --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-success: #abefc6;
+    --color-component-components-icons-featured-icons-dark-featured-icon-dark-fg-warning: #fedf89;
+    --color-component-components-icons-featured-icons-light-featured-icon-light-fg-brand: #e9d7fe;
+    --color-component-components-icons-featured-icons-light-featured-icon-light-fg-error: #fecdca;
+    --color-component-components-icons-featured-icons-light-featured-icon-light-fg-gray: #ececed;
+    --color-component-components-icons-featured-icons-light-featured-icon-light-fg-success: #abefc6;
+    --color-component-components-icons-featured-icons-light-featured-icon-light-fg-warning: #fedf89;
+    --color-component-components-icons-featured-icons-modern-featured-icon-modern-border: #333741;
+    --color-component-components-icons-icons-icon-fg-brand: #94969c;
+    --color-component-components-icons-icons-icon-fg-brand_on-brand: #94969c;
+    --color-component-components-icons-social-icons-social-icon-fg-angellist: #ffffff;
+    --color-component-components-icons-social-icons-social-icon-fg-apple: #ffffff;
+    --color-component-components-icons-social-icons-social-icon-fg-github: #ffffff;
+    --color-component-components-icons-social-icons-social-icon-fg-instagram: #ffffff;
+    --color-component-components-icons-social-icons-social-icon-fg-tumblr: #ffffff;
+    --color-component-components-icons-social-icons-social-icon-fg-x: #ffffff;
+    --color-component-components-mockups-screen-mockup-border: #333741;
+    --color-component-components-sliders-slider-handle-bg: #9e77ed;
+    --color-component-components-sliders-slider-handle-border: #0c111d;
+    --color-component-components-thumbnail-thumbnail-badge-brand-fg: #cecfd2;
+    --color-component-components-thumbnail-thumbnail-badge-success-fg: #cecfd2;
+    --color-component-components-toggles-toggle-button-fg_disabled: #61646c;
+    --color-component-components-tooltips-tooltip-supporting-text: #cecfd2;
+    --color-component-components-wysiwyg-editor-wysiwyg-editor-icon-fg: #94969c;
+    --color-component-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active: #ffffff;
+    --color-component-utility-blue-dark-utility-blue-dark-100: #00359e;
+    --color-component-utility-blue-dark-utility-blue-dark-200: #0040c1;
+    --color-component-utility-blue-dark-utility-blue-dark-300: #004eeb;
+    --color-component-utility-blue-dark-utility-blue-dark-400: #155eef;
+    --color-component-utility-blue-dark-utility-blue-dark-50: #002266;
+    --color-component-utility-blue-dark-utility-blue-dark-500: #2970ff;
+    --color-component-utility-blue-dark-utility-blue-dark-600: #528bff;
+    --color-component-utility-blue-dark-utility-blue-dark-700: #84adff;
+    --color-component-utility-blue-light-utility-blue-light-100: #0b4a6f;
+    --color-component-utility-blue-light-utility-blue-light-200: #065986;
+    --color-component-utility-blue-light-utility-blue-light-300: #026aa2;
+    --color-component-utility-blue-light-utility-blue-light-400: #0086c9;
+    --color-component-utility-blue-light-utility-blue-light-50: #062c41;
+    --color-component-utility-blue-light-utility-blue-light-500: #0ba5ec;
+    --color-component-utility-blue-light-utility-blue-light-600: #36bffa;
+    --color-component-utility-blue-light-utility-blue-light-700: #7cd4fd;
+    --color-component-utility-blue-utility-blue-100: #194185;
+    --color-component-utility-blue-utility-blue-200: #1849a9;
+    --color-component-utility-blue-utility-blue-300: #175cd3;
+    --color-component-utility-blue-utility-blue-400: #1570ef;
+    --color-component-utility-blue-utility-blue-50: #102a56;
+    --color-component-utility-blue-utility-blue-500: #2e90fa;
+    --color-component-utility-blue-utility-blue-600: #53b1fd;
+    --color-component-utility-blue-utility-blue-700: #84caff;
+    --color-component-utility-brand-utility-brand-100: #42307d;
+    --color-component-utility-brand-utility-brand-100_alt: #1f242f;
+    --color-component-utility-brand-utility-brand-200: #53389e;
+    --color-component-utility-brand-utility-brand-200_alt: #333741;
+    --color-component-utility-brand-utility-brand-300: #6941c6;
+    --color-component-utility-brand-utility-brand-300_alt: #333741;
+    --color-component-utility-brand-utility-brand-400: #7f56d9;
+    --color-component-utility-brand-utility-brand-400_alt: #61646c;
+    --color-component-utility-brand-utility-brand-50: #2c1c5f;
+    --color-component-utility-brand-utility-brand-500: #9e77ed;
+    --color-component-utility-brand-utility-brand-500_alt: #85888e;
+    --color-component-utility-brand-utility-brand-50_alt: #161b26;
+    --color-component-utility-brand-utility-brand-600: #b692f6;
+    --color-component-utility-brand-utility-brand-600_alt: #94969c;
+    --color-component-utility-brand-utility-brand-700: #d6bbfb;
+    --color-component-utility-brand-utility-brand-700_alt: #cecfd2;
+    --color-component-utility-brand-utility-brand-800: #e9d7fe;
+    --color-component-utility-brand-utility-brand-800_alt: #ececed;
+    --color-component-utility-brand-utility-brand-900: #f4ebff;
+    --color-component-utility-brand-utility-brand-900_alt: #f0f1f1;
+    --color-component-utility-error-utility-error-100: #7a271a;
+    --color-component-utility-error-utility-error-200: #912018;
+    --color-component-utility-error-utility-error-300: #b42318;
+    --color-component-utility-error-utility-error-400: #d92d20;
+    --color-component-utility-error-utility-error-50: #55160c;
+    --color-component-utility-error-utility-error-500: #f04438;
+    --color-component-utility-error-utility-error-600: #f97066;
+    --color-component-utility-error-utility-error-700: #fda29b;
+    --color-component-utility-fuchsia-utility-fuchsia-100: #6f1877;
+    --color-component-utility-fuchsia-utility-fuchsia-200: #821890;
+    --color-component-utility-fuchsia-utility-fuchsia-300: #9f1ab1;
+    --color-component-utility-fuchsia-utility-fuchsia-400: #ba24d5;
+    --color-component-utility-fuchsia-utility-fuchsia-50: #47104c;
+    --color-component-utility-fuchsia-utility-fuchsia-500: #d444f1;
+    --color-component-utility-fuchsia-utility-fuchsia-600: #e478fa;
+    --color-component-utility-fuchsia-utility-fuchsia-700: #eeaafd;
+    --color-component-utility-gray-blue-utility-gray-blue-100: #101323;
+    --color-component-utility-gray-blue-utility-gray-blue-200: #293056;
+    --color-component-utility-gray-blue-utility-gray-blue-300: #363f72;
+    --color-component-utility-gray-blue-utility-gray-blue-400: #3e4784;
+    --color-component-utility-gray-blue-utility-gray-blue-50: #101323;
+    --color-component-utility-gray-blue-utility-gray-blue-500: #4e5ba6;
+    --color-component-utility-gray-blue-utility-gray-blue-600: #717bbc;
+    --color-component-utility-gray-blue-utility-gray-blue-700: #b3b8db;
+    --color-component-utility-gray-utility-gray-100: #1f242f;
+    --color-component-utility-gray-utility-gray-200: #333741;
+    --color-component-utility-gray-utility-gray-300: #333741;
+    --color-component-utility-gray-utility-gray-400: #61646c;
+    --color-component-utility-gray-utility-gray-50: #161b26;
+    --color-component-utility-gray-utility-gray-500: #85888e;
+    --color-component-utility-gray-utility-gray-600: #94969c;
+    --color-component-utility-gray-utility-gray-700: #cecfd2;
+    --color-component-utility-gray-utility-gray-800: #ececed;
+    --color-component-utility-gray-utility-gray-900: #f0f1f1;
+    --color-component-utility-indigo-utility-indigo-100: #2d3282;
+    --color-component-utility-indigo-utility-indigo-200: #2d31a6;
+    --color-component-utility-indigo-utility-indigo-300: #3538cd;
+    --color-component-utility-indigo-utility-indigo-400: #444ce7;
+    --color-component-utility-indigo-utility-indigo-50: #1f235b;
+    --color-component-utility-indigo-utility-indigo-500: #6172f3;
+    --color-component-utility-indigo-utility-indigo-600: #8098f9;
+    --color-component-utility-indigo-utility-indigo-700: #a4bcfd;
+    --color-component-utility-orange-dark-utility-orange-dark-100: #771a0d;
+    --color-component-utility-orange-dark-utility-orange-dark-200: #97180c;
+    --color-component-utility-orange-dark-utility-orange-dark-300: #bc1b06;
+    --color-component-utility-orange-dark-utility-orange-dark-400: #e62e05;
+    --color-component-utility-orange-dark-utility-orange-dark-50: #57130a;
+    --color-component-utility-orange-dark-utility-orange-dark-500: #ff4405;
+    --color-component-utility-orange-dark-utility-orange-dark-600: #ff692e;
+    --color-component-utility-orange-dark-utility-orange-dark-700: #ff9c66;
+    --color-component-utility-orange-utility-orange-100: #772917;
+    --color-component-utility-orange-utility-orange-200: #932f19;
+    --color-component-utility-orange-utility-orange-300: #b93815;
+    --color-component-utility-orange-utility-orange-400: #e04f16;
+    --color-component-utility-orange-utility-orange-50: #511c10;
+    --color-component-utility-orange-utility-orange-500: #ef6820;
+    --color-component-utility-orange-utility-orange-600: #f38744;
+    --color-component-utility-orange-utility-orange-700: #f7b27a;
+    --color-component-utility-pink-utility-pink-100: #851651;
+    --color-component-utility-pink-utility-pink-200: #9e165f;
+    --color-component-utility-pink-utility-pink-300: #c11574;
+    --color-component-utility-pink-utility-pink-400: #dd2590;
+    --color-component-utility-pink-utility-pink-50: #4e0d30;
+    --color-component-utility-pink-utility-pink-500: #ee46bc;
+    --color-component-utility-pink-utility-pink-600: #f670c7;
+    --color-component-utility-pink-utility-pink-700: #faa7e0;
+    --color-component-utility-purple-utility-purple-100: #3e1c96;
+    --color-component-utility-purple-utility-purple-200: #4a1fb8;
+    --color-component-utility-purple-utility-purple-300: #5925dc;
+    --color-component-utility-purple-utility-purple-400: #6938ef;
+    --color-component-utility-purple-utility-purple-50: #27115f;
+    --color-component-utility-purple-utility-purple-500: #7a5af8;
+    --color-component-utility-purple-utility-purple-600: #9b8afb;
+    --color-component-utility-purple-utility-purple-700: #bdb4fe;
+    --color-component-utility-success-utility-success-100: #074d31;
+    --color-component-utility-success-utility-success-200: #085d3a;
+    --color-component-utility-success-utility-success-300: #067647;
+    --color-component-utility-success-utility-success-400: #079455;
+    --color-component-utility-success-utility-success-50: #053321;
+    --color-component-utility-success-utility-success-500: #17b26a;
+    --color-component-utility-success-utility-success-600: #47cd89;
+    --color-component-utility-success-utility-success-700: #75e0a7;
+    --color-component-utility-warning-utility-warning-100: #7a2e0e;
+    --color-component-utility-warning-utility-warning-200: #93370d;
+    --color-component-utility-warning-utility-warning-300: #b54708;
+    --color-component-utility-warning-utility-warning-400: #dc6803;
+    --color-component-utility-warning-utility-warning-50: #4e1d09;
+    --color-component-utility-warning-utility-warning-500: #f79009;
+    --color-component-utility-warning-utility-warning-600: #fdb022;
+    --color-component-utility-warning-utility-warning-700: #fec84b;
+  }
+}