@bcc-code/component-library-vue 0.1.0

package/dist/theme.css

@@ -0,0 +1,2337 @@
+/* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
+@layer theme, base, tailwind, primevue;
+
+@import "tailwindcss";
+@import "@bcc-code/design-tokens/tailwind";
+@import "@bcc-code/design-tokens/primevue/overrides";
+
+
+/* === ./styles/theme.css === */
+@theme {
+    
+    /* spacing variables */
+    --spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
+    --spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+    --spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+    --spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+    --spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
+    --spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+    --spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+    --spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+    --spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
+    --spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
+
+    --spacing-18: 4.5rem;
+
+    /* color variables */
+    --color-overlay: rgba(17, 24, 39, 0.85);
+}
+
+.ctx-default { @apply ctx-default }
+.ctx-success { @apply ctx-success-subtlest }
+.ctx-danger { @apply ctx-danger-subtlest }
+.ctx-warning { @apply ctx-warning-subtlest }
+.ctx-info { @apply ctx-info-subtlest }
+
+.ctx-blue-bolder { @apply ctx-blue-bolder }
+.ctx-blue-subtle { @apply ctx-blue-subtle }
+.ctx-blue-subtler { @apply ctx-blue-subtler }
+.ctx-blue-subtlest { @apply ctx-blue-subtlest }
+.ctx-brand-boldest { @apply ctx-brand-boldest }
+.ctx-brand-bolder { @apply ctx-brand-bolder }
+.ctx-brand-bold { @apply ctx-brand-bold }
+.ctx-brand-subtle { @apply ctx-brand-subtle }
+.ctx-brand-subtler { @apply ctx-brand-subtler }
+.ctx-brand-subtlest { @apply ctx-brand-subtlest }
+.ctx-brown-bolder { @apply ctx-brown-bolder }
+.ctx-brown-subtle { @apply ctx-brown-subtle }
+.ctx-brown-subtler { @apply ctx-brown-subtler }
+.ctx-brown-subtlest { @apply ctx-brown-subtlest }
+.ctx-danger-subtlest { @apply ctx-danger }
+.ctx-danger-bolder { @apply ctx-danger-bolder }
+.ctx-gray-bolder { @apply ctx-gray-bolder }
+.ctx-gray-subtle { @apply ctx-gray-subtle }
+.ctx-gray-subtler { @apply ctx-gray-subtler }
+.ctx-gray-subtlest { @apply ctx-gray-subtlest }
+.ctx-green-bolder { @apply ctx-green-bolder }
+.ctx-green-subtle { @apply ctx-green-subtle }
+.ctx-green-subtler { @apply ctx-green-subtler }
+.ctx-green-subtlest { @apply ctx-green-subtlest }
+.ctx-info-subtlest { @apply ctx-info }
+.ctx-info-bolder { @apply ctx-info-bolder }
+.ctx-magenta-bolder { @apply ctx-magenta-bolder }
+.ctx-magenta-subtle { @apply ctx-magenta-subtle }
+.ctx-magenta-subtler { @apply ctx-magenta-subtler }
+.ctx-magenta-subtlest { @apply ctx-magenta-subtlest }
+.ctx-neutral-boldest { @apply ctx-neutral-boldest }
+.ctx-neutral-bolder { @apply ctx-neutral-bolder }
+.ctx-neutral-bold { @apply ctx-neutral-bold }
+.ctx-neutral-subtle { @apply ctx-neutral-subtle }
+.ctx-neutral-subtler { @apply ctx-neutral-subtler }
+.ctx-neutral-subtlest { @apply ctx-neutral-subtlest }
+.ctx-orange-bolder { @apply ctx-orange-bolder }
+.ctx-orange-subtle { @apply ctx-orange-subtle }
+.ctx-orange-subtler { @apply ctx-orange-subtler }
+.ctx-orange-subtlest { @apply ctx-orange-subtlest }
+.ctx-purple-bolder { @apply ctx-purple-bolder }
+.ctx-purple-subtle { @apply ctx-purple-subtle }
+.ctx-purple-subtler { @apply ctx-purple-subtler }
+.ctx-purple-subtlest { @apply ctx-purple-subtlest }
+.ctx-red-bolder { @apply ctx-red-bolder }
+.ctx-red-subtle { @apply ctx-red-subtle }
+.ctx-red-subtler { @apply ctx-red-subtler }
+.ctx-red-subtlest { @apply ctx-red-subtlest }
+.ctx-success-subtlest { @apply ctx-success }
+.ctx-success-bolder { @apply ctx-success-bolder }
+.ctx-teal-bolder { @apply ctx-teal-bolder }
+.ctx-teal-subtle { @apply ctx-teal-subtle }
+.ctx-teal-subtler { @apply ctx-teal-subtler }
+.ctx-teal-subtlest { @apply ctx-teal-subtlest }
+.ctx-warning-subtlest { @apply ctx-warning }
+.ctx-warning-bolder { @apply ctx-warning-bolder }
+.ctx-yellow-bolder { @apply ctx-yellow-bolder }
+.ctx-yellow-subtle { @apply ctx-yellow-subtle }
+.ctx-yellow-subtler { @apply ctx-yellow-subtler }
+.ctx-yellow-subtlest { @apply ctx-yellow-subtlest }
+
+
+/* === ./styles/semantic.css === */
+/* Auto-generated from bcc_scheme tokens. Do not edit. Run: pnpm run generate:semantic-css */
+/* Light mode from light.tokens.json; dark mode from dark.tokens.json */
+
+:root {
+  --color-default-bcc-100: #F0FCFA;
+  --color-default-bcc-1000: #012320;
+  --color-default-bcc-200: #D2EEEB;
+  --color-default-bcc-300: #A0CEC8;
+  --color-default-bcc-400: #6FB5AD;
+  --color-default-bcc-500: #3E9F97;
+  --color-default-bcc-600: #1D7F78;
+  --color-default-bcc-700: #0C625C;
+  --color-default-bcc-800: #014D49;
+  --color-default-bcc-900: #0B3633;
+  --color-default-blue-100: #F6FBFF;
+  --color-default-blue-1000: #091E47;
+  --color-default-blue-200: #D9ECFF;
+  --color-default-blue-300: #A6CDFD;
+  --color-default-blue-400: #7CABF9;
+  --color-default-blue-500: #608EF6;
+  --color-default-blue-600: #446ADD;
+  --color-default-blue-700: #274EB5;
+  --color-default-blue-800: #273C8F;
+  --color-default-blue-900: #212C64;
+  --color-default-brown-100: #F9FAF4;
+  --color-default-brown-1000: #2E1B0F;
+  --color-default-brown-200: #ECE8DC;
+  --color-default-brown-300: #D1C5B0;
+  --color-default-brown-400: #BEA889;
+  --color-default-brown-500: #A98C66;
+  --color-default-brown-600: #8B6D45;
+  --color-default-brown-700: #6E5232;
+  --color-default-brown-800: #553D28;
+  --color-default-brown-900: #3F2C1E;
+  --color-default-green-100: #EFFFED;
+  --color-default-green-1000: #032429;
+  --color-default-green-200: #CBF3C9;
+  --color-default-green-300: #83D895;
+  --color-default-green-400: #32C180;
+  --color-default-green-500: #1CA673;
+  --color-default-green-600: #09825D;
+  --color-default-green-700: #0C6241;
+  --color-default-green-800: #094C3B;
+  --color-default-green-900: #073734;
+  --color-default-magenta-100: #FFF8FF;
+  --color-default-magenta-1000: #3F0534;
+  --color-default-magenta-200: #FCE0F8;
+  --color-default-magenta-300: #F3B4E2;
+  --color-default-magenta-400: #EB8ACF;
+  --color-default-magenta-500: #DE66B0;
+  --color-default-magenta-600: #BE428F;
+  --color-default-magenta-700: #952E70;
+  --color-default-magenta-800: #751F57;
+  --color-default-magenta-900: #5B1043;
+  --color-default-neutral-alpha-100A: #171717;
+  --color-default-neutral-alpha-200A: #051524;
+  --color-default-neutral-alpha-300A: #0B120E;
+  --color-default-neutral-alpha-400A: #080F21;
+  --color-default-neutral-alpha-500A: #050C1F;
+  --color-default-neutral-0: #FFFFFF;
+  --color-default-neutral-100: #F8F8F8;
+  --color-default-neutral-1000: #292A2E;
+  --color-default-neutral-1100: #1E1F21;
+  --color-default-neutral-200: #F0F1F2;
+  --color-default-neutral-300: #DDDEE1;
+  --color-default-neutral-400: #B7B9BE;
+  --color-default-neutral-500: #8C8F97;
+  --color-default-neutral-600: #7D818A;
+  --color-default-neutral-700: #6B6E76;
+  --color-default-neutral-800: #505258;
+  --color-default-neutral-900: #3B3D42;
+  --color-default-orange-100: #FFFAED;
+  --color-default-orange-1000: #420E0D;
+  --color-default-orange-200: #FEE3C1;
+  --color-default-orange-300: #F6B981;
+  --color-default-orange-400: #F19457;
+  --color-default-orange-500: #DA772E;
+  --color-default-orange-600: #B55919;
+  --color-default-orange-700: #943A14;
+  --color-default-orange-800: #782612;
+  --color-default-orange-900: #5D1712;
+  --color-default-purple-100: #F6F9FF;
+  --color-default-purple-1000: #1D154D;
+  --color-default-purple-200: #E3E3FE;
+  --color-default-purple-300: #C9C3EC;
+  --color-default-purple-400: #AFA0E0;
+  --color-default-purple-500: #9A82DA;
+  --color-default-purple-600: #8360C3;
+  --color-default-purple-700: #61479C;
+  --color-default-purple-800: #493481;
+  --color-default-purple-900: #352465;
+  --color-default-red-100: #FFF8F3;
+  --color-default-red-1000: #440223;
+  --color-default-red-200: #FEE2DD;
+  --color-default-red-300: #FAB6AD;
+  --color-default-red-400: #FA877E;
+  --color-default-red-500: #ED6362;
+  --color-default-red-600: #CA414E;
+  --color-default-red-700: #A42237;
+  --color-default-red-800: #811436;
+  --color-default-red-900: #630D2E;
+  --color-default-teal-100: #F6FBFF;
+  --color-default-teal-1000: #0C2132;
+  --color-default-teal-200: #C3F2F8;
+  --color-default-teal-300: #82D3E3;
+  --color-default-teal-400: #51B9CF;
+  --color-default-teal-500: #1A9EB7;
+  --color-default-teal-600: #0B7DA1;
+  --color-default-teal-700: #005B81;
+  --color-default-teal-800: #09486B;
+  --color-default-teal-900: #0D324D;
+  --color-default-transparent: #000000;
+  --color-default-yellow-100: #FDF8E9;
+  --color-default-yellow-1000: #2D1F00;
+  --color-default-yellow-200: #F8E6A0;
+  --color-default-yellow-300: #E9C348;
+  --color-default-yellow-400: #D5A406;
+  --color-default-yellow-500: #BC870D;
+  --color-default-yellow-600: #A4670B;
+  --color-default-yellow-700: #854901;
+  --color-default-yellow-800: #653805;
+  --color-default-yellow-900: #4B2C04;
+  --color-secondary-bcc-100: #F0FCFA;
+  --color-secondary-bcc-1000: #012320;
+  --color-secondary-bcc-200: #D2EEEB;
+  --color-secondary-bcc-300: #A0CEC8;
+  --color-secondary-bcc-400: #6FB5AD;
+  --color-secondary-bcc-500: #3E9F97;
+  --color-secondary-bcc-600: #1D7F78;
+  --color-secondary-bcc-700: #0C625C;
+  --color-secondary-bcc-800: #014D49;
+  --color-secondary-bcc-900: #0B3633;
+  --color-secondary-blue-100: #F6FBFF;
+  --color-secondary-blue-1000: #091E47;
+  --color-secondary-blue-200: #D9ECFF;
+  --color-secondary-blue-300: #A6CDFD;
+  --color-secondary-blue-400: #7CABF9;
+  --color-secondary-blue-500: #608EF6;
+  --color-secondary-blue-600: #446ADD;
+  --color-secondary-blue-700: #274EB5;
+  --color-secondary-blue-800: #273C8F;
+  --color-secondary-blue-900: #212C64;
+  --color-secondary-brown-100: #F9FAF4;
+  --color-secondary-brown-1000: #2E1B0F;
+  --color-secondary-brown-200: #ECE8DC;
+  --color-secondary-brown-300: #D1C5B0;
+  --color-secondary-brown-400: #BEA889;
+  --color-secondary-brown-500: #A98C66;
+  --color-secondary-brown-600: #8B6D45;
+  --color-secondary-brown-700: #6E5232;
+  --color-secondary-brown-800: #553D28;
+  --color-secondary-brown-900: #3F2C1E;
+  --color-secondary-green-100: #EFFFED;
+  --color-secondary-green-1000: #032429;
+  --color-secondary-green-200: #CBF3C9;
+  --color-secondary-green-300: #83D895;
+  --color-secondary-green-400: #32C180;
+  --color-secondary-green-500: #1CA673;
+  --color-secondary-green-600: #09825D;
+  --color-secondary-green-700: #0C6241;
+  --color-secondary-green-800: #094C3B;
+  --color-secondary-green-900: #073734;
+  --color-secondary-magenta-100: #FFF8FF;
+  --color-secondary-magenta-1000: #3F0534;
+  --color-secondary-magenta-200: #FCE0F8;
+  --color-secondary-magenta-300: #F3B4E2;
+  --color-secondary-magenta-400: #EB8ACF;
+  --color-secondary-magenta-500: #DE66B0;
+  --color-secondary-magenta-600: #BE428F;
+  --color-secondary-magenta-700: #952E70;
+  --color-secondary-magenta-800: #751F57;
+  --color-secondary-magenta-900: #5B1043;
+  --color-secondary-neutral-0: #FFFFFF;
+  --color-secondary-neutral-100: #F8F8F8;
+  --color-secondary-neutral-1000: #292A2E;
+  --color-secondary-neutral-1100: #1E1F21;
+  --color-secondary-neutral-200: #F0F1F2;
+  --color-secondary-neutral-300: #DDDEE1;
+  --color-secondary-neutral-400: #B7B9BE;
+  --color-secondary-neutral-500: #8C8F97;
+  --color-secondary-neutral-600: #7D818A;
+  --color-secondary-neutral-700: #6B6E76;
+  --color-secondary-neutral-800: #505258;
+  --color-secondary-neutral-900: #3B3D42;
+  --color-secondary-orange-100: #FFFAED;
+  --color-secondary-orange-1000: #420E0D;
+  --color-secondary-orange-200: #FEE3C1;
+  --color-secondary-orange-300: #F6B981;
+  --color-secondary-orange-400: #F19457;
+  --color-secondary-orange-500: #DA772E;
+  --color-secondary-orange-600: #B55919;
+  --color-secondary-orange-700: #943A14;
+  --color-secondary-orange-800: #782612;
+  --color-secondary-orange-900: #5D1712;
+  --color-secondary-purple-100: #F6F9FF;
+  --color-secondary-purple-1000: #1D154D;
+  --color-secondary-purple-200: #E3E3FE;
+  --color-secondary-purple-300: #C9C3EC;
+  --color-secondary-purple-400: #AFA0E0;
+  --color-secondary-purple-500: #9A82DA;
+  --color-secondary-purple-600: #8360C3;
+  --color-secondary-purple-700: #61479C;
+  --color-secondary-purple-800: #493481;
+  --color-secondary-purple-900: #352465;
+  --color-secondary-red-100: #FFF8F3;
+  --color-secondary-red-1000: #440223;
+  --color-secondary-red-200: #FEE2DD;
+  --color-secondary-red-300: #FAB6AD;
+  --color-secondary-red-400: #FA877E;
+  --color-secondary-red-500: #ED6362;
+  --color-secondary-red-600: #CA414E;
+  --color-secondary-red-700: #A42237;
+  --color-secondary-red-800: #811436;
+  --color-secondary-red-900: #630D2E;
+  --color-secondary-teal-100: #F6FBFF;
+  --color-secondary-teal-1000: #0C2132;
+  --color-secondary-teal-200: #C3F2F8;
+  --color-secondary-teal-300: #82D3E3;
+  --color-secondary-teal-400: #51B9CF;
+  --color-secondary-teal-500: #1A9EB7;
+  --color-secondary-teal-600: #0B7DA1;
+  --color-secondary-teal-700: #005B81;
+  --color-secondary-teal-800: #09486B;
+  --color-secondary-teal-900: #0D324D;
+  --color-secondary-yellow-100: #FDF8E9;
+  --color-secondary-yellow-1000: #2D1F00;
+  --color-secondary-yellow-200: #F8E6A0;
+  --color-secondary-yellow-300: #E9C348;
+  --color-secondary-yellow-400: #D5A406;
+  --color-secondary-yellow-500: #BC870D;
+  --color-secondary-yellow-600: #A4670B;
+  --color-secondary-yellow-700: #854901;
+  --color-secondary-yellow-800: #653805;
+  --color-secondary-yellow-900: #4B2C04;
+  --color-tertiary-neutral-0: #FFFFFF;
+  --color-tertiary-neutral-100: #F8F8F8;
+  --color-tertiary-neutral-200: #F0F1F2;
+  --color-tertiary-neutral-300: #DDDEE1;
+  --color-tertiary-neutral-400: #B7B9BE;
+  --color-tertiary-neutral-500: #8C8F97;
+  --color-tertiary-neutral-600: #7D818A;
+  --color-tertiary-neutral-700: #6B6E76;
+  --color-tertiary-neutral-800: #505258;
+  --color-tertiary-neutral-900: #3B3D42;
+}
+
+.dark {
+  --color-default-bcc-100: #012320;
+  --color-default-bcc-1000: #F0FCFA;
+  --color-default-bcc-200: #0B3633;
+  --color-default-bcc-300: #014D49;
+  --color-default-bcc-400: #0C625C;
+  --color-default-bcc-500: #1D7F78;
+  --color-default-bcc-600: #3E9F97;
+  --color-default-bcc-700: #6FB5AD;
+  --color-default-bcc-800: #A0CEC8;
+  --color-default-bcc-900: #D2EEEB;
+  --color-default-blue-100: #091E47;
+  --color-default-blue-1000: #F6FBFF;
+  --color-default-blue-200: #212C64;
+  --color-default-blue-300: #273C8F;
+  --color-default-blue-400: #274EB5;
+  --color-default-blue-500: #446ADD;
+  --color-default-blue-600: #608EF6;
+  --color-default-blue-700: #7CABF9;
+  --color-default-blue-800: #A6CDFD;
+  --color-default-blue-900: #D9ECFF;
+  --color-default-brown-100: #2E1B0F;
+  --color-default-brown-1000: #F9FAF4;
+  --color-default-brown-200: #3F2C1E;
+  --color-default-brown-300: #553D28;
+  --color-default-brown-400: #6E5232;
+  --color-default-brown-500: #8B6D45;
+  --color-default-brown-600: #A98C66;
+  --color-default-brown-700: #BEA889;
+  --color-default-brown-800: #D1C5B0;
+  --color-default-brown-900: #ECE8DC;
+  --color-default-green-100: #032429;
+  --color-default-green-1000: #EFFFED;
+  --color-default-green-200: #073734;
+  --color-default-green-300: #094C3B;
+  --color-default-green-400: #0C6241;
+  --color-default-green-500: #09825D;
+  --color-default-green-600: #1CA673;
+  --color-default-green-700: #32C180;
+  --color-default-green-800: #83D895;
+  --color-default-green-900: #CBF3C9;
+  --color-default-magenta-100: #3F0534;
+  --color-default-magenta-1000: #FFF8FF;
+  --color-default-magenta-200: #5B1043;
+  --color-default-magenta-300: #751F57;
+  --color-default-magenta-400: #952E70;
+  --color-default-magenta-500: #BE428F;
+  --color-default-magenta-600: #DE66B0;
+  --color-default-magenta-700: #EB8ACF;
+  --color-default-magenta-800: #F3B4E2;
+  --color-default-magenta-900: #FCE0F8;
+  --color-default-neutral-alpha-100A: #BDBDBD;
+  --color-default-neutral-alpha-200A: #CECED9;
+  --color-default-neutral-alpha-300A: #E3E4F2;
+  --color-default-neutral-alpha-400A: #E5E9F6;
+  --color-default-neutral-alpha-500A: #E9F0FB;
+  --color-default-neutral-0: #18191A;
+  --color-default-neutral-100: #1F1F21;
+  --color-default-neutral-1000: #CECFD2;
+  --color-default-neutral-1100: #E2E3E4;
+  --color-default-neutral-200: #242528;
+  --color-default-neutral-300: #303134;
+  --color-default-neutral-400: #4B4D51;
+  --color-default-neutral-500: #63666B;
+  --color-default-neutral-600: #7E8188;
+  --color-default-neutral-700: #96999E;
+  --color-default-neutral-800: #A9ABAF;
+  --color-default-neutral-900: #BFC1C4;
+  --color-default-orange-100: #420E0D;
+  --color-default-orange-1000: #FFFAED;
+  --color-default-orange-200: #5D1712;
+  --color-default-orange-300: #782612;
+  --color-default-orange-400: #943A14;
+  --color-default-orange-500: #B55919;
+  --color-default-orange-600: #DA772E;
+  --color-default-orange-700: #F19457;
+  --color-default-orange-800: #F6B981;
+  --color-default-orange-900: #FEE3C1;
+  --color-default-purple-100: #1D154D;
+  --color-default-purple-1000: #F6F9FF;
+  --color-default-purple-200: #352465;
+  --color-default-purple-300: #493481;
+  --color-default-purple-400: #61479C;
+  --color-default-purple-500: #8360C3;
+  --color-default-purple-600: #9A82DA;
+  --color-default-purple-700: #AFA0E0;
+  --color-default-purple-800: #C9C3EC;
+  --color-default-purple-900: #E3E3FE;
+  --color-default-red-100: #440223;
+  --color-default-red-1000: #FFF8F3;
+  --color-default-red-200: #630D2E;
+  --color-default-red-300: #811436;
+  --color-default-red-400: #A42237;
+  --color-default-red-500: #CA414E;
+  --color-default-red-600: #ED6362;
+  --color-default-red-700: #FA877E;
+  --color-default-red-800: #FAB6AD;
+  --color-default-red-900: #FEE2DD;
+  --color-default-teal-100: #0C2132;
+  --color-default-teal-1000: #F6FBFF;
+  --color-default-teal-200: #0D324D;
+  --color-default-teal-300: #09486B;
+  --color-default-teal-400: #005B81;
+  --color-default-teal-500: #0B7DA1;
+  --color-default-teal-600: #1A9EB7;
+  --color-default-teal-700: #51B9CF;
+  --color-default-teal-800: #82D3E3;
+  --color-default-teal-900: #C3F2F8;
+  --color-default-transparent: #000000;
+  --color-default-yellow-100: #2D1F00;
+  --color-default-yellow-1000: #FDF8E9;
+  --color-default-yellow-200: #4B2C04;
+  --color-default-yellow-300: #653805;
+  --color-default-yellow-400: #854901;
+  --color-default-yellow-500: #A4670B;
+  --color-default-yellow-600: #BC870D;
+  --color-default-yellow-700: #D5A406;
+  --color-default-yellow-800: #E9C348;
+  --color-default-yellow-900: #F8E6A0;
+  --color-secondary-bcc-100: #012320;
+  --color-secondary-bcc-1000: #D2EEEB;
+  --color-secondary-bcc-200: #012320;
+  --color-secondary-bcc-300: #0B3633;
+  --color-secondary-bcc-400: #014D49;
+  --color-secondary-bcc-500: #0C625C;
+  --color-secondary-bcc-600: #1D7F78;
+  --color-secondary-bcc-700: #3E9F97;
+  --color-secondary-bcc-800: #6FB5AD;
+  --color-secondary-bcc-900: #A0CEC8;
+  --color-secondary-blue-100: #091E47;
+  --color-secondary-blue-1000: #A6CDFD;
+  --color-secondary-blue-200: #091E47;
+  --color-secondary-blue-300: #091E47;
+  --color-secondary-blue-400: #212C64;
+  --color-secondary-blue-500: #273C8F;
+  --color-secondary-blue-600: #274EB5;
+  --color-secondary-blue-700: #446ADD;
+  --color-secondary-blue-800: #608EF6;
+  --color-secondary-blue-900: #7CABF9;
+  --color-secondary-brown-100: #2E1B0F;
+  --color-secondary-brown-1000: #D1C5B0;
+  --color-secondary-brown-200: #2E1B0F;
+  --color-secondary-brown-300: #2E1B0F;
+  --color-secondary-brown-400: #3F2C1E;
+  --color-secondary-brown-500: #553D28;
+  --color-secondary-brown-600: #6E5232;
+  --color-secondary-brown-700: #8B6D45;
+  --color-secondary-brown-800: #A98C66;
+  --color-secondary-brown-900: #BEA889;
+  --color-secondary-green-100: #032429;
+  --color-secondary-green-1000: #83D895;
+  --color-secondary-green-200: #032429;
+  --color-secondary-green-300: #032429;
+  --color-secondary-green-400: #073734;
+  --color-secondary-green-500: #094C3B;
+  --color-secondary-green-600: #0C6241;
+  --color-secondary-green-700: #09825D;
+  --color-secondary-green-800: #1CA673;
+  --color-secondary-green-900: #32C180;
+  --color-secondary-magenta-100: #3F0534;
+  --color-secondary-magenta-1000: #F3B4E2;
+  --color-secondary-magenta-200: #3F0534;
+  --color-secondary-magenta-300: #3F0534;
+  --color-secondary-magenta-400: #5B1043;
+  --color-secondary-magenta-500: #751F57;
+  --color-secondary-magenta-600: #952E70;
+  --color-secondary-magenta-700: #BE428F;
+  --color-secondary-magenta-800: #DE66B0;
+  --color-secondary-magenta-900: #EB8ACF;
+  --color-secondary-neutral-0: #1F1F21;
+  --color-secondary-neutral-100: #242528;
+  --color-secondary-neutral-1000: #E2E3E4;
+  --color-secondary-neutral-1100: #E2E3E4;
+  --color-secondary-neutral-200: #303134;
+  --color-secondary-neutral-300: #4B4D51;
+  --color-secondary-neutral-400: #63666B;
+  --color-secondary-neutral-500: #7E8188;
+  --color-secondary-neutral-600: #96999E;
+  --color-secondary-neutral-700: #A9ABAF;
+  --color-secondary-neutral-800: #BFC1C4;
+  --color-secondary-neutral-900: #CECFD2;
+  --color-secondary-orange-100: #420E0D;
+  --color-secondary-orange-1000: #F6B981;
+  --color-secondary-orange-200: #420E0D;
+  --color-secondary-orange-300: #420E0D;
+  --color-secondary-orange-400: #5D1712;
+  --color-secondary-orange-500: #782612;
+  --color-secondary-orange-600: #943A14;
+  --color-secondary-orange-700: #B55919;
+  --color-secondary-orange-800: #DA772E;
+  --color-secondary-orange-900: #F19457;
+  --color-secondary-purple-100: #1D154D;
+  --color-secondary-purple-1000: #C9C3EC;
+  --color-secondary-purple-200: #1D154D;
+  --color-secondary-purple-300: #1D154D;
+  --color-secondary-purple-400: #352465;
+  --color-secondary-purple-500: #493481;
+  --color-secondary-purple-600: #61479C;
+  --color-secondary-purple-700: #8360C3;
+  --color-secondary-purple-800: #9A82DA;
+  --color-secondary-purple-900: #AFA0E0;
+  --color-secondary-red-100: #440223;
+  --color-secondary-red-1000: #FAB6AD;
+  --color-secondary-red-200: #440223;
+  --color-secondary-red-300: #440223;
+  --color-secondary-red-400: #630D2E;
+  --color-secondary-red-500: #811436;
+  --color-secondary-red-600: #A42237;
+  --color-secondary-red-700: #CA414E;
+  --color-secondary-red-800: #ED6362;
+  --color-secondary-red-900: #FA877E;
+  --color-secondary-teal-100: #0C2132;
+  --color-secondary-teal-1000: #82D3E3;
+  --color-secondary-teal-200: #0C2132;
+  --color-secondary-teal-300: #0C2132;
+  --color-secondary-teal-400: #0D324D;
+  --color-secondary-teal-500: #09486B;
+  --color-secondary-teal-600: #005B81;
+  --color-secondary-teal-700: #0B7DA1;
+  --color-secondary-teal-800: #1A9EB7;
+  --color-secondary-teal-900: #51B9CF;
+  --color-secondary-yellow-100: #2D1F00;
+  --color-secondary-yellow-1000: #E9C348;
+  --color-secondary-yellow-200: #2D1F00;
+  --color-secondary-yellow-300: #2D1F00;
+  --color-secondary-yellow-400: #4B2C04;
+  --color-secondary-yellow-500: #653805;
+  --color-secondary-yellow-600: #854901;
+  --color-secondary-yellow-700: #A4670B;
+  --color-secondary-yellow-800: #BC870D;
+  --color-secondary-yellow-900: #D5A406;
+  --color-tertiary-neutral-0: #242528;
+  --color-tertiary-neutral-100: #303134;
+  --color-tertiary-neutral-200: #4B4D51;
+  --color-tertiary-neutral-300: #63666B;
+  --color-tertiary-neutral-400: #7E8188;
+  --color-tertiary-neutral-500: #96999E;
+  --color-tertiary-neutral-600: #A9ABAF;
+  --color-tertiary-neutral-700: #BFC1C4;
+  --color-tertiary-neutral-800: #CECFD2;
+  --color-tertiary-neutral-900: #E2E3E4;
+}
+
+
+
+/* === ./styles/utilities.css === */
+@utility center {
+    @apply flex items-center justify-center;
+    
+    &.top {
+        @apply items-start;
+    }
+
+    &.bottom {
+        @apply items-end;
+    }
+
+    &.left {
+        @apply justify-start;
+    }
+
+    &.right {
+        @apply justify-end;
+    }
+
+    &.stretch {
+        @apply items-stretch;
+    }
+}
+
+@utility col {
+    @apply flex flex-col items-center justify-center;
+
+    &.left {
+        @apply items-start;
+    }
+
+    &.right {
+        @apply items-end;
+    }
+
+    &.top {
+        @apply justify-start;
+    }
+
+    &.bottom {
+        @apply justify-end;
+    }
+}
+
+@utility between {
+    @apply justify-between;
+}
+
+@utility hide-scrollbar {
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none; /* for Firefox */
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none; /* for Chrome, Safari, and Opera */
+    }
+}
+
+/* Capitalize first letter */
+@utility capital {
+    display: inline-block;
+    &::first-letter {
+        text-transform: uppercase;
+    }
+}
+
+/* Inset 0 */
+@utility inset-0 {
+	@apply left-0 right-0 top-0 bottom-0;
+}
+
+
+/* === ./styles/contexts.css === */
+/* Auto-generated from src/figma-modes. Do not edit by hand. */
+/* Run: pnpm run generate:context-css */
+
+@utility ctx-default {
+  --ctx-text: var(--color-default-neutral-1000);
+  --ctx-text-bold: var(--color-default-neutral-1100);
+  --ctx-background: var(--color-default-neutral-0);
+  --ctx-gradient: var(--color-default-neutral-100);
+  --ctx-border: var(--color-default-neutral-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-1000);
+  --ctx-text-pressed: var(--color-default-neutral-1000);
+  --ctx-background-hover: var(--color-default-neutral-100);
+  --ctx-background-pressed: var(--color-default-neutral-200);
+  --ctx-gradient-hover: var(--color-default-neutral-200);
+  --ctx-gradient-pressed: var(--color-default-neutral-200);
+  --ctx-border-hover: var(--color-default-neutral-300);
+  --ctx-border-pressed: var(--color-default-neutral-300);
+}
+
+@utility ctx-blue-bolder {
+  --ctx-text: var(--color-default-blue-200);
+  --ctx-text-bold: var(--color-default-blue-100);
+  --ctx-background: var(--color-default-blue-800);
+  --ctx-gradient: var(--color-default-blue-700);
+  --ctx-border: var(--color-default-blue-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-blue-200);
+  --ctx-text-pressed: var(--color-default-blue-200);
+  --ctx-background-hover: var(--color-default-blue-700);
+  --ctx-background-pressed: var(--color-default-blue-600);
+  --ctx-gradient-hover: var(--color-default-blue-600);
+  --ctx-gradient-pressed: var(--color-default-blue-600);
+  --ctx-border-hover: var(--color-default-blue-700);
+  --ctx-border-pressed: var(--color-default-blue-700);
+}
+
+@utility ctx-blue-subtle {
+  --ctx-text: var(--color-default-blue-900);
+  --ctx-text-bold: var(--color-default-blue-1000);
+  --ctx-background: var(--color-default-blue-300);
+  --ctx-gradient: var(--color-default-blue-400);
+  --ctx-border: var(--color-default-blue-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-blue-900);
+  --ctx-text-pressed: var(--color-default-blue-900);
+  --ctx-background-hover: var(--color-default-blue-400);
+  --ctx-background-pressed: var(--color-default-blue-500);
+  --ctx-gradient-hover: var(--color-default-blue-500);
+  --ctx-gradient-pressed: var(--color-default-blue-500);
+  --ctx-border-hover: var(--color-default-blue-500);
+  --ctx-border-pressed: var(--color-default-blue-500);
+}
+
+@utility ctx-blue-subtler {
+  --ctx-text: var(--color-default-blue-800);
+  --ctx-text-bold: var(--color-default-blue-900);
+  --ctx-background: var(--color-default-blue-200);
+  --ctx-gradient: var(--color-default-blue-300);
+  --ctx-border: var(--color-default-blue-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-blue-800);
+  --ctx-text-pressed: var(--color-default-blue-800);
+  --ctx-background-hover: var(--color-default-blue-300);
+  --ctx-background-pressed: var(--color-default-blue-400);
+  --ctx-gradient-hover: var(--color-default-blue-400);
+  --ctx-gradient-pressed: var(--color-default-blue-400);
+  --ctx-border-hover: var(--color-default-blue-400);
+  --ctx-border-pressed: var(--color-default-blue-400);
+}
+
+@utility ctx-blue-subtlest {
+  --ctx-text: var(--color-default-blue-800);
+  --ctx-text-bold: var(--color-default-blue-900);
+  --ctx-background: var(--color-default-blue-100);
+  --ctx-gradient: var(--color-default-blue-200);
+  --ctx-border: var(--color-default-blue-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-blue-800);
+  --ctx-text-pressed: var(--color-default-blue-800);
+  --ctx-background-hover: var(--color-default-blue-200);
+  --ctx-background-pressed: var(--color-default-blue-300);
+  --ctx-gradient-hover: var(--color-default-blue-300);
+  --ctx-gradient-pressed: var(--color-default-blue-300);
+  --ctx-border-hover: var(--color-default-blue-300);
+  --ctx-border-pressed: var(--color-default-blue-300);
+}
+
+@utility ctx-brand-bold {
+  --ctx-text: var(--color-default-bcc-200);
+  --ctx-text-bold: var(--color-default-neutral-100);
+  --ctx-background: var(--color-default-bcc-800);
+  --ctx-gradient: var(--color-default-bcc-700);
+  --ctx-border: var(--color-default-bcc-600);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-bcc-200);
+  --ctx-text-pressed: var(--color-default-bcc-200);
+  --ctx-background-hover: var(--color-default-bcc-700);
+  --ctx-background-pressed: var(--color-default-bcc-600);
+  --ctx-gradient-hover: var(--color-default-bcc-600);
+  --ctx-gradient-pressed: var(--color-default-bcc-600);
+  --ctx-border-hover: var(--color-default-bcc-600);
+  --ctx-border-pressed: var(--color-default-bcc-600);
+}
+
+@utility ctx-brand-bolder {
+  --ctx-text: var(--color-default-bcc-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-bcc-900);
+  --ctx-gradient: var(--color-default-bcc-800);
+  --ctx-border: var(--color-default-bcc-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-bcc-100);
+  --ctx-text-pressed: var(--color-default-bcc-100);
+  --ctx-background-hover: var(--color-default-bcc-800);
+  --ctx-background-pressed: var(--color-default-bcc-700);
+  --ctx-gradient-hover: var(--color-default-bcc-700);
+  --ctx-gradient-pressed: var(--color-default-bcc-700);
+  --ctx-border-hover: var(--color-default-bcc-700);
+  --ctx-border-pressed: var(--color-default-bcc-700);
+}
+
+@utility ctx-brand-boldest {
+  --ctx-text: var(--color-default-neutral-0);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-bcc-1000);
+  --ctx-gradient: var(--color-default-bcc-900);
+  --ctx-border: var(--color-default-bcc-800);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-0);
+  --ctx-text-pressed: var(--color-default-neutral-0);
+  --ctx-background-hover: var(--color-default-bcc-900);
+  --ctx-background-pressed: var(--color-default-bcc-800);
+  --ctx-gradient-hover: var(--color-default-bcc-800);
+  --ctx-gradient-pressed: var(--color-default-bcc-800);
+  --ctx-border-hover: var(--color-default-bcc-800);
+  --ctx-border-pressed: var(--color-default-bcc-800);
+}
+
+@utility ctx-brand-default {
+  --ctx-text: var(--color-default-neutral-1000);
+  --ctx-text-bold: var(--color-default-neutral-1100);
+  --ctx-background: var(--color-default-neutral-0);
+  --ctx-gradient: var(--color-default-neutral-0);
+  --ctx-border: var(--color-default-neutral-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-1000);
+  --ctx-text-pressed: var(--color-default-neutral-1000);
+  --ctx-background-hover: var(--color-default-neutral-0);
+  --ctx-background-pressed: var(--color-default-neutral-0);
+  --ctx-gradient-hover: var(--color-default-neutral-0);
+  --ctx-gradient-pressed: var(--color-default-neutral-0);
+  --ctx-border-hover: var(--color-default-neutral-700);
+  --ctx-border-pressed: var(--color-default-neutral-700);
+}
+
+@utility ctx-brand-subtle {
+  --ctx-text: var(--color-default-neutral-900);
+  --ctx-text-bold: var(--color-default-bcc-1000);
+  --ctx-background: var(--color-default-bcc-300);
+  --ctx-gradient: var(--color-default-bcc-400);
+  --ctx-border: var(--color-default-bcc-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-900);
+  --ctx-text-pressed: var(--color-default-neutral-900);
+  --ctx-background-hover: var(--color-default-bcc-400);
+  --ctx-background-pressed: var(--color-default-bcc-500);
+  --ctx-gradient-hover: var(--color-default-bcc-500);
+  --ctx-gradient-pressed: var(--color-default-bcc-500);
+  --ctx-border-hover: var(--color-default-bcc-500);
+  --ctx-border-pressed: var(--color-default-bcc-500);
+}
+
+@utility ctx-brand-subtler {
+  --ctx-text: var(--color-default-neutral-800);
+  --ctx-text-bold: var(--color-default-bcc-900);
+  --ctx-background: var(--color-default-bcc-200);
+  --ctx-gradient: var(--color-default-bcc-300);
+  --ctx-border: var(--color-default-bcc-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-800);
+  --ctx-text-pressed: var(--color-default-neutral-800);
+  --ctx-background-hover: var(--color-default-bcc-300);
+  --ctx-background-pressed: var(--color-default-bcc-400);
+  --ctx-gradient-hover: var(--color-default-bcc-400);
+  --ctx-gradient-pressed: var(--color-default-bcc-400);
+  --ctx-border-hover: var(--color-default-bcc-400);
+  --ctx-border-pressed: var(--color-default-bcc-400);
+}
+
+@utility ctx-brand-subtlest {
+  --ctx-text: var(--color-default-neutral-900);
+  --ctx-text-bold: var(--color-default-bcc-1000);
+  --ctx-background: var(--color-default-bcc-100);
+  --ctx-gradient: var(--color-default-bcc-200);
+  --ctx-border: var(--color-default-bcc-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-900);
+  --ctx-text-pressed: var(--color-default-neutral-900);
+  --ctx-background-hover: var(--color-default-bcc-200);
+  --ctx-background-pressed: var(--color-default-bcc-300);
+  --ctx-gradient-hover: var(--color-default-bcc-300);
+  --ctx-gradient-pressed: var(--color-default-bcc-300);
+  --ctx-border-hover: var(--color-default-bcc-300);
+  --ctx-border-pressed: var(--color-default-bcc-300);
+}
+
+@utility ctx-brown-bolder {
+  --ctx-text: var(--color-default-brown-200);
+  --ctx-text-bold: var(--color-default-brown-100);
+  --ctx-background: var(--color-default-brown-800);
+  --ctx-gradient: var(--color-default-brown-700);
+  --ctx-border: var(--color-default-brown-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-brown-200);
+  --ctx-text-pressed: var(--color-default-brown-200);
+  --ctx-background-hover: var(--color-default-brown-700);
+  --ctx-background-pressed: var(--color-default-brown-600);
+  --ctx-gradient-hover: var(--color-default-brown-600);
+  --ctx-gradient-pressed: var(--color-default-brown-600);
+  --ctx-border-hover: var(--color-default-brown-700);
+  --ctx-border-pressed: var(--color-default-brown-700);
+}
+
+@utility ctx-brown-subtle {
+  --ctx-text: var(--color-default-brown-900);
+  --ctx-text-bold: var(--color-default-brown-1000);
+  --ctx-background: var(--color-default-brown-300);
+  --ctx-gradient: var(--color-default-brown-400);
+  --ctx-border: var(--color-default-brown-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-brown-900);
+  --ctx-text-pressed: var(--color-default-brown-900);
+  --ctx-background-hover: var(--color-default-brown-400);
+  --ctx-background-pressed: var(--color-default-brown-500);
+  --ctx-gradient-hover: var(--color-default-brown-500);
+  --ctx-gradient-pressed: var(--color-default-brown-500);
+  --ctx-border-hover: var(--color-default-brown-500);
+  --ctx-border-pressed: var(--color-default-brown-500);
+}
+
+@utility ctx-brown-subtler {
+  --ctx-text: var(--color-default-brown-800);
+  --ctx-text-bold: var(--color-default-brown-900);
+  --ctx-background: var(--color-default-brown-200);
+  --ctx-gradient: var(--color-default-brown-300);
+  --ctx-border: var(--color-default-brown-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-brown-800);
+  --ctx-text-pressed: var(--color-default-brown-800);
+  --ctx-background-hover: var(--color-default-brown-300);
+  --ctx-background-pressed: var(--color-default-brown-400);
+  --ctx-gradient-hover: var(--color-default-brown-400);
+  --ctx-gradient-pressed: var(--color-default-brown-400);
+  --ctx-border-hover: var(--color-default-brown-400);
+  --ctx-border-pressed: var(--color-default-brown-400);
+}
+
+@utility ctx-brown-subtlest {
+  --ctx-text: var(--color-default-brown-800);
+  --ctx-text-bold: var(--color-default-brown-900);
+  --ctx-background: var(--color-default-brown-100);
+  --ctx-gradient: var(--color-default-brown-200);
+  --ctx-border: var(--color-default-brown-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-brown-800);
+  --ctx-text-pressed: var(--color-default-brown-800);
+  --ctx-background-hover: var(--color-default-brown-200);
+  --ctx-background-pressed: var(--color-default-brown-300);
+  --ctx-gradient-hover: var(--color-default-brown-300);
+  --ctx-gradient-pressed: var(--color-default-brown-300);
+  --ctx-border-hover: var(--color-default-brown-300);
+  --ctx-border-pressed: var(--color-default-brown-300);
+}
+
+@utility ctx-danger-bolder {
+  --ctx-text: var(--color-default-neutral-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-red-800);
+  --ctx-gradient: var(--color-default-red-700);
+  --ctx-border: var(--color-default-red-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-100);
+  --ctx-text-pressed: var(--color-default-neutral-100);
+  --ctx-background-hover: var(--color-default-red-700);
+  --ctx-background-pressed: var(--color-default-red-600);
+  --ctx-gradient-hover: var(--color-default-red-600);
+  --ctx-gradient-pressed: var(--color-default-red-600);
+  --ctx-border-hover: var(--color-default-red-700);
+  --ctx-border-pressed: var(--color-default-red-700);
+}
+
+@utility ctx-danger-subtlest {
+  --ctx-text: var(--color-default-red-800);
+  --ctx-text-bold: var(--color-default-red-900);
+  --ctx-background: var(--color-default-red-100);
+  --ctx-gradient: var(--color-default-red-200);
+  --ctx-border: var(--color-default-red-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-red-800);
+  --ctx-text-pressed: var(--color-default-red-800);
+  --ctx-background-hover: var(--color-default-red-200);
+  --ctx-background-pressed: var(--color-default-red-300);
+  --ctx-gradient-hover: var(--color-default-red-300);
+  --ctx-gradient-pressed: var(--color-default-red-300);
+  --ctx-border-hover: var(--color-default-red-300);
+  --ctx-border-pressed: var(--color-default-red-300);
+}
+
+@utility ctx-gray-bolder {
+  --ctx-text: var(--color-default-neutral-200);
+  --ctx-text-bold: var(--color-default-neutral-100);
+  --ctx-background: var(--color-default-neutral-800);
+  --ctx-gradient: var(--color-default-neutral-700);
+  --ctx-border: var(--color-default-neutral-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-200);
+  --ctx-text-pressed: var(--color-default-neutral-200);
+  --ctx-background-hover: var(--color-default-neutral-700);
+  --ctx-background-pressed: var(--color-default-neutral-600);
+  --ctx-gradient-hover: var(--color-default-neutral-600);
+  --ctx-gradient-pressed: var(--color-default-neutral-600);
+  --ctx-border-hover: var(--color-default-neutral-700);
+  --ctx-border-pressed: var(--color-default-neutral-700);
+}
+
+@utility ctx-gray-subtle {
+  --ctx-text: var(--color-default-neutral-900);
+  --ctx-text-bold: var(--color-default-neutral-1000);
+  --ctx-background: var(--color-default-neutral-300);
+  --ctx-gradient: var(--color-default-neutral-400);
+  --ctx-border: var(--color-default-neutral-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-900);
+  --ctx-text-pressed: var(--color-default-neutral-900);
+  --ctx-background-hover: var(--color-default-neutral-400);
+  --ctx-background-pressed: var(--color-default-neutral-500);
+  --ctx-gradient-hover: var(--color-default-neutral-500);
+  --ctx-gradient-pressed: var(--color-default-neutral-500);
+  --ctx-border-hover: var(--color-default-neutral-500);
+  --ctx-border-pressed: var(--color-default-neutral-500);
+}
+
+@utility ctx-gray-subtler {
+  --ctx-text: var(--color-default-neutral-800);
+  --ctx-text-bold: var(--color-default-neutral-900);
+  --ctx-background: var(--color-default-neutral-200);
+  --ctx-gradient: var(--color-default-neutral-300);
+  --ctx-border: var(--color-default-neutral-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-800);
+  --ctx-text-pressed: var(--color-default-neutral-800);
+  --ctx-background-hover: var(--color-default-neutral-300);
+  --ctx-background-pressed: var(--color-default-neutral-400);
+  --ctx-gradient-hover: var(--color-default-neutral-400);
+  --ctx-gradient-pressed: var(--color-default-neutral-400);
+  --ctx-border-hover: var(--color-default-neutral-400);
+  --ctx-border-pressed: var(--color-default-neutral-400);
+}
+
+@utility ctx-gray-subtlest {
+  --ctx-text: var(--color-default-neutral-800);
+  --ctx-text-bold: var(--color-default-neutral-900);
+  --ctx-background: var(--color-default-neutral-100);
+  --ctx-gradient: var(--color-default-neutral-200);
+  --ctx-border: var(--color-default-neutral-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-800);
+  --ctx-text-pressed: var(--color-default-neutral-800);
+  --ctx-background-hover: var(--color-default-neutral-200);
+  --ctx-background-pressed: var(--color-default-neutral-300);
+  --ctx-gradient-hover: var(--color-default-neutral-300);
+  --ctx-gradient-pressed: var(--color-default-neutral-300);
+  --ctx-border-hover: var(--color-default-neutral-300);
+  --ctx-border-pressed: var(--color-default-neutral-300);
+}
+
+@utility ctx-green-bolder {
+  --ctx-text: var(--color-default-green-200);
+  --ctx-text-bold: var(--color-default-green-100);
+  --ctx-background: var(--color-default-green-800);
+  --ctx-gradient: var(--color-default-green-700);
+  --ctx-border: var(--color-default-green-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-green-200);
+  --ctx-text-pressed: var(--color-default-green-200);
+  --ctx-background-hover: var(--color-default-green-700);
+  --ctx-background-pressed: var(--color-default-green-600);
+  --ctx-gradient-hover: var(--color-default-green-600);
+  --ctx-gradient-pressed: var(--color-default-green-600);
+  --ctx-border-hover: var(--color-default-green-700);
+  --ctx-border-pressed: var(--color-default-green-700);
+}
+
+@utility ctx-green-subtle {
+  --ctx-text: var(--color-default-green-900);
+  --ctx-text-bold: var(--color-default-green-1000);
+  --ctx-background: var(--color-default-green-300);
+  --ctx-gradient: var(--color-default-green-400);
+  --ctx-border: var(--color-default-green-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-green-900);
+  --ctx-text-pressed: var(--color-default-green-900);
+  --ctx-background-hover: var(--color-default-green-400);
+  --ctx-background-pressed: var(--color-default-green-500);
+  --ctx-gradient-hover: var(--color-default-green-500);
+  --ctx-gradient-pressed: var(--color-default-green-500);
+  --ctx-border-hover: var(--color-default-green-500);
+  --ctx-border-pressed: var(--color-default-green-500);
+}
+
+@utility ctx-green-subtler {
+  --ctx-text: var(--color-default-green-800);
+  --ctx-text-bold: var(--color-default-green-900);
+  --ctx-background: var(--color-default-green-200);
+  --ctx-gradient: var(--color-default-green-300);
+  --ctx-border: var(--color-default-green-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-green-800);
+  --ctx-text-pressed: var(--color-default-green-800);
+  --ctx-background-hover: var(--color-default-green-300);
+  --ctx-background-pressed: var(--color-default-green-400);
+  --ctx-gradient-hover: var(--color-default-green-400);
+  --ctx-gradient-pressed: var(--color-default-green-400);
+  --ctx-border-hover: var(--color-default-green-400);
+  --ctx-border-pressed: var(--color-default-green-400);
+}
+
+@utility ctx-green-subtlest {
+  --ctx-text: var(--color-default-green-800);
+  --ctx-text-bold: var(--color-default-green-900);
+  --ctx-background: var(--color-default-green-100);
+  --ctx-gradient: var(--color-default-green-200);
+  --ctx-border: var(--color-default-green-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-green-800);
+  --ctx-text-pressed: var(--color-default-green-800);
+  --ctx-background-hover: var(--color-default-green-200);
+  --ctx-background-pressed: var(--color-default-green-300);
+  --ctx-gradient-hover: var(--color-default-green-300);
+  --ctx-gradient-pressed: var(--color-default-green-300);
+  --ctx-border-hover: var(--color-default-green-300);
+  --ctx-border-pressed: var(--color-default-green-300);
+}
+
+@utility ctx-info-bolder {
+  --ctx-text: var(--color-default-neutral-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-blue-800);
+  --ctx-gradient: var(--color-default-blue-700);
+  --ctx-border: var(--color-default-blue-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-100);
+  --ctx-text-pressed: var(--color-default-neutral-100);
+  --ctx-background-hover: var(--color-default-blue-700);
+  --ctx-background-pressed: var(--color-default-blue-600);
+  --ctx-gradient-hover: var(--color-default-blue-600);
+  --ctx-gradient-pressed: var(--color-default-blue-600);
+  --ctx-border-hover: var(--color-default-blue-700);
+  --ctx-border-pressed: var(--color-default-blue-700);
+}
+
+@utility ctx-info-subtlest {
+  --ctx-text: var(--color-default-blue-800);
+  --ctx-text-bold: var(--color-default-blue-900);
+  --ctx-background: var(--color-default-blue-100);
+  --ctx-gradient: var(--color-default-blue-200);
+  --ctx-border: var(--color-default-blue-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-blue-800);
+  --ctx-text-pressed: var(--color-default-blue-800);
+  --ctx-background-hover: var(--color-default-blue-200);
+  --ctx-background-pressed: var(--color-default-blue-300);
+  --ctx-gradient-hover: var(--color-default-blue-300);
+  --ctx-gradient-pressed: var(--color-default-blue-300);
+  --ctx-border-hover: var(--color-default-blue-300);
+  --ctx-border-pressed: var(--color-default-blue-300);
+}
+
+@utility ctx-magenta-bolder {
+  --ctx-text: var(--color-default-magenta-200);
+  --ctx-text-bold: var(--color-default-magenta-100);
+  --ctx-background: var(--color-default-magenta-800);
+  --ctx-gradient: var(--color-default-magenta-700);
+  --ctx-border: var(--color-default-magenta-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-magenta-200);
+  --ctx-text-pressed: var(--color-default-magenta-200);
+  --ctx-background-hover: var(--color-default-magenta-700);
+  --ctx-background-pressed: var(--color-default-magenta-600);
+  --ctx-gradient-hover: var(--color-default-magenta-600);
+  --ctx-gradient-pressed: var(--color-default-magenta-600);
+  --ctx-border-hover: var(--color-default-magenta-700);
+  --ctx-border-pressed: var(--color-default-magenta-700);
+}
+
+@utility ctx-magenta-subtle {
+  --ctx-text: var(--color-default-magenta-900);
+  --ctx-text-bold: var(--color-default-magenta-1000);
+  --ctx-background: var(--color-default-magenta-300);
+  --ctx-gradient: var(--color-default-magenta-400);
+  --ctx-border: var(--color-default-magenta-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-magenta-900);
+  --ctx-text-pressed: var(--color-default-magenta-900);
+  --ctx-background-hover: var(--color-default-magenta-400);
+  --ctx-background-pressed: var(--color-default-magenta-500);
+  --ctx-gradient-hover: var(--color-default-magenta-500);
+  --ctx-gradient-pressed: var(--color-default-magenta-500);
+  --ctx-border-hover: var(--color-default-magenta-500);
+  --ctx-border-pressed: var(--color-default-magenta-500);
+}
+
+@utility ctx-magenta-subtler {
+  --ctx-text: var(--color-default-magenta-800);
+  --ctx-text-bold: var(--color-default-magenta-900);
+  --ctx-background: var(--color-default-magenta-200);
+  --ctx-gradient: var(--color-default-magenta-300);
+  --ctx-border: var(--color-default-magenta-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-magenta-800);
+  --ctx-text-pressed: var(--color-default-magenta-800);
+  --ctx-background-hover: var(--color-default-magenta-300);
+  --ctx-background-pressed: var(--color-default-magenta-400);
+  --ctx-gradient-hover: var(--color-default-magenta-400);
+  --ctx-gradient-pressed: var(--color-default-magenta-400);
+  --ctx-border-hover: var(--color-default-magenta-400);
+  --ctx-border-pressed: var(--color-default-magenta-400);
+}
+
+@utility ctx-magenta-subtlest {
+  --ctx-text: var(--color-default-magenta-800);
+  --ctx-text-bold: var(--color-default-magenta-900);
+  --ctx-background: var(--color-default-magenta-100);
+  --ctx-gradient: var(--color-default-magenta-200);
+  --ctx-border: var(--color-default-magenta-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-magenta-800);
+  --ctx-text-pressed: var(--color-default-magenta-800);
+  --ctx-background-hover: var(--color-default-magenta-200);
+  --ctx-background-pressed: var(--color-default-magenta-300);
+  --ctx-gradient-hover: var(--color-default-magenta-300);
+  --ctx-gradient-pressed: var(--color-default-magenta-300);
+  --ctx-border-hover: var(--color-default-magenta-300);
+  --ctx-border-pressed: var(--color-default-magenta-300);
+}
+
+@utility ctx-neutral-bold {
+  --ctx-text: var(--color-default-neutral-300);
+  --ctx-text-bold: var(--color-default-neutral-200);
+  --ctx-background: var(--color-default-neutral-900);
+  --ctx-gradient: var(--color-default-neutral-800);
+  --ctx-border: var(--color-default-neutral-600);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-300);
+  --ctx-text-pressed: var(--color-default-neutral-300);
+  --ctx-background-hover: var(--color-default-neutral-800);
+  --ctx-background-pressed: var(--color-default-neutral-700);
+  --ctx-gradient-hover: var(--color-default-neutral-700);
+  --ctx-gradient-pressed: var(--color-default-neutral-700);
+  --ctx-border-hover: var(--color-default-neutral-600);
+  --ctx-border-pressed: var(--color-default-neutral-600);
+}
+
+@utility ctx-neutral-bolder {
+  --ctx-text: var(--color-default-neutral-200);
+  --ctx-text-bold: var(--color-default-neutral-100);
+  --ctx-background: var(--color-default-neutral-1000);
+  --ctx-gradient: var(--color-default-neutral-900);
+  --ctx-border: var(--color-default-neutral-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-200);
+  --ctx-text-pressed: var(--color-default-neutral-200);
+  --ctx-background-hover: var(--color-default-neutral-900);
+  --ctx-background-pressed: var(--color-default-neutral-800);
+  --ctx-gradient-hover: var(--color-default-neutral-800);
+  --ctx-gradient-pressed: var(--color-default-neutral-800);
+  --ctx-border-hover: var(--color-default-neutral-700);
+  --ctx-border-pressed: var(--color-default-neutral-700);
+}
+
+@utility ctx-neutral-boldest {
+  --ctx-text: var(--color-default-neutral-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-neutral-1100);
+  --ctx-gradient: var(--color-default-neutral-1000);
+  --ctx-border: var(--color-default-neutral-800);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-100);
+  --ctx-text-pressed: var(--color-default-neutral-100);
+  --ctx-background-hover: var(--color-default-neutral-1000);
+  --ctx-background-pressed: var(--color-default-neutral-900);
+  --ctx-gradient-hover: var(--color-default-neutral-900);
+  --ctx-gradient-pressed: var(--color-default-neutral-900);
+  --ctx-border-hover: var(--color-default-neutral-800);
+  --ctx-border-pressed: var(--color-default-neutral-800);
+}
+
+@utility ctx-neutral-subtle {
+  --ctx-text: var(--color-default-neutral-800);
+  --ctx-text-bold: var(--color-default-neutral-900);
+  --ctx-background: var(--color-default-neutral-200);
+  --ctx-gradient: var(--color-default-neutral-300);
+  --ctx-border: var(--color-default-neutral-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-800);
+  --ctx-text-pressed: var(--color-default-neutral-800);
+  --ctx-background-hover: var(--color-default-neutral-300);
+  --ctx-background-pressed: var(--color-default-neutral-400);
+  --ctx-gradient-hover: var(--color-default-neutral-400);
+  --ctx-gradient-pressed: var(--color-default-neutral-400);
+  --ctx-border-hover: var(--color-default-neutral-500);
+  --ctx-border-pressed: var(--color-default-neutral-500);
+}
+
+@utility ctx-neutral-subtler {
+  --ctx-text: var(--color-default-neutral-900);
+  --ctx-text-bold: var(--color-default-neutral-1000);
+  --ctx-background: var(--color-default-neutral-100);
+  --ctx-gradient: var(--color-default-neutral-200);
+  --ctx-border: var(--color-default-neutral-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-900);
+  --ctx-text-pressed: var(--color-default-neutral-900);
+  --ctx-background-hover: var(--color-default-neutral-200);
+  --ctx-background-pressed: var(--color-default-neutral-300);
+  --ctx-gradient-hover: var(--color-default-neutral-300);
+  --ctx-gradient-pressed: var(--color-default-neutral-300);
+  --ctx-border-hover: var(--color-default-neutral-400);
+  --ctx-border-pressed: var(--color-default-neutral-400);
+}
+
+@utility ctx-neutral-subtlest {
+  --ctx-text: var(--color-default-neutral-1000);
+  --ctx-text-bold: var(--color-default-neutral-1100);
+  --ctx-background: var(--color-default-neutral-0);
+  --ctx-gradient: var(--color-default-neutral-100);
+  --ctx-border: var(--color-default-neutral-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-1000);
+  --ctx-text-pressed: var(--color-default-neutral-1000);
+  --ctx-background-hover: var(--color-default-neutral-100);
+  --ctx-background-pressed: var(--color-default-neutral-200);
+  --ctx-gradient-hover: var(--color-default-neutral-200);
+  --ctx-gradient-pressed: var(--color-default-neutral-200);
+  --ctx-border-hover: var(--color-default-neutral-300);
+  --ctx-border-pressed: var(--color-default-neutral-300);
+}
+
+@utility ctx-orange-bolder {
+  --ctx-text: var(--color-default-orange-200);
+  --ctx-text-bold: var(--color-default-orange-100);
+  --ctx-background: var(--color-default-orange-800);
+  --ctx-gradient: var(--color-default-orange-700);
+  --ctx-border: var(--color-default-orange-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-orange-200);
+  --ctx-text-pressed: var(--color-default-orange-200);
+  --ctx-background-hover: var(--color-default-orange-700);
+  --ctx-background-pressed: var(--color-default-orange-600);
+  --ctx-gradient-hover: var(--color-default-orange-600);
+  --ctx-gradient-pressed: var(--color-default-orange-600);
+  --ctx-border-hover: var(--color-default-orange-700);
+  --ctx-border-pressed: var(--color-default-orange-700);
+}
+
+@utility ctx-orange-subtle {
+  --ctx-text: var(--color-default-orange-900);
+  --ctx-text-bold: var(--color-default-orange-1000);
+  --ctx-background: var(--color-default-orange-300);
+  --ctx-gradient: var(--color-default-orange-400);
+  --ctx-border: var(--color-default-orange-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-orange-900);
+  --ctx-text-pressed: var(--color-default-orange-900);
+  --ctx-background-hover: var(--color-default-orange-400);
+  --ctx-background-pressed: var(--color-default-orange-500);
+  --ctx-gradient-hover: var(--color-default-orange-500);
+  --ctx-gradient-pressed: var(--color-default-orange-500);
+  --ctx-border-hover: var(--color-default-orange-500);
+  --ctx-border-pressed: var(--color-default-orange-500);
+}
+
+@utility ctx-orange-subtler {
+  --ctx-text: var(--color-default-orange-800);
+  --ctx-text-bold: var(--color-default-orange-900);
+  --ctx-background: var(--color-default-orange-200);
+  --ctx-gradient: var(--color-default-orange-300);
+  --ctx-border: var(--color-default-orange-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-orange-800);
+  --ctx-text-pressed: var(--color-default-orange-800);
+  --ctx-background-hover: var(--color-default-orange-300);
+  --ctx-background-pressed: var(--color-default-orange-400);
+  --ctx-gradient-hover: var(--color-default-orange-400);
+  --ctx-gradient-pressed: var(--color-default-orange-400);
+  --ctx-border-hover: var(--color-default-orange-400);
+  --ctx-border-pressed: var(--color-default-orange-400);
+}
+
+@utility ctx-orange-subtlest {
+  --ctx-text: var(--color-default-orange-800);
+  --ctx-text-bold: var(--color-default-orange-900);
+  --ctx-background: var(--color-default-orange-100);
+  --ctx-gradient: var(--color-default-orange-200);
+  --ctx-border: var(--color-default-orange-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-orange-800);
+  --ctx-text-pressed: var(--color-default-orange-800);
+  --ctx-background-hover: var(--color-default-orange-200);
+  --ctx-background-pressed: var(--color-default-orange-300);
+  --ctx-gradient-hover: var(--color-default-orange-300);
+  --ctx-gradient-pressed: var(--color-default-orange-300);
+  --ctx-border-hover: var(--color-default-orange-300);
+  --ctx-border-pressed: var(--color-default-orange-300);
+}
+
+@utility ctx-purple-bolder {
+  --ctx-text: var(--color-default-purple-200);
+  --ctx-text-bold: var(--color-default-purple-100);
+  --ctx-background: var(--color-default-purple-800);
+  --ctx-gradient: var(--color-default-purple-700);
+  --ctx-border: var(--color-default-purple-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-purple-200);
+  --ctx-text-pressed: var(--color-default-purple-200);
+  --ctx-background-hover: var(--color-default-purple-700);
+  --ctx-background-pressed: var(--color-default-purple-600);
+  --ctx-gradient-hover: var(--color-default-purple-600);
+  --ctx-gradient-pressed: var(--color-default-purple-600);
+  --ctx-border-hover: var(--color-default-purple-700);
+  --ctx-border-pressed: var(--color-default-purple-700);
+}
+
+@utility ctx-purple-subtle {
+  --ctx-text: var(--color-default-purple-900);
+  --ctx-text-bold: var(--color-default-purple-1000);
+  --ctx-background: var(--color-default-purple-300);
+  --ctx-gradient: var(--color-default-purple-400);
+  --ctx-border: var(--color-default-purple-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-purple-900);
+  --ctx-text-pressed: var(--color-default-purple-900);
+  --ctx-background-hover: var(--color-default-purple-400);
+  --ctx-background-pressed: var(--color-default-purple-500);
+  --ctx-gradient-hover: var(--color-default-purple-500);
+  --ctx-gradient-pressed: var(--color-default-purple-500);
+  --ctx-border-hover: var(--color-default-purple-500);
+  --ctx-border-pressed: var(--color-default-purple-500);
+}
+
+@utility ctx-purple-subtler {
+  --ctx-text: var(--color-default-purple-800);
+  --ctx-text-bold: var(--color-default-purple-900);
+  --ctx-background: var(--color-default-purple-200);
+  --ctx-gradient: var(--color-default-purple-300);
+  --ctx-border: var(--color-default-purple-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-purple-800);
+  --ctx-text-pressed: var(--color-default-purple-800);
+  --ctx-background-hover: var(--color-default-purple-300);
+  --ctx-background-pressed: var(--color-default-purple-400);
+  --ctx-gradient-hover: var(--color-default-purple-400);
+  --ctx-gradient-pressed: var(--color-default-purple-400);
+  --ctx-border-hover: var(--color-default-purple-400);
+  --ctx-border-pressed: var(--color-default-purple-400);
+}
+
+@utility ctx-purple-subtlest {
+  --ctx-text: var(--color-default-purple-800);
+  --ctx-text-bold: var(--color-default-purple-900);
+  --ctx-background: var(--color-default-purple-100);
+  --ctx-gradient: var(--color-default-purple-200);
+  --ctx-border: var(--color-default-purple-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-purple-800);
+  --ctx-text-pressed: var(--color-default-purple-800);
+  --ctx-background-hover: var(--color-default-purple-200);
+  --ctx-background-pressed: var(--color-default-purple-300);
+  --ctx-gradient-hover: var(--color-default-purple-300);
+  --ctx-gradient-pressed: var(--color-default-purple-300);
+  --ctx-border-hover: var(--color-default-purple-300);
+  --ctx-border-pressed: var(--color-default-purple-300);
+}
+
+@utility ctx-red-bolder {
+  --ctx-text: var(--color-default-red-200);
+  --ctx-text-bold: var(--color-default-red-100);
+  --ctx-background: var(--color-default-red-800);
+  --ctx-gradient: var(--color-default-red-700);
+  --ctx-border: var(--color-default-red-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-red-200);
+  --ctx-text-pressed: var(--color-default-red-200);
+  --ctx-background-hover: var(--color-default-red-700);
+  --ctx-background-pressed: var(--color-default-red-600);
+  --ctx-gradient-hover: var(--color-default-red-600);
+  --ctx-gradient-pressed: var(--color-default-red-600);
+  --ctx-border-hover: var(--color-default-red-700);
+  --ctx-border-pressed: var(--color-default-red-700);
+}
+
+@utility ctx-red-subtle {
+  --ctx-text: var(--color-default-red-900);
+  --ctx-text-bold: var(--color-default-red-1000);
+  --ctx-background: var(--color-default-red-300);
+  --ctx-gradient: var(--color-default-red-400);
+  --ctx-border: var(--color-default-red-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-red-900);
+  --ctx-text-pressed: var(--color-default-red-900);
+  --ctx-background-hover: var(--color-default-red-400);
+  --ctx-background-pressed: var(--color-default-red-500);
+  --ctx-gradient-hover: var(--color-default-red-500);
+  --ctx-gradient-pressed: var(--color-default-red-500);
+  --ctx-border-hover: var(--color-default-red-500);
+  --ctx-border-pressed: var(--color-default-red-500);
+}
+
+@utility ctx-red-subtler {
+  --ctx-text: var(--color-default-red-800);
+  --ctx-text-bold: var(--color-default-red-900);
+  --ctx-background: var(--color-default-red-200);
+  --ctx-gradient: var(--color-default-red-300);
+  --ctx-border: var(--color-default-red-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-red-800);
+  --ctx-text-pressed: var(--color-default-red-800);
+  --ctx-background-hover: var(--color-default-red-300);
+  --ctx-background-pressed: var(--color-default-red-400);
+  --ctx-gradient-hover: var(--color-default-red-400);
+  --ctx-gradient-pressed: var(--color-default-red-400);
+  --ctx-border-hover: var(--color-default-red-400);
+  --ctx-border-pressed: var(--color-default-red-400);
+}
+
+@utility ctx-red-subtlest {
+  --ctx-text: var(--color-default-red-800);
+  --ctx-text-bold: var(--color-default-red-900);
+  --ctx-background: var(--color-default-red-100);
+  --ctx-gradient: var(--color-default-red-200);
+  --ctx-border: var(--color-default-red-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-red-800);
+  --ctx-text-pressed: var(--color-default-red-800);
+  --ctx-background-hover: var(--color-default-red-200);
+  --ctx-background-pressed: var(--color-default-red-300);
+  --ctx-gradient-hover: var(--color-default-red-300);
+  --ctx-gradient-pressed: var(--color-default-red-300);
+  --ctx-border-hover: var(--color-default-red-300);
+  --ctx-border-pressed: var(--color-default-red-300);
+}
+
+@utility ctx-success-bolder {
+  --ctx-text: var(--color-default-neutral-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-green-800);
+  --ctx-gradient: var(--color-default-green-700);
+  --ctx-border: var(--color-default-green-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-100);
+  --ctx-text-pressed: var(--color-default-neutral-100);
+  --ctx-background-hover: var(--color-default-green-700);
+  --ctx-background-pressed: var(--color-default-green-600);
+  --ctx-gradient-hover: var(--color-default-green-600);
+  --ctx-gradient-pressed: var(--color-default-green-600);
+  --ctx-border-hover: var(--color-default-green-700);
+  --ctx-border-pressed: var(--color-default-green-700);
+}
+
+@utility ctx-success-subtlest {
+  --ctx-text: var(--color-default-green-800);
+  --ctx-text-bold: var(--color-default-green-900);
+  --ctx-background: var(--color-default-green-100);
+  --ctx-gradient: var(--color-default-green-200);
+  --ctx-border: var(--color-default-green-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-green-800);
+  --ctx-text-pressed: var(--color-default-green-800);
+  --ctx-background-hover: var(--color-default-green-200);
+  --ctx-background-pressed: var(--color-default-green-300);
+  --ctx-gradient-hover: var(--color-default-green-300);
+  --ctx-gradient-pressed: var(--color-default-green-300);
+  --ctx-border-hover: var(--color-default-green-300);
+  --ctx-border-pressed: var(--color-default-green-300);
+}
+
+@utility ctx-teal-bolder {
+  --ctx-text: var(--color-default-teal-200);
+  --ctx-text-bold: var(--color-default-teal-100);
+  --ctx-background: var(--color-default-teal-800);
+  --ctx-gradient: var(--color-default-teal-700);
+  --ctx-border: var(--color-default-teal-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-teal-200);
+  --ctx-text-pressed: var(--color-default-teal-200);
+  --ctx-background-hover: var(--color-default-teal-700);
+  --ctx-background-pressed: var(--color-default-teal-600);
+  --ctx-gradient-hover: var(--color-default-teal-600);
+  --ctx-gradient-pressed: var(--color-default-teal-600);
+  --ctx-border-hover: var(--color-default-teal-700);
+  --ctx-border-pressed: var(--color-default-teal-700);
+}
+
+@utility ctx-teal-subtle {
+  --ctx-text: var(--color-default-teal-900);
+  --ctx-text-bold: var(--color-default-teal-1000);
+  --ctx-background: var(--color-default-teal-300);
+  --ctx-gradient: var(--color-default-teal-400);
+  --ctx-border: var(--color-default-teal-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-teal-900);
+  --ctx-text-pressed: var(--color-default-teal-900);
+  --ctx-background-hover: var(--color-default-teal-400);
+  --ctx-background-pressed: var(--color-default-teal-500);
+  --ctx-gradient-hover: var(--color-default-teal-500);
+  --ctx-gradient-pressed: var(--color-default-teal-500);
+  --ctx-border-hover: var(--color-default-teal-500);
+  --ctx-border-pressed: var(--color-default-teal-500);
+}
+
+@utility ctx-teal-subtler {
+  --ctx-text: var(--color-default-teal-800);
+  --ctx-text-bold: var(--color-default-teal-900);
+  --ctx-background: var(--color-default-teal-200);
+  --ctx-gradient: var(--color-default-teal-300);
+  --ctx-border: var(--color-default-teal-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-teal-800);
+  --ctx-text-pressed: var(--color-default-teal-800);
+  --ctx-background-hover: var(--color-default-teal-300);
+  --ctx-background-pressed: var(--color-default-teal-400);
+  --ctx-gradient-hover: var(--color-default-teal-400);
+  --ctx-gradient-pressed: var(--color-default-teal-400);
+  --ctx-border-hover: var(--color-default-teal-400);
+  --ctx-border-pressed: var(--color-default-teal-400);
+}
+
+@utility ctx-teal-subtlest {
+  --ctx-text: var(--color-default-teal-800);
+  --ctx-text-bold: var(--color-default-teal-900);
+  --ctx-background: var(--color-default-teal-100);
+  --ctx-gradient: var(--color-default-teal-200);
+  --ctx-border: var(--color-default-teal-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-teal-800);
+  --ctx-text-pressed: var(--color-default-teal-800);
+  --ctx-background-hover: var(--color-default-teal-200);
+  --ctx-background-pressed: var(--color-default-teal-300);
+  --ctx-gradient-hover: var(--color-default-teal-300);
+  --ctx-gradient-pressed: var(--color-default-teal-300);
+  --ctx-border-hover: var(--color-default-teal-300);
+  --ctx-border-pressed: var(--color-default-teal-300);
+}
+
+@utility ctx-warning-bolder {
+  --ctx-text: var(--color-default-neutral-100);
+  --ctx-text-bold: var(--color-default-neutral-0);
+  --ctx-background: var(--color-default-yellow-800);
+  --ctx-gradient: var(--color-default-yellow-700);
+  --ctx-border: var(--color-default-yellow-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-neutral-100);
+  --ctx-text-pressed: var(--color-default-neutral-100);
+  --ctx-background-hover: var(--color-default-yellow-700);
+  --ctx-background-pressed: var(--color-default-yellow-600);
+  --ctx-gradient-hover: var(--color-default-yellow-600);
+  --ctx-gradient-pressed: var(--color-default-yellow-600);
+  --ctx-border-hover: var(--color-default-yellow-700);
+  --ctx-border-pressed: var(--color-default-yellow-700);
+}
+
+@utility ctx-warning-subtlest {
+  --ctx-text: var(--color-default-yellow-800);
+  --ctx-text-bold: var(--color-default-yellow-900);
+  --ctx-background: var(--color-default-yellow-100);
+  --ctx-gradient: var(--color-default-yellow-200);
+  --ctx-border: var(--color-default-yellow-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-yellow-800);
+  --ctx-text-pressed: var(--color-default-yellow-800);
+  --ctx-background-hover: var(--color-default-yellow-200);
+  --ctx-background-pressed: var(--color-default-yellow-300);
+  --ctx-gradient-hover: var(--color-default-yellow-300);
+  --ctx-gradient-pressed: var(--color-default-yellow-300);
+  --ctx-border-hover: var(--color-default-yellow-300);
+  --ctx-border-pressed: var(--color-default-yellow-300);
+}
+
+@utility ctx-yellow-bolder {
+  --ctx-text: var(--color-default-yellow-200);
+  --ctx-text-bold: var(--color-default-yellow-100);
+  --ctx-background: var(--color-default-yellow-800);
+  --ctx-gradient: var(--color-default-yellow-700);
+  --ctx-border: var(--color-default-yellow-700);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-yellow-200);
+  --ctx-text-pressed: var(--color-default-yellow-200);
+  --ctx-background-hover: var(--color-default-yellow-700);
+  --ctx-background-pressed: var(--color-default-yellow-600);
+  --ctx-gradient-hover: var(--color-default-yellow-600);
+  --ctx-gradient-pressed: var(--color-default-yellow-600);
+  --ctx-border-hover: var(--color-default-yellow-700);
+  --ctx-border-pressed: var(--color-default-yellow-700);
+}
+
+@utility ctx-yellow-subtle {
+  --ctx-text: var(--color-default-yellow-900);
+  --ctx-text-bold: var(--color-default-yellow-1000);
+  --ctx-background: var(--color-default-yellow-300);
+  --ctx-gradient: var(--color-default-yellow-400);
+  --ctx-border: var(--color-default-yellow-500);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-yellow-900);
+  --ctx-text-pressed: var(--color-default-yellow-900);
+  --ctx-background-hover: var(--color-default-yellow-400);
+  --ctx-background-pressed: var(--color-default-yellow-500);
+  --ctx-gradient-hover: var(--color-default-yellow-500);
+  --ctx-gradient-pressed: var(--color-default-yellow-500);
+  --ctx-border-hover: var(--color-default-yellow-500);
+  --ctx-border-pressed: var(--color-default-yellow-500);
+}
+
+@utility ctx-yellow-subtler {
+  --ctx-text: var(--color-default-yellow-800);
+  --ctx-text-bold: var(--color-default-yellow-900);
+  --ctx-background: var(--color-default-yellow-200);
+  --ctx-gradient: var(--color-default-yellow-300);
+  --ctx-border: var(--color-default-yellow-400);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-yellow-800);
+  --ctx-text-pressed: var(--color-default-yellow-800);
+  --ctx-background-hover: var(--color-default-yellow-300);
+  --ctx-background-pressed: var(--color-default-yellow-400);
+  --ctx-gradient-hover: var(--color-default-yellow-400);
+  --ctx-gradient-pressed: var(--color-default-yellow-400);
+  --ctx-border-hover: var(--color-default-yellow-400);
+  --ctx-border-pressed: var(--color-default-yellow-400);
+}
+
+@utility ctx-yellow-subtlest {
+  --ctx-text: var(--color-default-yellow-800);
+  --ctx-text-bold: var(--color-default-yellow-900);
+  --ctx-background: var(--color-default-yellow-100);
+  --ctx-gradient: var(--color-default-yellow-200);
+  --ctx-border: var(--color-default-yellow-300);
+  --ctx-shadow: var(--color-neutral-alpha-500A);
+  --ctx-text-hover: var(--color-default-yellow-800);
+  --ctx-text-pressed: var(--color-default-yellow-800);
+  --ctx-background-hover: var(--color-default-yellow-200);
+  --ctx-background-pressed: var(--color-default-yellow-300);
+  --ctx-gradient-hover: var(--color-default-yellow-300);
+  --ctx-gradient-pressed: var(--color-default-yellow-300);
+  --ctx-border-hover: var(--color-default-yellow-300);
+  --ctx-border-pressed: var(--color-default-yellow-300);
+}
+
+
+
+/* === ./styles/context.css === */
+
+@theme {
+  --color-brand-100: var(--color-bcc-100);
+  --color-brand-200: var(--color-bcc-200);
+  --color-brand-300: var(--color-bcc-300);
+  --color-brand-400: var(--color-bcc-400);
+  --color-brand-500: var(--color-bcc-500);
+  --color-brand-600: var(--color-bcc-600);
+  --color-brand-700: var(--color-bcc-700);
+  --color-brand-800: var(--color-bcc-800);
+  --color-brand-900: var(--color-bcc-900);
+  --color-brand-1000: var(--color-bcc-1000);
+}
+
+/** DEFAULT CONTEXTS */
+@utility ctx-default {
+  @apply ctx-neutral-subtlest;
+}
+@utility ctx-success { @apply ctx-success-subtlest }
+@utility ctx-danger { @apply ctx-danger-subtlest }
+@utility ctx-warning { @apply ctx-warning-subtlest }
+@utility ctx-info { @apply ctx-info-subtlest }
+
+@utility text-ctx {
+  color: var(--ctx-text);
+}
+
+@utility text-ctx-bold {
+  color: var(--ctx-text-bold);
+}
+
+@utility bg-ctx {
+  background-color: var(--ctx-background);
+}
+
+@utility border-ctx {
+  border-color: var(--ctx-border);
+}
+
+@utility shadow-ctx {
+  --tw-shadow-color: var(--ctx-shadow);
+}
+
+@utility ctx {
+  background-color: var(--ctx-background);
+  color: var(--ctx-text);
+  border-color: var(--ctx-border);
+}
+
+@utility ctx-gradient {
+  background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+}
+
+@utility ctx-raised {
+  box-shadow: 0 1px 1px 0 var(--ctx-shadow), 0 0 1px 0 var(--ctx-shadow);
+}
+
+@utility ctx-flat {
+  --ctx-background: transparent;
+
+  @variant hover {
+    --ctx-background: var(--ctx-background-hover);
+  }
+}
+
+@utility clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  --ctx-background: var(--ctx-background-hover);
+  --ctx-text: var(--ctx-text-hover);
+  --ctx-border: var(--ctx-border-hover);
+}
+
+.clickable:active {
+  --ctx-background: var(--ctx-background-pressed);
+  --ctx-text: var(--ctx-text-pressed);
+  --ctx-border: var(--ctx-border-pressed);
+}
+
+
+/* === ./styles/fonts.css === */
+@utility heading-xs { font: var(--heading-xs); }
+@utility heading-sm { font: var(--heading-sm); }
+@utility heading-md { font: var(--heading-md); }
+@utility heading-lg { font: var(--heading-lg); }
+@utility heading-xl { font: var(--heading-xl); }
+@utility heading-2xl { font: var(--heading-2xl); }
+@utility heading-3xl { font: var(--heading-3xl); }
+@utility heading-4xl { font: var(--heading-4xl); }
+@utility heading-5xl { font: var(--heading-5xl); }
+@utility body-sm { font: var(--body-sm); }
+@utility body-md { font: var(--body-md); }
+@utility body-lg { font: var(--body-lg); }
+
+
+
+
+/* === ./components/custom/styles.css === */
+
+/* from ./BccReact/BccReact.css */
+@layer components {
+  .bcc-react {
+    @apply relative flex w-full items-center overflow-visible;
+  }
+  .bcc-react-toggle {
+    @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
+  }
+  .bcc-react-list {
+    @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
+  }
+  .bcc-react-empty {
+    @apply heading-xs flex items-center;
+  }
+
+  .bcc-react-selector-container {
+    @apply absolute z-50 h-9;
+    @apply top-11 origin-top-left;
+  }
+
+  .bcc-react-selector-container--top {
+    @apply -top-10 origin-bottom-left;
+  }
+
+  .bcc-react-selector {
+    @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
+    border-radius: 18px;
+  }
+
+  .bcc-react-selector-emojis-container {
+    @apply flex items-center bg-neutral-100 px-1;
+  }
+
+  .bcc-react-selector-more {
+    @apply flex w-9 items-center justify-center;
+  }
+  .bcc-react-selector-more-btn {
+    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
+  }
+
+  .bcc-react-dropdown-container {
+    @apply left-0 top-0 -z-10 w-full max-w-full;
+    width: 296px;
+  }
+  .bcc-react-dropdown-container--top {
+    @apply bottom-0 top-auto pb-0;
+  }
+
+  .bcc-react-dropdown {
+    @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
+  }
+
+  .bcc-react-arrow-down-icon {
+    @apply h-6 w-6 text-slate-600;
+    transition: transform 0.3s ease;
+  }
+  .bcc-react-arrow-down-icon.open {
+    transform: rotate(-180deg);
+  }
+
+  .bcc-react-selector-item {
+    @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
+  }
+
+  .bcc-react-selector-item--clicked {
+    animation: scaleFadeOut 300ms forwards;
+  }
+
+  @keyframes scaleFadeOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
+  }
+
+  .bcc-react-emoji-list-item {
+    @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
+    /* Default --not-selected */
+    @apply ctx-neutral-subtlest;
+  }
+  .bcc-react-emoji-list-item.selected {
+    @apply ctx-neutral-subtle;
+  }
+}
+
+
+
+/* from ./BccCapacityIndicator/BccCapacityIndicator.css */
+@layer components {
+    .bcc-capacity-indicator {
+        @apply text-base;
+    }
+
+    .bcc-capacity-indicator.xs {
+        @apply text-xs;
+    }
+
+    .bcc-capacity-indicator.sm {
+        @apply text-sm;
+    }
+
+    .bcc-capacity-indicator.lg {
+        @apply text-xl;
+    }
+
+    .bcc-capacity-indicator {
+        --bcc-capacity-indicator-background: transparent;
+        --bcc-capacity-indicator-text: var(--ctx-text);
+        --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
+        --bcc-capacity-indicator-circle-used: var(--ctx-border);
+        background: var(--bcc-capacity-indicator-background);
+        @apply ctx-gray-subtlest;
+    }
+
+    .bcc-capacity-indicator.colored {
+        --bcc-capacity-indicator-background: var(--ctx-background);
+        @apply ctx-blue-subtlest;
+    }
+
+    .bcc-capacity-indicator .text {
+        color: var(--bcc-capacity-indicator-text);
+    }
+    .bcc-capacity-indicator .circle {
+        stroke: var(--bcc-capacity-indicator-circle);
+    }
+    .bcc-capacity-indicator .circle-used {
+        stroke: var(--bcc-capacity-indicator-circle-used);
+    }
+
+    .bcc-capacity-indicator.is-warning {
+        @apply ctx-yellow-subtlest;
+    }
+
+    .bcc-capacity-indicator.is-full {
+        @apply ctx-red-subtlest;
+    }
+}
+
+
+/* from ./BccDialKnob/BccDialKnob.css */
+@layer components {
+    .bcc-knob {
+        @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
+
+        --bcc-knob-arc-bg: var(--color-background-neutral-default);
+        --bcc-knob-head: var(--color-background-brand-bolder-default);
+        --bcc-knob-tail: var(--color-background-brand-subtle-default);
+
+        --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
+        --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
+        
+        --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
+        --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
+    }
+
+    .bcc-knob-label {
+        @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
+    }
+
+    .bcc-knob-top-left {
+        @apply absolute top-0 left-0 p-2 text-left;
+    }
+
+    .bcc-knob-top-right {
+        @apply absolute top-0 right-0 p-2 text-right;
+    }
+}
+
+
+
+/* from ./BccNpsScore/BccNpsScore.css */
+@layer components {
+  .bcc-nps-score {
+    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
+  }
+
+  .bcc-nps-score--heading {
+    @apply flex items-center justify-between;
+  }
+
+  .bcc-nps-score--label {
+    @apply flex-1 truncate;
+  }
+
+  .bcc-nps-score--bar {
+    @apply flex justify-evenly rounded-xl text-white pointer-events-none;
+    @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
+  }
+
+  .bcc-nps-score--bar.reverse {
+    @apply bg-linear-to-l;
+  }
+
+  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
+    @apply bg-ctx ctx-gray-subtler text-disabled;
+  }
+
+  .bcc-nps-score--number {
+    @apply border-border-inverse;
+    @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
+    @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
+  }
+
+  .bcc-nps-score--number:disabled {
+    @apply pointer-events-none cursor-default;
+  }
+
+  .bcc-nps-score--number.active {
+    @apply pointer-events-none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .bcc-nps-score--number.inactive {
+    @apply bg-ctx text-ctx ctx-gray-subtle;
+  }
+
+  .bcc-nps-score--number:first-child {
+    @apply rounded-l-xl pl-0.5;
+  }
+  .bcc-nps-score--number:last-child{
+    @apply rounded-r-xl border-r-0 pr-0.5;
+  }
+}
+
+
+
+/* from ./BccNpsResult/BccNpsResult.css */
+@layer components {
+  .bcc-nps-result {
+    @apply relative w-full;
+  }
+
+  .bcc-nps-result .result-gauge-dial {
+    transform-origin: center;
+  }
+
+  .bcc-nps-result.animated .result-gauge-dial {
+    transition-delay: 0.3s;
+    transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);    
+  }
+
+  .bcc-nps-result-labels.lg {
+    @apply bottom-[2em];
+  }
+  .bcc-nps-result-labels {
+    @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
+  }
+  .bcc-nps-result-labels.sm {
+    @apply bottom-0;
+  }
+
+  .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
+    @apply text-heading-xl leading-tight;
+  }
+  .bcc-nps-result-labels--heading {
+    @apply text-heading-lg leading-none;
+  }
+  .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
+    @apply text-heading-md leading-none;
+  }
+
+  .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
+    @apply text-body-lg opacity-60;
+  }
+  .bcc-nps-result-labels--label {
+    @apply text-body-md opacity-60;
+  }
+  .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
+    @apply text-body-sm;
+  }
+}
+
+
+
+/* from ./BccGraphic/BccGraphic.css */
+@layer components {
+  .bcc-graphic .corner,
+  .bcc-graphic .center-slot {
+    @apply absolute z-10;
+  }
+  .bcc-graphic .corner.top-left {
+    @apply left-4 top-4;
+  }
+  .bcc-graphic .corner.top-right {
+    @apply right-4 top-4;
+  }
+  .bcc-graphic .corner.bottom-right {
+    @apply bottom-4 right-4;
+  }
+  .bcc-graphic .corner.bottom-left {
+    @apply bottom-4 left-4;
+  }
+  .bcc-graphic .center-slot {
+    @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center
+  }
+
+  .bcc-graphic {
+    @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
+  }
+
+  .bcc-graphic-banner {
+    @apply absolute inset-0 h-full w-full object-cover object-center
+  }
+  .bcc-graphic-banner--loading {
+    @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default
+  }
+
+  .bcc-graphic-logo {
+    @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center
+  }
+  .bcc-graphic-logo--loading {
+    @apply animate-pulse bg-black opacity-10 blur-sm
+  }
+}
+
+
+
+/* from ./BccFrame/BccFrame.css */
+@layer components {
+    .bcc-frame {
+        @apply ctx ctx-default w-full;
+    }
+
+    .bcc-frame.bcc-frame--shadow {
+        @apply shadow shadow-ctx;
+    }
+
+    .bcc-frame--raised {
+        --ctx-background: var(--color-elevation-surface-raised-default);
+    }
+    .bcc-frame--raised.rounded {
+        @apply rounded;
+    }
+    .bcc-frame--raised.bcc-frame--shadow {
+        @apply shadow-raised;
+    }
+
+    .bcc-frame--overlay {
+        --ctx-background: var(--color-elevation-surface-overlay-default);
+    }
+    .bcc-frame--overlay.bcc-frame--shadow {
+        @apply shadow-overlay;
+    }
+
+    .bcc-frame--sunken {
+        --ctx-background: var(--color-elevation-surface-sunken-default);
+    }
+    .bcc-frame--sunken.bcc-frame--shadow {
+        @apply shadow-inner;
+    }
+}
+
+
+/* from ./BccToggle/BccToggle.css */
+@layer components {
+    .p-toggleswitch.useCtx {
+        --p-toggleswitch-background: var(--ctx-background);
+        --p-toggleswitch-hover-background: var(--ctx-background-hover);
+        --p-toggleswitch-checked-background: var(--ctx-background);
+        --p-toggleswitch-checked-hover-background: var(--ctx-background-hover);
+    }
+    .p-toggleswitch.loading {
+        @apply pointer-events-none;
+    }
+    .p-toggleswitch.toggled:not(.p-toggleswitch-checked) {
+        --p-toggleswitch-background: var(--color-background-danger-bolder-default);
+        --p-toggleswitch-hover-background: var(--color-background-danger-bolder-hover);
+    }
+}
+
+
+/* from ./BccBadge/BccBadge.css */
+@layer components {
+  .bcc-badge {
+    @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
+  
+    @apply bg-ctx text-ctx;
+  }
+  .bcc-badge.md {
+    @apply h-5 w-5 text-body-sm p-0.5;
+  }
+  .bcc-badge.sm {
+    @apply w-4 h-4 text-body-sm p-0.5;
+  }
+  .bcc-badge.lg {
+    @apply w-6 h-6 text-body-sm p-1;
+  }
+  .bcc-badge.xl {
+    @apply w-8 h-8 text-body-md p-1.5;
+  }
+
+  .bcc-badge.bcc-badge-text {
+    @apply w-auto px-2;
+  }
+  .bcc-badge-text.lg { 
+    @apply px-3;
+  }
+
+  .bcc-badge .bcc-badge-icon {
+    @apply size-full;
+  }
+
+  .bcc-badge.bordered {
+    @apply border-2;
+    border-color: var(--ctx-background-pressed);
+  }
+
+  .bcc-badge.squared  {
+    @apply rounded;
+  }
+}
+
+
+
+/* from ./BccAvatar/BccAvatar.css */
+@layer components {
+    .bcc-avatar {
+        --p-avatar-background: var(--ctx-background);
+        --p-avatar-color: var(--ctx-text);
+        --bcc-avatar-border: var(--ctx-border);
+        @apply overflow-hidden shrink-0 ctx-gray-subtler;
+    }
+    .bcc-avatar.male,
+    .bcc-avatar.M {
+        @apply ctx-blue-subtler;
+    }
+    .bcc-avatar.female,
+    .bcc-avatar.F {
+        @apply ctx-purple-subtler;
+    }
+    .bcc-avatar.male.child,
+    .bcc-avatar.M.child {
+        @apply ctx-teal-subtler;
+    }
+    .bcc-avatar.female.child,
+    .bcc-avatar.F.child {
+        @apply ctx-magenta-subtler;
+    }
+    .bcc-avatar.bordered {
+        @apply border-2 border-ctx;
+    }
+    .bcc-avatar.xs {
+        @apply size-5 text-xs;
+    }
+    .bcc-avatar.sm {
+        @apply size-6 text-sm;
+    }
+    .bcc-avatar.md {
+        @apply size-8 text-base;
+    }
+    .bcc-avatar.lg {
+        @apply size-10 text-lg;
+    }
+    .bcc-avatar.xl {
+        @apply size-12 text-xl;
+    }
+    .bcc-avatar.xxl {
+        @apply size-20 text-3xl;
+    }
+    .bcc-avatar.xxxl {
+        @apply size-24 text-4xl;
+    }
+
+    .bcc-avatar.squared.lg {
+        @apply text-xl;
+    }
+    .bcc-avatar.squared.xl {
+        @apply text-2xl;
+    }
+    .bcc-avatar.squared.xxl {
+        @apply text-4xl;
+    }
+    .bcc-avatar.squared.xxxl {
+        @apply text-5xl;
+    }
+
+
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(25%, -25%);
+    }
+}
+
+
+
+:host {
+    @apply font-sans antialiased p-0 m-0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+b,
+strong,
+.bold {
+    font-weight: bold;
+    --ctx-text: var(--ctx-text-bold);
+}
+
+/* Disable state */
+:disabled,
+.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}